FOX - Currency Switcher Professional for WooCommerce

“Smart designer” (from v.2.3.5/1.3.5) is the part of functionality of WooCommerce Currency Switcher which allows to create multi currency drop-down switcher using convenient dashboard. You can create unlimited count of drop-downs designs for different places of your site and even insert them directly into the site code. Also you can create custom shortcode-wrapper to show currency switchers of different designs depending of the site pages or by any another logic conditions, an example:

add_shorctode('woocs_set1', function($args) {
    global $post;
    //$args - here can be custom parameters
    switch ($post->ID) {
        case 17:
            echo do_shortcode('[woocs sd=2]');
            break;

        case 27:
            echo do_shortcode('[woocs sd=3]');
            break;

        case 44:
            echo do_shortcode('[woocs sd=4]');
            break;

        default:
            echo do_shortcode('[woocs sd=1]');
            break;
    }
});

In the example above using custom shortcode [woocs_set1 custom_param=1] allows to show different currency switchers designs depending of the site pages.

On the same page can be placed unlimited count of switchers, for example: in header ‘[woocs sd=1]’, in sidebar ‘[woocs sd=2]’, in the footer ‘[woocs sd=3]’. This adds more feel of functionality for your site customers and on the same way currency switchers fits easily into the landscape of your site.

To create one such design you should go to tab “Designs” on the page of WOOCS options, and press there button “Create“. After creation click on button ‘edit‘ of just created design. On the design options dashboard you will see 4 sections: General, Title, Description, Flag. You can navigate trough the sections using menu on the top right side. Result of editing is instant and you can see changed drop-down on the top of the page with applied settings.

Each section has its own options. Let’s review:

Section “General”:

• range slider “Width” – width of the currency drop-down in pixels, min values is 80px and max one is 900px
• switcher “Width 100%” – if enabled, drop-down will has 100% of the container width where it’s placed
• range slider “Scale” – set the drop-downs scale. Adds convenience to make it smaller to place for example in the site footer
• range slider “Border width” – border width of the currency switcher drop-down in pixels, min values is 0 and max one is 10px
• range slider “Border radius” – border radius of the currency switcher drop-down in percents, min values is 0 and max one is 100%
• color picker “Border color” – color of the switcher border. After click on the picker button you can select what color scheme you want to use: RGB, HSL, HEX
• color picker “Background color” – background color for each option
• color picker “Pointer color” – color of the drop-downs pointer which you can see on the drop-downs right
• color picker “Options divider color” – color of lines which divides options when currency switcher is opened
• range slider “Options divider size” – border width of the line which divides options when currency switcher is opened, min values is 0 and max one is 10px
• range slider “Max open height” – maximum height of the opened drop-down. If sum of options heights is more vertical scrollbar appears

Section “Title”:

• switcher “Show title” – allows to show or hide title text in each option of the currency drop-down switcher
• textinput “Title value” – content of each option title text. Use special keywords and their combination: __CODE__ [USD], __SIGN__ [$], __DESCR__ [any text]. Also you can use usual static text. Example: __CODE__ – __SIGN__ [you will see: USD – $]
• range slider “Title font size” – font size of title text in pixels for each option, min values is 8px and max one is 48px
• switcher “Title Bold” – if enabled title text has bold font weight for each option
• color picker “Title color” – color of title text for each option
• textinput “Title font” – each option title text font family

Section “Description”:

• switcher “Show description” – allows to show or hide description text in each option of the currency drop-down switcher
• range slider “Description font size” – font size of description text in pixels for each option, min values is 8px and max one is 48px
• color picker “Description color” – color of description text for each option
• textinput “Description font” – each option description text font family

Section “Flag”:

• switcher “Show flag” – allows to show or hide flag image for each option of the currency drop-down switcher
• switcher “Flag position” – allows to set flag image side for each option: right or left
• range slider “Flag height” – set flag image height in pixels for each option, min values is 5px and max one is 100px
• range slider “Flag vertical position” – set flag vertical position for each option in pixels, min values is -20px and max one is 30px

Using section navigation placed on the top right side you can quick navigate current design settings and set it options. Do not forget to click “Save” button which you always can find fixed on the bottom of the browser window. After editing design savings, exit the design dashboard and copy shortcode, for example “[woocs sd=7]”. Now you can place it in the usual text widget, text content of your site page, or directly in the site php files, for example in file footer.php using next code:

<?php echo do_shortcode('[woocs sd=7 any_custom_param=123]'); ?>

WOOCS SD Demo page.