How to add Currency Switcher to the website

Currency Switcher provides 2 ways to add a module into the site content: with the help of widgets, shortcode and PHP code or using the Display Rules tab for each mode.

Display rules tab

Select the mode you want to add into the page and move to Display rules tab. Here you can find the next settings:

  • Show on – select the devices on which the panel should be displayed. You are able to show switcher only on mobile, on desktop or both.
  • Show on screen – if this option is enabled, the mode will be displayed only under the selected conditions, f.e: if the width of the screen is more or less than the specified width
  • Display everywhere – select pages from the list on which you want to display the panel or select “Enable” to display the panel on each page.
  • Pages/ Product categories/ Custom post types– enable and select page or post from the list on which you want to hide a module.

Save changes.


Shortcode and PHP code

In this tab, you can copy the shortcode and insert into the page or theme code to display a module.

You are able to add additional parameters to the shortcode:
'currency_display' => 'name', (name, title)
'show_as' => 'dropdown', (dropdown, flags)
'show_flag_dropdown' => false, (false, true)
'width' => '100%', 
'exclude' => array(), (CODE of Currency ex. UAH)
'show_on' => 'both', (both, desktops, mobiles)
'show_on_widths' => 0,
'show_on_screen_compare' => 'less', (less, more)
'show_on_widths_value' => ''

For example, if you need to display the converter as a dropdown with flags, add these parameters to the shortcode:

[woo -currency-switcher exclude='USD,GBP' show_as=dropdown show_flag_dropdown=true]


Widgets

Move to the Appearance -> Widgets and you can find the Currency Switcher widgets:

Each widget has personal settings. Select the widget and specify a widget area or sidebar.

Currency Switcher Widget settings:

  • Title – put the title of the widget.
  • Width – set the width for a widget in %
  • Show as a Dropdown list or Flags icons.
  • Currency Dropdown Options Text – display a currency code or currency title.
  • Enable the option to show the flag in a dropdown.
  • Excluded currencies from the list. The selected currency will not be displayed in the list of switches. Press CTRL + CLICK to toggle select.
  • Specify the display rules to show switcher on mobile, desktop or both.
  • Choose the screen width in px to displayed only under the selected conditions.

Set the settings and press Save.

 

 

 

Currency Converter widget:

  • Title – put the title of the widget.
  • Width – set the width for a widget in %
  • Show as a Dropdown list or Flags icons.
  • Currency Dropdown Options Text – display a currency code or currency title.
  • Enable the option to show the flag in a dropdown.
  • Excluded currencies from the list. The selected currency will not be displayed in the list of switches. Press CTRL + CLICK to toggle select.
  • Layout – choose a vertical or horizontal type
  • Select a colour for Button Text, Button Background and Button Background Hover Color
  • Set the display rules to show switcher on mobile, desktop or both.
  • Specify the screen width in px to displayed only under the selected conditions.

Don’t forget to Save the changes.

 

 

 

 

 

Currency Rates widget settings:

  • Title – put the title of the widget.
  • Width – set the width for a widget in %
  • Currency Dropdown Options Text – display a currency code or currency title.
  • Enable the option to show the flag in a dropdown.
  • Enable the option to show the flag in currency list.
  • Excluded currencies from the list. The selected currency will not be displayed in the list of switches. Press CTRL + CLICK to toggle select.
  • Set the display rules to show switcher on mobile, desktop or both.
  • Set the screen width in px to displayed only under the selected conditions.

 

 

 

Example of the Currency Switcher Plugin widgets:

Categories
Latest Articles