[alessandro can]

due to the fact my storefront button images have a custom look in my default language (done via changing image path with css), how can I change buttons looks for other languages too?

[Liza P]

Originally Posted by alessandro canè

due to the fact my storefront button images have a custom look in my default language (done via changing image path with css), how can I change buttons looks for other languages too?

Hello,

Please, clarify a few points for us:

What is the URL of the page, you want to apply changes to?
Which buttons do you need to be translated?
To what languages do you what to translate them?
Could you provide us with correct translations for our engineer to make the necessary changes?

[Paolo Lapi]

Hello,

1. address of the shop is http://www.teresatonelli.it/negozio-online

2. all of the buttons have been traslated via css "background-image" tag, as described here: http://kb.ecwid.com/w/page/22978888/...rchangebuttons

3. adding english translation (just italian has been done, at the moment) should be enough

4. needed translations are:
add_to_bag-trans.png > add to cart
checkout-trans.png > checkout
continue_shopping-trans.png > continue shopping
place_order-trans.png > place order



Thank you very much!

[Liza P]

Originally Posted by Paolo Lapi

Hello,

1. address of the shop is http://www.teresatonelli.it/negozio-online

2. all of the buttons have been traslated via css "background-image" tag, as described here: http://kb.ecwid.com/w/page/22978888/...rchangebuttons

3. adding english translation (just italian has been done, at the moment) should be enough

4. needed translations are:
add_to_bag-trans.png > add to cart
checkout-trans.png > checkout
continue_shopping-trans.png > continue shopping
place_order-trans.png > place order



Thank you very much!

Hello,

Thank you for the details.
Ecwid is available in a variety of languages, which means that you don’t have translate your storefront into English, it’s already been translated. After you enable/disable the desired languages on the “System Settings > General > Languages” of your control panel, the language of the store interface will be changed automatically depending on the setting of your customer’s browser. Please, refer to the “Translation” article for details.

Concerning the custom Italian translation of the “Add to bag” button, I suggest you doing the following. You should change the CSS code you inserted into Ecwid CSS theme, so that this custom button would be seen only when the storefront is in Italian, so that you could use the built-in translations without any complications. This is the code you should use:

/* button "aggiungi al carrello" (pag. dettaglio prodotto) */
body.ecwid-lang-it div.ecwid-AddToBagButton-up,
body.ecwid-lang-it div.ecwid-AddToBagButton-up-hovering,
body.ecwid-lang-it div.ecwid-AddToBagButton-ie6-up,
body.ecwid-lang-it div.ecwid-AddToBagButton-ie6-up-hovering {
background: transparent url(http://www.teresatonelli.it/wp-content/themes/teresatonelli/images/add_to_bag-trans.png) no-repeat top center !important;
}
body.ecwid-lang-it div.ecwid-AddToBagButton-down,
body.ecwid-lang-it div.ecwid-AddToBagButton-down-hovering,
body.ecwid-lang-it div.ecwid-AddToBagButton-ie6-down,
body.ecwid-lang-it div.ecwid-AddToBagButton-ie6-down-hovering {
background: transparent url(http://www.teresatonelli.it/wp-content/themes/teresatonelli/images/add_to_bag-trans.png) no-repeat bottom center !important;
}

It is the same code, you used to activate your custom button with a small update. The highlighted part is what has been added to your code, this addition makes your custom “Add to Bag” button appear on the Italian storefront only. So if you need to adjust the rest of your custom buttons to storefront in the Italian language, all you need to do is add this part of the code to the existing codes in your Ecwid CSS theme.

[Group Qube]

I have a similar issue to this but this code (modified for french and for the "checkout" buttong) did not resolve it. If I inspect the element using chrome I don't see the "html#ecwid_html body.ecwid-lang-it" css element so it loads my english custom button and not my french one.

I currently call my french language storefront via the "&lang=LOCALE_CODE" code in my store script. Does this make a difference.

Thanks

UPDATE: The css code displayed above seems incorrect. I used "html#ecwid_html body#ecwid_body-lang-fr" instead and if I call it manually using chrome element inspection it loads my custom image. So my issue is why is my french page displaying the ecwid_body element instead of the ecwid_body-lang-fr element.

[Liza P]

Originally Posted by Group Qube

I have a similar issue to this but this code (modified for french and for the "checkout" buttong) did not resolve it. If I inspect the element using chrome I don't see the "html#ecwid_html body.ecwid-lang-it" css element so it loads my english custom button and not my french one.

I currently call my french language storefront via the "&lang=LOCALE_CODE" code in my store script. Does this make a difference.

Thanks

UPDATE: The css code displayed above seems incorrect. I used "html#ecwid_html body#ecwid_body-lang-fr" instead and if I call it manually using chrome element inspection it loads my custom image. So my issue is why is my french page displaying the ecwid_body element instead of the ecwid_body-lang-fr element.

Hello,

I’ve checked your store. The code you use to display the “Checkout” button in the French storefront contains errors. Here is the corrected code you should use:

/* The "Payer" button in up state */
body.ecwid-lang-fr div.ecwid-productBrowser-cart-checkoutButton-up, 
body.ecwid-lang-fr div.ecwid-productBrowser-cart-checkoutButton-up-hovering { background: transparent url(http://groupqube.com/wp-content/uploads/2013/07/payer_fr.png) no-repeat top center !important; }  
/* The "Payer" button in down state */ 
body.ecwid-lang-fr div.ecwid-productBrowser-cart-checkoutButton-down, 
body.ecwid-lang-fr div.ecwid-productBrowser-cart-checkoutButton-down-hovering { background: transparent url(http://groupqube.com/wp-content/uploads/2013/07/payer_fr.png) no-repeat bottom center !important; }

If you need to adjust the other custom buttons to storefront in French, just add the highlighted part of the code to the codes of your custom buttons in your Ecwid CSS theme.

[MaZone Admin]

Thanks i updated the code and it still does not display the french image. On my french page if i inspect the button element i still get

"html#ecwid_html body#ecwid_body div.ecwid-productBrowser-cart-checkoutButton-up, html#ecwid_html body#ecwid_body div.ecwid-productBrowser-cart-checkoutButton-up-hovering"

and not the lang-fr version ... could this be because i call my sencond language using the custom javascript.

[Liza P]

Originally Posted by MaZone Admin

Thanks i updated the code and it still does not display the french image. On my french page if i inspect the button element i still get

"html#ecwid_html body#ecwid_body div.ecwid-productBrowser-cart-checkoutButton-up, html#ecwid_html body#ecwid_body div.ecwid-productBrowser-cart-checkoutButton-up-hovering"

and not the lang-fr version ... could this be because i call my sencond language using the custom javascript.

Hello,

I've checked your store and I couldn't find the code you are talking about in either of your CSS themes.
Please, post here the URL of the page, you want to apply changes to and the code you are using, so that I could check it.

Thank you.

[undefined1036]

Hi there,

same problem here....

I followed the instructions in the help guide and Liza's posts, but the page still catch only english buttons.

I need to have two different languages' buttons (italian, english). Here what I did.

First I tried to customized css with the lines:

/* button "aggiungi al carrello" ITA */

div.ecwid-AddToBagButton-up:lang(it),
div.ecwid-AddToBagButton-up-hovering:lang(it),
div.ecwid-AddToBagButton-ie6-up:lang(it),
div.ecwid-AddToBagButton-ie6-up-hovering:lang(it) {
background: transparent url(icon address) no-repeat top center !important;
}

div.ecwid-AddToBagButton-down:lang(it),
div.ecwid-AddToBagButton-down-hovering:lang(it),
div.ecwid-AddToBagButton-ie6-down:lang(it),
div.ecwid-AddToBagButton-ie6-down-hovering:lang(it) {
background: transparent url(icon address) no-repeat bottom center !important;
}

It doesn't works. The store always get the default ecwid buttons (right for the browser language). So this code is invisible...


If I put in CSS this code:

/* button "add to cart" EN */

div.ecwid-AddToBagButton-up:lang(en),
div.ecwid-AddToBagButton-up-hovering:lang(en),
div.ecwid-AddToBagButton-ie6-up:lang(en),
div.ecwid-AddToBagButton-ie6-up-hovering:lang(en) {
background: transparent url(icon address) no-repeat top center !important;
}

div.ecwid-AddToBagButton-down:lang(en),
div.ecwid-AddToBagButton-down-hovering:lang(en),
div.ecwid-AddToBagButton-ie6-down:lang(en),
div.ecwid-AddToBagButton-ie6-down-hovering:lang(en) {
background: transparent url(icon address) no-repeat bottom center !important;
}

So with the extension lang(en) the code works... an a half! I mean the page show the custom icons, but in every language not only in english browsers!!

If I put both the above custom css lang:(it) and lang:(en) the page always show only the custom english buttons version.


Some help please :(

[Wendy]

Originally Posted by undefined1036

Hi there,

same problem here....

I followed the instructions in the help guide and Liza's posts, but the page still catch only english buttons.

I need to have two different languages' buttons (italian, english). Here what I did.

Hello,

I am so sorry to learn that you faced this issue.

I updated the CSS code, allowing you to translate custom "Add to bag" buttons. Please, try out to apply the new code in your Ecwid control panel > Settings > Design page:

/* button "aggiungi al carrello" ITA */ 

body.ecwid-lang-it div.ecwid-AddToBagButton-up,
body.ecwid-lang-it div.ecwid-AddToBagButton-up-hovering,
body.ecwid-lang-it div.ecwid-AddToBagButton-ie6-up,
body.ecwid-lang-it div.ecwid-AddToBagButton-ie6-up-hovering {
background: transparent url(https://9f3915999ece6c260f03de654b33c0fd77029b57.googledrive.com/host/0B4UUlEiHTkQqfnFvSFNZd3NWZWhLWXB2MUNXOTZZYmZtMTVybEloM09iX1J6U0tjSmRJc0E/grazie.png) no-repeat top center !important;
}
body.ecwid-lang-it div.ecwid-AddToBagButton-down,
body.ecwid-lang-it div.ecwid-AddToBagButton-down-hovering,
body.ecwid-lang-it div.ecwid-AddToBagButton-ie6-down,
body.ecwid-lang-it div.ecwid-AddToBagButton-ie6-down-hovering {
background: transparent url(https://9f3915999ece6c260f03de654b33c0fd77029b57.googledrive.com/host/0B4UUlEiHTkQqfnFvSFNZd3NWZWhLWXB2MUNXOTZZYmZtMTVybEloM09iX1J6U0tjSmRJc0E/grazie.png) no-repeat bottom center !important;
} 

/* button "add to cart" EN */

body.ecwid-lang-en div.ecwid-AddToBagButton-up,
body.ecwid-lang-en div.ecwid-AddToBagButton-up-hovering,
body.ecwid-lang-en div.ecwid-AddToBagButton-ie6-up,
body.ecwid-lang-en div.ecwid-AddToBagButton-ie6-up-hovering {
background: transparent url(https://googledrive.com/host/0B4UUlEiHTkQqfnFvSFNZd3NWZWhLWXB2MUNXOTZZYmZtMTVybEloM09iX1J6U0tjSmRJc0E/addtocart.png) no-repeat top center !important;
}

body.ecwid-lang-en div.ecwid-AddToBagButton-down,
body.ecwid-lang-en div.ecwid-AddToBagButton-down-hovering,
body.ecwid-lang-en div.ecwid-AddToBagButton-ie6-down,
body.ecwid-lang-en div.ecwid-AddToBagButton-ie6-down-hovering {
background: transparent url(https://googledrive.com/host/0B4UUlEiHTkQqfnFvSFNZd3NWZWhLWXB2MUNXOTZZYmZtMTVybEloM09iX1J6U0tjSmRJc0E/thanks.png) no-repeat bottom center !important;
}

I will edit the original post as well.

Please, feel free to write me back if you have other concerns. Have a wonderful day!