Change hardcored text on store and cart page

Site URL: https://ateljeesalo.com/kauppa

Hi!

I would like to change couple of things on my website. I know that you can't translate checkout page, but I would like to translate couple other items. Please note that my page is currently under development.

1) I already found how to translate quantity and how to change Add to shopping cart button, but can you change add to shopping cart button so that it is automatically translated?

2) I would like to translate "SALE" text.

3) I would like to translate that "AVAILABLE” text next to the prices.

3) I managed to change couple of texts on shopping cart, but I would like to still change (or hide) the header SHOPPING CART, change subtotal and Checkout. Also is it possible to change the text that is shown when you click the shopping cart while it is empty.

Thank you! Help is very much appriciated!

3 minutes ago, paul2009 said:

If it helps, there are some third party services like Weglot that can translate everything automatically (if you use their DNS option). 🙂

Yes I found those, but I'm not willing to pay for those services because I only need couple of words to be translated and I do not need multilanguage site otherwise. Thanks still!

@JoonasJoonas Add to Design > Custom CSS

/* Translate Cart Page */
/* Shopping Cart Title */
.cart-title {
    visibility: hidden;
}

.cart-title:before {
    visibility: visible;
    content: "New Shopping Cart";
    text-transform: capitalize;
}
/* Item */
.cart-item-list-labels>span:first-child span {
    visibility: hidden;
}
.cart-item-list-labels>span:first-child span {
    content: "New Item";
    visibility: visible;
}
/* Quantity */
.cart-item-list-labels>div:nth-child(4) span span {
    visibility: hidden;
    font-size: 0;
}
.cart-item-list-labels>div:nth-child(4) span span:before {
    visibility: visible;
    content: "New quantity";
    font-size: 12px;
}
/* price */
.cart-item-list-labels>div:nth-child(5) span span {
    visibility: hidden;
}
.cart-item-list-labels>div:nth-child(5) span span:after {
    visibility: visible;
    content: "new price";
}
/* Subtotal */
._2nJjmtuOe span span {
    visibility: hidden;
}
._2nJjmtuOe span span:after {
    visibility: visible;
    content: "New Subtotal:";
}
/* checkout */
.checkout-button span {
    visibility: hidden;
    font-size: 0;
}
.checkout-button span:before {
    visibility: visible;
    content: "Checkout";
    font-size: 14px;
}

/* translate empty message */
/* cart page-empty message */
.empty-message>span {
    visibility: hidden;
    font-size: 0;
}
.empty-message>span {
    visibility: visible;
    content: "Squarespace help 1,000,000+ website owners to increase sales, engage visitors, collect leads and more";
    font-size: 18px;
}
/* continue shopping */
[data-test="continue-shopping-link"] span {
    visibility: hidden;
}
[data-test="continue-shopping-link"] span:before {
    visibility: visible;
    content: "new shopping link";
}

Hi @tuanphanand thank you very much. This was really helpfull!

Sorry to bother you even more but do you have answers to my second and third questions?

On 1/16/2022 at 5:31 AM, JoonasJoonas said:

Hi @tuanphanand thank you very much. This was really helpfull!

Sorry to bother you even more but do you have answers to my second and third questions?

use this 

/* sale */
.product-mark.sale {
    visibility: hidden;
    font-size: 0;
}
.product-mark.sale:before {
    visibility: visible;
    content: "new sale";
    font-size: 12px;
}

With available, add this to last line in Code Injection > Footer

<script>
$(document).ready(function(){
    $(".product-scarcity").html(function() { 
          return $(this).html().replace("available", "new avai");  
    });
});
</script>

Hi @tuanphan

Thank you!

For some reason the AVAILABLE script does not work with my site. I'm using Squarespace 7.1.

I put the code to Settings - advanced - code injection and to footer.

Can you help me? I was also wondering can you change the "from" next to the prices someway?

Also, the cart page does not seem to change ITEM and SUBTOTAL with your code even though everything else changes.

It looks like you figured it out?

With item, subtotal, try this (Design > Custom CSS)

.cart-item-list-labels>span.DdVb8_w2u:first-child span {
    visibility: hidden;
}
.cart-item-list-labels>span.DdVb8_w2u:first-child span:before {
    visibility: visible;
    content: "new item";
}
span._WVtnf5LN span {
    visibility: hidden;
}
span._WVtnf5LN span:before {
    visibility: visible;
    content: "new subtotal";
}

On 1/19/2022 at 3:24 PM, tuanphan said:

It looks like you figured it out?

With item, subtotal, try this (Design > Custom CSS)

.cart-item-list-labels>span.DdVb8_w2u:first-child span {
    visibility: hidden;
}
.cart-item-list-labels>span.DdVb8_w2u:first-child span:before {
    visibility: visible;
    content: "new item";
}
span._WVtnf5LN span {
    visibility: hidden;
}
span._WVtnf5LN span:before {
    visibility: visible;
    content: "new subtotal";
}

 

Thank you!

Everything else is now in order, except I still need to replace the FROM text. Do you @tuanphan have a solution to that?

And thank you!

On 1/26/2022 at 5:20 PM, JoonasJoonas said:

Thank you!

 

Everything else is now in order, except I still need to replace the FROM text. Do you @tuanphan have a solution to that?

 

And thank you!

Can you share link to a product where we can see from text?

On 1/27/2022 at 12:32 PM, tuanphan said:

Can you share link to a product where we can see from text?

There you go @tuanphan

https://salonmattojaryijy.com/kauppa/p/lahjakortti

On 1/31/2022 at 10:42 PM, JoonasJoonas said:

There you go @tuanphan

 

https://salonmattojaryijy.com/kauppa/p/lahjakortti

Try adding to Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$(".product-price").html(function() { 
          return $(this).html().replace("from", "new from");  
    });
	});
</script>

9 hours ago, tuanphan said:

Try adding to Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$(".product-price").html(function() { 
          return $(this).html().replace("from", "new from");  
    });
	});
</script>

 

Thank you for everything. Now I got everything workin!