Comment ajouter le sélecteur de devise WooCommerce à un menu

Placer le commutateur de devises WooCommerce dans le menu du site est le placement le plus demandé, et c'est autant une question de thème que de plugin. Ce qui suit est un exemple fonctionnel que vous pouvez adapter à votre propre balisage de menu.

• Installez le plugin Shortcode in Menus
• Ajoutez dans le fichier functions.php de votre thème WP actuel le code suivant :

  add_shortcode('woocs_in_menu', function() {
      if (defined('WOOCS_LINK')) {
          $styles_link = WOOCS_LINK . 'views/shortcodes/styles/for-menu/';
          wp_enqueue_style('woocs-style-in-menu', $styles_link . "styles.css", array(), WOOCS_VERSION);
          wp_enqueue_script('woocs-style-in-menu', $styles_link . "actions.js", array('jquery'), WOOCS_VERSION);
  
          ob_start();
          ?>
          <span style="cursor: pointer;">Click on me!!</span><br />
          <div class="woocs-style-for-menu-dialog" style="display:none; text-align: left; width: 160px;">
              <div class="woocs-style-for-menu-title">Select Currency</div>
              <div class="woocs-style-for-menu-form"><?php echo do_shortcode('[woocs style=3]') ?></div>
          </div>
  
          <?php
          return ob_get_clean();
      }
  });

• Allez dans la page Menus : wp-admin/nav-menus.php
• Insérez le shortcode [woocs_in_menu] comme sur l'écran ci-dessous :
• Enregistrez le menu, et consultez-le sur la partie publique de votre site. N'oubliez pas le cache du site, donc réinitialisez-le si vous utilisez des plugins de cache
• Utilisez la surcharge de style CSS comme vous le souhaitez en utilisant le hook wp_footer dans functions.php :

  .woocs-style-for-menu-dialog {
      position: absolute;
      text-align: center;
      background: #4478a0;
      margin: 13px 0 4px 4px;
      display: inline-block;
      width: 256px;
      box-shadow: 0px 0px 8px rgba(68, 140, 160, 0.5);
  }
  .woocs-style-for-menu-dialog:after,
  .woocs-style-for-menu-dialog:before {
      bottom: 100%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
  }
  .woocs-style-for-menu-dialog:after {
      border-color: rgba(255, 255, 255, 0);
      border-bottom-color: #5C9CCE;
      border-width: 15px;
      left: 50%;
      margin-left: -15px;
  }
  .woocs-style-for-menu-dialog:before {
      border-color: rgba(170, 170, 170, 0);
      border-width: 16px;
      left: 50%;
      margin-left: -16px;
  }
  .woocs-style-for-menu-dialog .woocs-style-for-menu-title {
      color: #fff;
      font-weight: bold;
      text-align: center;
      border: 1px solid #5189B5;
      border-width: 0px 0px 1px 0px;
      margin-left: 0;
      margin-right: 0;
      margin-bottom: 4px;
      margin-top: 8px;
      padding: 8px 16px;
      background: #5C9CCE;
      box-shadow: 0px 1px 4px rgba(68, 120, 160, 0.1);
      font-size: 16px;
      line-height:2em;
  }
  .woocs-style-for-menu-dialog .woocs-style-for-menu-title:first-child {
      margin-top: -4px;
  }
  
  .woocs-style-for-menu-form
  {
      padding:16px;
  }
  

  add_action('wp_footer', function (){
  ?>
     <style>
        /********* overload any styles here ***********/
     </style>
  <?php
  });
  

   

Description obsolète :

• Installez le plugin https://wordpress.org/plugins/shortcode-in-menus/
• Allez dans la page Menus wp-admin/nav-menus.php
• Déposez le shortcode [woocs] dans le champ de texte de l'étiquette de navigation avec le texte de votre choix.