How to change "Quantity" text on product page

Hi there,

I would like to change the text "Quantity" on a product page to read "# of Couple's". Does anyone know how I would begin to do this using custom code?

Yes. You can change it with CSS or jQuery.

 Can you share link to product page in screenshot?

On 1/18/2020 at 6:51 AM, tuanphan said:

Yes. You can change it with CSS or jQuery.

 Can you share link to product page in screenshot?

https://www.alpinegolfmichigan.com/couples-scramble-registration/couples-scramble-may-1-2020

Here is the URL!

7 hours ago, paul2009 said:

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

 

Perfect, thank you so much! That worked perfectly!

@paul2009

Hey Paul, 

I used this code and it works as soon as I inject it. However, after a few minutes it reverts back to "quantity" regardless of the code. 

Do you have any thoughts on how I can solve this issue?

Thank you 🙂 

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. 

The first character needs to be a . ( period ), just like the .quantity-label that appears later.

Hello, I am following-up this subject to know if it's possible to change the 'quantity' text on a specific product page only? Thank you!

Jacky

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.

Thank you!

Another similar question! How would you modify the "quantity" text only for a specific page? I have three different storefront pages (each with multiple products) and I'd like to change just one of the three. Suggestions welcomed!

https://www.laurenservati.com/textiles/thistle-barley

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.

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.

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.

Ok thanks Creedon! Here is the URL: https://dandelion-mandolin-fyb7.squarespace.com/shop-tours/p/surf-lesson

password: retanamolina

I would like this product only (without changing the other products in the store) to say "/lesson" after the price and "# of Lessons" for the quantity box.

I appreciate your help!

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.

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!

3 hours ago, Dagoddez said:

I noticed that it didn't change it on the main store page. Is there a way to change it here as well?

I have updated my code.

Let us know how it goes.

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.

All set! Thanks Creedon!