Currency Switcher for Woocommerce Flatsome Theme

Direct Webstore

Direct Webstore

Well-Known Member
Raymond621 said:
Haven't tried mobile because I do not know where to place my currency switcher on mobile.
Click to expand...
I put the shortcode in a div called "currency" at the top of the home page. Then I use a CSS manager plugin that has separate CSS for pc and mobile. For the pc CSS I include .currency { display: none; } which hides it on a pc ... because I already have it in the header but shows it at the top of the page in mobiles.
 
P

prod3v

New Member
Thank you for your reply but it isn't comptaible with all browsers. I think i will use a premium plugin.
 
Direct Webstore

Direct Webstore

Well-Known Member
But if that's too tricky for mobile ... just

1. Create a page called "Select Currency" put the currency widget shortcode in it ... (In the Text tab)

<center><strong>Please Note:</strong> This will change the currency displayed in the store, but the final price at the checkout will be in $US Dollars.</center>

<center>[adsw_currency_switcher]</center>


2. Install Advanced CSS Editor plugin, add the CSS for the Tablet and Mobile ...

.button span {
font-size: 8px;
}
.widget.widget-adsw-currency-selector a.currency-item {
font-weight: 600!important;
color: #000000;
font-size: 12px;
background-color: #ffffff;
border-bottom: 1px solid #ffffff!important;
}
.widget.widget-adsw-currency-selector .currency-carret {
padding-bottom: 0px;
padding-top: 0px;
font-weight: 1000;
font-size: 0px;
color: #ffffff;
}
.widget.widget-adsw-currency-selector .currency-carret {
border-radius: 12px;
border-style: solid;
border-color: #d9d9d9;
border-width: 1px;
padding-bottom: 0px;
padding-top: 0px;
font-weight: 900;
color: #000000;
background-color: #f2f2f2;
}

3. Then put a Button (Button 1) linked to that page ( /select-currency/) labeled "Select Currency" in the mobile header next to the Cart Icon.

pc_002.jpg

4. Also put a link to it in the side popout menu.

Done! :)

Final result in mobile page..

currency_003.jpg
For the PC'Desktop CSS put this for the Currency Widget in the Header

.widget.widget-adsw-currency-selector {
border: none;
padding-left: 0rem!important;
padding-right: 0rem!important;
max-width: 100%;
}
.widget.widget-adsw-currency-selector a.currency-item {
width: 115px;
font-size: 10px;
font-weight: 600!important;
color: #000000;
background-color: #ffffff;
border-bottom: 1px solid #ffffff!important;
}
.widget.widget-adsw-currency-selector .currency-carret {
border-radius: 12px;
border-style: solid;
border-color: #d9d9d9;
border-width: 1px;
padding-bottom: 0px;
padding-top: 0px;
font-weight: 900;
color: #000000;
background-color: #f2f2f2;
}

Put the HTML (HTML 1) element with the shortcode here .... It's the only place it will work properly.

pc.jpg

Desktop result ...

pc_003.jpg


This works 100% in all browsers if you can follow simple directions and have at least half a brain in your head ... LOL :)
 
  • Like
Reactions: RAJ
C

crypcy

New Member
Direct Webstore said:
But if that's too tricky for mobile ... just

1. Create a page called "Select Currency" put the currency widget shortcode in it ... (In the Text tab)

<center><strong>Please Note:</strong> This will change the currency displayed in the store, but the final price at the checkout will be in $US Dollars.</center>

<center>[adsw_currency_switcher]</center>


2. Install Advanced CSS Editor plugin, add the CSS for the Tablet and Mobile ...

.button span {
font-size: 8px;
}
.widget.widget-adsw-currency-selector a.currency-item {
font-weight: 600!important;
color: #000000;
font-size: 12px;
background-color: #ffffff;
border-bottom: 1px solid #ffffff!important;
}
.widget.widget-adsw-currency-selector .currency-carret {
padding-bottom: 0px;
padding-top: 0px;
font-weight: 1000;
font-size: 0px;
color: #ffffff;
}
.widget.widget-adsw-currency-selector .currency-carret {
border-radius: 12px;
border-style: solid;
border-color: #d9d9d9;
border-width: 1px;
padding-bottom: 0px;
padding-top: 0px;
font-weight: 900;
color: #000000;
background-color: #f2f2f2;
}

3. Then put a Button (Button 1) linked to that page ( /select-currency/) labeled "Select Currency" in the mobile header next to the Cart Icon.

View attachment 5527

4. Also put a link to it in the side popout menu.

Done! :)

Final result in mobile page..

View attachment 5528
For the PC'Desktop CSS put this for the Currency Widget in the Header

.widget.widget-adsw-currency-selector {
border: none;
padding-left: 0rem!important;
padding-right: 0rem!important;
max-width: 100%;
}
.widget.widget-adsw-currency-selector a.currency-item {
width: 115px;
font-size: 10px;
font-weight: 600!important;
color: #000000;
background-color: #ffffff;
border-bottom: 1px solid #ffffff!important;
}
.widget.widget-adsw-currency-selector .currency-carret {
border-radius: 12px;
border-style: solid;
border-color: #d9d9d9;
border-width: 1px;
padding-bottom: 0px;
padding-top: 0px;
font-weight: 900;
color: #000000;
background-color: #f2f2f2;
}

Put the HTML (HTML 1) element with the shortcode here .... It's the only place it will work properly.

View attachment 5529

Desktop result ...

View attachment 5530


This works 100% in all browsers if you can follow simple directions and have at least half a brain in your head ... LOL :)
Click to expand...

Thank you for very much for this.
Is there a way to put the drop-down arrow next to the currency (inline)?

Cheers
 
Mar

Mar

Moderator
crypcy said:
Thank you for very much for this.
Is there a way to put the drop-down arrow next to the currency (inline)?
Click to expand...
Try this CSS code:
.widget.widget-adsw-currency-selector .currency-carret:after {
color: #ad1212!important;
position: absolute;
vertical-align: middle!important;
right: 10px;
left: 60px;
top: -19px;
}

1575508978130.png
 
C

crypcy

New Member
Mar said:
Try this CSS code:
.widget.widget-adsw-currency-selector .currency-carret:after {
color: #ad1212!important;
position: absolute;
vertical-align: middle!important;
right: 10px;
left: 60px;
top: -19px;
}

View attachment 10740
Click to expand...

Thank you very much. Had to tweak it a bit to fit my theme.

Just in case anyone else needs it this is the CSS code I used to have the currency selector look flush (inline) with the search bar and CURRENCY + Dropdown arrow inline in Flatsome theme

CSS: 
.widget.widget-adsw-currency-selector .currency-carret:after {
position: absolute;
vertical-align: middle!important;
right: 10px;
top: 6px;
}
.widget.widget-adsw-currency-selector {
border: none;
background: transparent;
}
.widget.widget-adsw-currency-selector a.currency-carret {
    padding-top: 0em;
    padding-bottom: 0em;
    text-align: center;
    display: block;
    color: #999!important;
float: right;
}
.widget.widget-adsw-currency-selector a.currency-item {
width: 115px;
font-size: 12px;
font-weight: 600!important;
color: #000000;
text-align: left;
background-color: transparent;
border-bottom: 1px solid #ffffff!important;
padding-left: 10%;
padding-right: 0px;
}
.widget.widget_adsw_currency_selector {
    margin-bottom: -1.5em;
}

P.S.: Use Flatsome Child Theme to preserve changes through theme updates
P.S.2: The currency selector is displayed in the menu on mobile

Cheers!
 
Mar

Mar

Moderator
crypcy said:
Thank you very much. Had to tweak it a bit to fit my theme.
Click to expand...
I am not surprised. I have two sites, the same theme, the same set up, everything is almost identical including the location of the currency switcher, but the same codes don't work exactly as the other. You have to adjust.
 
Direct Webstore

Direct Webstore

Well-Known Member
Mar said:
I have two sites, the same theme, the same set up, everything is almost identical including the location of the currency switcher, but the same codes don't work exactly as the other.
Click to expand...
It's like human twins, lol. They're not 100% identical ... :)

But I've noticed the same thing with my sites too.
 
S

smellypopcorn

New Member
Hello,

I'm currently trying to remove the white border surrounding the currency switcher widget. Is there any CSS which can help to do that? I.e. make it transparent. Any help is greatly appreciated! :)

1622703762474.png

This is the current CSS I'm using to achieve the way the currency switcher widget looks now:

.widget.widget-adsw-currency-selector .currency-carret:after {
position: absolute;
vertical-align: middle!important;
right: 5px;
top: 6px;
}
.widget.widget-adsw-currency-selector {
border: none;
background: transparent;
}
.widget.widget-adsw-currency-selector a.currency-carret {
padding-top: 0em;
padding-bottom: 0em;
text-align: center;
display: block;
color: #999!important;
float: right;
}
.widget.widget-adsw-currency-selector a.currency-item {
width: 90px;
font-size: 12px;
font-weight: 600!important;
color: #000000;
text-align: left;
background-color: transparent;
border-bottom: 0px solid #ffffff!important;
padding-left: 10%;
padding-right: 0px;
}
.widget.widget_adsw_currency_selector {
margin-bottom: -1.5em;
}
Click to expand...
 
chris37

chris37

Well-Known Member
smellypopcorn said:
Hello,

I'm currently trying to remove the white border surrounding the currency switcher widget. Is there any CSS which can help to do that? I.e. make it transparent. Any help is greatly appreciated! :)

View attachment 14713

This is the current CSS I'm using to achieve the way the currency switcher widget looks now:
Click to expand...
Change the Collor of white to grey in your already css code,
I also see the border is set up to none.
Try to apply important there.
 
S

smellypopcorn

New Member
Hi Chris,

Thank you for your reply! I'm looking to remove the border completely instead of changing it to another colour. I've applied important coding and tried changing the colour to transparent or rgba(0, 0, 0, 0) but it doesn't work.

I also notice that when I'm on another page the border colour automatically changes to grey. I'm currently using transparent header for my website.

1622961306939.png
 
chris37

chris37

Well-Known Member
smellypopcorn said:
Hi Chris,

Thank you for your reply! I'm looking to remove the border completely instead of changing it to another colour. I've applied important coding and tried changing the colour to transparent or rgba(0, 0, 0, 0) but it doesn't work.

I also notice that when I'm on another page the border colour automatically changes to grey. I'm currently using transparent header for my website.

View attachment 14719
Click to expand...
I can not know what css must be apply without to see the website...
 
ruvi

ruvi

New Member
CSS: 
.adsw-currency-wrap{margin:auto;}

.widget.widget-adsw-currency-selector a.currency-item span  {
font-weight: 500!important;
font-size:14px;
color: #3c3a3a;
}

add this line to adjust fonts colors, inside the currency convertor and to adjust margin auto in mobile mode
 
You must log in or register to reply here.
Top