Design

Posted on by Villatheme

Design tab, where you can configure the front-end interface of the plugin.

Currencies Bar

Settings for Currencies Bar – the sidebar currency list, displayed in the left or right middle section of the site, on any pages

  1. Enable/Disable the currencies bar: The bar float on a sidebar of your site, and allows customers to switch currencies.
  2. Checkout page: Enable to hide currencies bar on the checkout page.
  3. Cart Page: Enable to hide currencies bar on the cart page.
  4. Conditional Tags: Configure where the currencies bar will appear by using WooCommerce conditionals Tags and WordPress Conditional tags.
    Important note: To handle WP’s Conditional Tags, this plugin uses eval() which is very dangerous because it allows the execution of arbitrary PHP code. Therefore, please only fill this field with proper conditional tags that are validated and/or provided by trusted developers
  5. Title: Enter the title of the currencies bar.
  6. Position: Select currencies bar position.
  7. Desktop: Enable it to allow the Currencies Bar to Collapse on the desktop,  this option allows you to minimize the currencies bar on the desktop. The currencies bar will appear as 1 selected currency and will display fully when customers hover their mouse over it.
  8. Mobile: Enable it to allow Currencies Bar Collapse on mobile.
  9. Max height(px): Enter the max height for the currencies bar.
  10. Text color: Select the color of the currency bar text.
  11. Sidebar layout: 2 layouts
    • Curved border and no split space: Displays each currency in a dropdown with no gaps between lines, and rounded corners on the dropdown box
    • Split currency line with space: Displays each currency in a dropdown with blank space separating each line for a more spaced-out look
  12. Style: Select the style of the currencies bar, there are 4 options for you to select: Default (Currency code), Symbol, Flag,  Flag & Currency Code, and Flag & Currency symbol.
  13. Main color: Configure the color of the currencies bar.
  14. Hover color: Currencies bar changes to this color when you hover
  15. Background color: Configure the background color of the currencies bar.

 

Currency selector

Settings for the Currency Price Switcher, which is visible on single product pages only.

  1. Currency Price Switcher: Display a price switcher under product price on product pages, allowing customers to switch the price between currencies. There can be some selections:
    • Not show
    • Flag
    • Flag + Currency code
    • Flag + Price
    • Currency Symbol
  2. Switcher layout:  2 layouts
    • Curved border and no split space: Displays each currency in a dropdown with no gaps between lines, and rounded corners on the dropdown box
    • Split currency line with space: Displays each currency in a dropdown with blank space separating each line for a more spaced-out look
  3. Price Switcher Positions: Support the following positions on the single product pages, including:
    • Below title
    • Below price
    • Below excerpt
    • Below add to cart
    • Below meta
    • Below sharing
  4. Click to expand the currency selector.

 

Currency price collate

This feature can work on both single product page and product list

  1. Enable: Enable this feature
  2. Price collate layout: Adjusts the layout style of prices with multiple currencies displayed together
    1. Inline: All currencies in one line
    2. Split line: Each currency a line
  3. Single product position: Sets the position of the grouped prices in all currencies on single product pages
  4. Archive position: Sets the position of the grouped prices in all currencies on archive pages

 

Widget, Flag Custom: The option for you to replace a flag with your flag.

Settings for currency tool created by dragging widget under Appearance.

 

Shortcode

Settings for Currency Selectors created by shortcodes.

  1. Text color: Change the text color of the currency shortcode
  2. Background color: Change the background color of the currency shortcode
  3. Activate text color: Change the text color of the currency shortcode when activating
  4. Activate background color: Change the background color of the currency shortcode when activating

 

Custom CSS: Allows you to add your own CSS code to design the currencies bar or widget.