WOOCS - WooCommerce Currency Switcher

This article is just an example which purpose is to help users insert switcher in theirs site menu, and it is not part of WOOCS functionality!

• Install plugin Shortcode in Menus
• Add in functions.php of your current wp theme next code:
  
  PHP

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

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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

• Go to Menus page: wp-admin/nav-menus.php
• Insert shortcode [woocs_in_menu] as on the screen below:
  
• Save menu, and look it on your site front. Remember about site cache, so reset it if you using any cache plugins
• Using CSS style overloading it as you want using hook wp_footer in functions.php:
  
  CSS

  .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; }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

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

  1 2 3 4 5 6 7

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

  
   

See demo here

Also read: https://currency-switcher.com/how-to-insert-currency-switcher-into-site-menu/

Obsolete description:

• Install plugin https://wordpress.org/plugins/shortcode-in-menus/
• Go to menu page wp-admin/nav-menus.php
• Drop shortcode [woocs] into navigation label textinput with any text you want

p.s. Possible CSS incompatibilities which should be resolved by you or your site developer