Jump to content

Change hardcored text on store and cart page

Recommended Posts

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!

Edited by JoonasJoonas
Link to comment
  • Replies 11
  • Views 673
  • Created
  • Last Reply

Top Posters In This Topic

 

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!

Link to comment

@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";
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.

Link to comment

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";
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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!

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 1/31/2022 at 10:42 PM, JoonasJoonas 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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.