Cómo agregar el WooCommerce Currency Switcher a un menú

Poner el conmutador de moneda de WooCommerce en el menú del sitio es la ubicación más solicitada, y es tanto una cuestión de tema como de complemento. A continuación se muestra un ejemplo funcional que puedes adaptar a tu propio marcado de menú.

• Instala el complemento Shortcode in Menus
• Añade en functions.php de tu tema actual de WordPress el siguiente código:

  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();
      }
  });

• Ve a la página de Menús: wp-admin/nav-menus.php
• Inserta el shortcode [woocs_in_menu] como se muestra en la siguiente pantalla:
• Guarda el menú y míralo en la parte frontal de tu sitio. Recuerda la caché del sitio, así que restablécelo si estás utilizando algún complemento de caché.
• Usando la sobrecarga de estilo CSS como desees mediante el hook wp_footer en 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
  });
  

   

Descripción obsoleta:

• Instala el complemento https://wordpress.org/plugins/shortcode-in-menus/
• Ve a la página de menús wp-admin/nav-menus.php
• Coloca el shortcode [woocs] en el campo de texto de la etiqueta de navegación con el texto que desees.