JS coding to change text of Shopping cart

Site URL: https://www.primroselaboratories.com/

The default language of my site is Dutch. This is apparently not supported by squarespace so set words as 'read more' on blog page and 'shopping cart' 'continue shopping' 'quantity' etc are all set in English.
I did find CSS on this forum to change word by word but the issue I have is that I work with Weglot to translate my site in 3 other languages. The words changed by CSS are then staying in Dutch and are no longer translated. At Weglot they said, I should use JS coding to adjust all the words and then Weglot can work as usual.
Can anyone help me with this?
Thanks

I think you can target CSS with html tag to do this. Each language has a different html tag. Something like this

html[lang="de"] .quantity {
CSS code to change text on DE site
}

Which text you want to change? Can you list all? We can try for some text. If this way works, we will test code for all words

Hey Tuan,
Thanks for getting back to me and giving me hope 😉
 

Attached is a screenshot where I already change the title of 'SHOPPING CART' tot 'WINKELMAND' and also 'Your shopping cart is empty' to 'Jouw winkelmand is leeg'.

I did this with the following in CSS:

body#cart h2.cart-title {
    visibility: hidden;
}
body#cart h2.cart-title:before {
    content: "WINKELMAND";
    visibility: visible;
}

.empty-message:before {
  content: "Jouw winkelmand is leeg.";
  }

.empty-message>span {
  display: none;
  }

When I choose English language, it keeps on showing the dutch (Nederlands, NL). I'll list all the words I'd need to change but thought to start with this as an example already.
 

Thanks so much!

On 5/21/2021 at 6:26 AM, GertrudTav said:

The default language of my site is Dutch. This is apparently not supported by squarespace…the issue I have is that I work with Weglot to translate my site in 3 other languages.

This may not suit your situation, but the easiest way to build a site in multiple languages with Weglot is to build the base site in one of the languages that Squarespace supports, for example English. Weglot can then translate your site into the other languages, such as Dutch, without requiring any code.

Thanks for your suggestion!
I am already using weglot with the base language Dutch (which is not supported by squarespace ang hence giving me these issues). And I already was thinking to swtich the base language to english if there is no other way around it but it would not be ideal because the company is Belgian with Dutch as main language...

On 5/26/2021 at 1:20 PM, GertrudTav said:

Hey Tuan,
Thanks for getting back to me and giving me hope 😉
 

Attached is a screenshot where I already change the title of 'SHOPPING CART' tot 'WINKELMAND' and also 'Your shopping cart is empty' to 'Jouw winkelmand is leeg'.

I did this with the following in CSS:

body#cart h2.cart-title {
    visibility: hidden;
}
body#cart h2.cart-title:before {
    content: "WINKELMAND";
    visibility: visible;
}

.empty-message:before {
  content: "Jouw winkelmand is leeg.";
  }

.empty-message>span {
  display: none;
  }

 

When I choose English language, it keeps on showing the dutch (Nederlands, NL). I'll list all the words I'd need to change but thought to start with this as an example already.
 

Thanks so much!

Try this

/* change text on nl */
html[lang="nl-BE"] body#cart h2.cart-title {
    visibility: hidden;
}
html[lang="nl-BE"] body#cart h2.cart-title:before {
    content: "WINKELMAND";
    visibility: visible;
}
html[lang="nl-BE"] .empty-message:before {
    content: "Jouw winkelmand is leeg."
}
html[lang="nl-BE"] .empty-message>span {
    display: none;
}

Ah amazing! Works splendidly!

I'll collect all the words I need to change and will post in here.

Thanks so much already 🙂

Hello @tuanphan

I have attached screenshots and circled the words that need to be changed as those you gave css codes above for.
Very grateful for you to help me further with coding!
Thanks
Gertrud

 

Hey @tuanphan

I was wondering whether you find a moment to help me with CSS codes for the other words I provided screenshots for above?

Thank you so much!

On 6/8/2021 at 10:32 AM, GertrudTav said:

Hey @tuanphan

I was wondering whether you find a moment to help me with CSS codes for the other words I provided screenshots for above?

Thank you so much!

 

 

Add to Settings > Advanced > Code Injection > Header

<style>
/* Cart page */
/* Empty message */
html[lang="nl-BE"] .empty-message a span {
    visibility: hidden;
}
html[lang="nl-BE"] .empty-message a span:before {
    content: "new continue shopping";
    visibility: visible;
}
html[lang="nl-BE"] .quantity-label {
    visibility: hidden;
}
html[lang="nl-BE"] .quantity-label:before {
    visibility: visible;
    content: "new quantity:";
    position: absolute;
    left: 50%;
}
html[lang="nl-BE"] .cart-item-list-labels>span:first-child span {
    visibility: hidden;
}
html[lang="nl-BE"] .cart-item-list-labels>span:first-child span:before {
    visibility: visible;
    content: "new item";
}
html[lang="nl-BE"] .cart-item-list-labels>div:nth-child(4) span span {
    visibility: hidden;
}
html[lang="nl-BE"] .cart-item-list-labels>div:nth-child(4) span span:before {
    visibility: visible;
    content: "new qty";
}
html[lang="nl-BE"] .cart-item-list-labels>div:nth-child(5) span span {
    visibility: hidden;
}
html[lang="nl-BE"] .cart-item-list-labels>div:nth-child(5) span span:before {
    visibility: visible;
    content: "new price";
}
html[lang="nl-BE"] span._3qWE9VU-U span {
    visibility: hidden;
}
html[lang="nl-BE"] span._3qWE9VU-U span:after {
    visibility: visible;
    content: "new subtotal";
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('html[lang="nl-BE"] .product-price').html(function() { 
          return $(this).html().replace("from", "new from");  
    });
    $('html[lang="nl-BE"] .checkout-button span').html(function() { 
          return $(this).html().replace("CHECKOUT", "new checkout");  
    });
    $('html[lang="nl-BE"] .blog-more-link').html(function() { 
          return $(this).html().replace("Read More", "new read more");  
    });
});
</script>

Amazing @tuanphan! Thanks!

There is 1 missing in the coding you gave me;

the word 'Select' in the dropdown to choose a variant.

Could you share the code to change that one as well?

Thanks a million!

Hello @tuanphan

Apart from the word 'Select' in the dropdown menu, a few more translations to be done came up while coming closer to launching the shop.
It's the popup that comes up when you click the button 'add to cart' but you haven't selected a variant yet and also all of the words on the checkout page...

Thanks!
 

1 hour ago, GertrudTav said:

Hello @tuanphan

Apart from the word 'Select' in the dropdown menu, a few more translations to be done came up while coming closer to launching the shop.
It's the popup that comes up when you click the button 'add to cart' but you haven't selected a variant yet and also all of the words on the checkout page...

Thanks!
 

Hi. Can't translate checkout page. You can find another aproach

With error popup, I Have no idea. You try contacting @creedon I remember he had a post on how to customize this popup.

Although I've done some work in this area. I don't think my code could be directly used as it was built for a different use case. In those use cases there was a single language translation need and the other everything was dual language.

I'd be willing to see if my code could be adapted for your use case. We could start of with a small task. Such as dealing with the select translation.

@tuanphan if you already have a plan for a solution for the select issue, let me know. I don't want to step on your toes.