Jump to content

How to change "Quantity" text on product page

Go to solution Solved by paul2009,

Recommended Posts

  • 2 weeks later...
  • Solution

@alpinegolf You'll find that @tuanphan has already provided the answer in this post: 

 

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • 7 months later...
8 hours ago, codefordummies said:

after a few minutes it reverts back to "quantity" regardless of the code. 

It’s difficult to say without seeing it. Please provide a working link to the page, and the steps you followed That caused it to revert. 

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • 2 years later...
  • 3 months later...
16 hours ago, surf2023 said:

to know if it's possible to change the 'quantity' text on a specific product page only?

Yes. Two ways to go. Proceed the code you are using with the item id for the page.

#item-63b4cce09c26cf7dc0a682ce .quantity-label blah blah blah...

Or you could add a tag to a product such as custom quantity and then your CSS would start like...

.tag-custom-quantity .quantity-label blah blah blah...

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 month later...
1 hour ago, LSTex said:

How would you modify the "quantity" text only for a specific page?

I mentioned the technique in my previous post. You just need to get your product detail page item id. Check out Heather Tovey's most excellent looking Squarespace ID Finder.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 7 months later...

Hi Creedon,

I tried the code you suggested above to change the quantity label on a single page, and it worked, but it changed it on every page. I put it in custom css. Not sure if I'm doing something wrong?

#item-664cce06a637841f6af29026.quantity-label{ visibility: hidden; } .quantity-label:before { visibility: visible; content:
"# of Lessons"; display: block; }  

I also have this in the custom css for all the other pages. Not sure if the two code snippets are messing with each other.

.quantity-label { visibility: hidden; } .quantity-label:before { visibility: visible; content:
"# of People:"; display: block; font-size:1rem 
}

I want the quantity label to be "# of People" on all pages except one, where I want it to be "# of Lessons".

Thanks for your help.

Link to comment
23 hours ago, Dagoddez said:

I want the quantity label to be "# of People" on all pages except one, where I want it to be "# of Lessons".

Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us.

A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

You may find How to post a forum question post useful.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
Posted (edited)
On 5/26/2024 at 1:17 PM, Dagoddez said:

I want the quantity label to be "# of People" on all pages except one, where I want it to be "# of Lessons".

Remove any previous attempts at this effect, make a copy somewhere.

// surf lessons per person, uses LESS syntax

.products.collection-content-wrapper .grid-item[ data-item-id="664cce06a637841f6af29026" ] .product-price::after {

  content : '/ lesson' !important;
  
  }

#item-664cce06a637841f6af29026 {

  .product-price::after {
  
    content : "/ person";
    font-size : .9rem;
    
    }
    
  .quantity-label {
  
    visibility : hidden;
    
    &::before {
  
      content : '# of People:';
      display : unset;
      font-size : 1rem;
      visibility : visible;
      
      }
      
    }
    
  }

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

Edited by creedon
version 2

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Thanks Creedon! That worked amazing on the individual product page. I noticed that it didn't change it on the main store page. Is there a way to change it here as well? I want only the surf lessons price to say "/lesson". Thanks again!

Screenshot 2024-06-03 at 9.53.56 AM.png

Link to comment

Just a note folks. These changes made with CSS are literally skin deep. It will not change what the backend stores, the cart, or the checkout page. Also note the checkout page can not be altered with code.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.