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:123456789101112131415161718add_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><?phpreturn 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:1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556.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;}1234567add_action('wp_footer', function (){?><style>/********* overload any styles here ***********/</style><?php});
See demo here
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
