The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 02-15-2013, 05:20 PM
alessandro can's Avatar
alessandro can is offline
Junior Member
 
Join Date: Apr 2012
Posts: 2
Default

custom button translation


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?
  #2  
Old 02-28-2013, 10:22 AM
Liza P's Avatar
Liza P Liza P is offline
Ecwid Team
 
Join Date: Jan 2013
Posts: 2,517
Default

Quote:
Originally Posted by alessandro canè View Post
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?
__________________
Liza P.
Customer Care
Ecwid Help Portal
  #3  
Old 02-28-2013, 10:44 AM
Paolo Lapi's Avatar
Paolo Lapi Paolo Lapi is offline
Junior Member
 
Join Date: Jun 2012
Posts: 1
Default

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!
  #4  
Old 03-04-2013, 12:19 PM
Liza P's Avatar
Liza P Liza P is offline
Ecwid Team
 
Join Date: Jan 2013
Posts: 2,517
Default

Quote:
Originally Posted by Paolo Lapi View Post
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:

Code:
/* 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.
__________________
Liza P.
Customer Care
Ecwid Help Portal

Last edited by Wendy; 07-28-2015 at 12:11 PM. Reason: Updated the CSS to work with current version of Ecwid.
  #5  
Old 07-31-2013, 06:40 PM
Group Qube's Avatar
Group Qube Group Qube is offline
Junior Member
 
Join Date: Apr 2013
Posts: 2
Default

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.

Last edited by Group Qube; 07-31-2013 at 07:01 PM. Reason: Update.
  #6  
Old 08-02-2013, 02:47 PM
Liza P's Avatar
Liza P Liza P is offline
Ecwid Team
 
Join Date: Jan 2013
Posts: 2,517
Default

Quote:
Originally Posted by Group Qube View Post
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:

Code:
/* 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.
__________________
Liza P.
Customer Care
Ecwid Help Portal

Last edited by Wendy; 07-28-2015 at 12:12 PM. Reason: Updated the CSS to work with current version of Ecwid
  #7  
Old 08-02-2013, 05:01 PM
MaZone Admin's Avatar
MaZone Admin MaZone Admin is offline
 
Join Date: Oct 2012
Posts: 4
Default

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.
  #8  
Old 08-05-2013, 05:01 PM
Liza P's Avatar
Liza P Liza P is offline
Ecwid Team
 
Join Date: Jan 2013
Posts: 2,517
Default

Quote:
Originally Posted by MaZone Admin View Post
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.
__________________
Liza P.
Customer Care
Ecwid Help Portal
  #9  
Old 07-24-2015, 05:29 AM
undefined1036's Avatar
undefined1036 undefined1036 is offline
Junior Member
 
Join Date: Jul 2015
Posts: 3
Default

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:

Code:
/* 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:

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 :(
  #10  
Old 07-28-2015, 12:07 PM
Wendy's Avatar
Wendy Wendy is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,123
Default

Quote:
Originally Posted by undefined1036 View Post
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:

Code:
/* 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!
__________________
Wendy
Ecwid Customer Care Team
Help Center


⬇ Please click Thanks if my reply helped you.
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
buttons translation

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:57 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.