So fügen Sie den WooCommerce-Währungswechsler zu einem Menü hinzu

Den WooCommerce-Währungsumschalter im Site-Menü zu platzieren, ist die am häufigsten gewünschte Position, und es ist sowohl eine Frage des Themes als auch des Plugins. Im Folgenden finden Sie ein funktionierendes Beispiel, das Sie an Ihr eigenes Menü-Markup anpassen.

• Installieren Sie das Plugin Shortcode in Menus
• Fügen Sie in der functions.php Ihres aktuellen WordPress-Themes den folgenden Code hinzu:

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

• Gehen Sie zur Menü-Seite: wp-admin/nav-menus.php
• Fügen Sie den Shortcode [woocs_in_menu] wie im folgenden Bildschirmfoto ein:
• Speichern Sie das Menü und betrachten Sie es auf Ihrer Website-Frontseite. Denken Sie an den Site-Cache – setzen Sie ihn zurück, falls Sie Cache-Plugins verwenden.
• Überladen Sie das CSS-Styling nach Wunsch mithilfe des Hooks wp_footer in der 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
  });
  

   

Veraltete Beschreibung:

• Installieren Sie das Plugin https://wordpress.org/plugins/shortcode-in-menus/
• Gehen Sie zur Menü-Seite wp-admin/nav-menus.php
• Fügen Sie den Shortcode [woocs] in das Textfeld für die Navigationsbezeichnung mit einem beliebigen Text ein.