Replace "Quantity" on product with something else

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

I'm helping a client with setting up products on a site (7.0). The products are services (https://www.dirtroadseeker.com/lets-ride-products/lost-coast) - adventure off-roading and the quantity refers to the number of spots available on the trip. I tried to use the following code (from a reddit forum) to replace quantity with something else and it worked great except that it prevented the add to cart from working. 🙂  I've since removed it, but the code I added was this: 

<script>
var find = "Quantity";
var replaceWith = "# of People";
window.onload = function () {
$("div:contains('" + find + "')").each(function () {
$(this).html($(this).html().replace(find, replaceWith));
});
};
</script>

Any help with this code would be greatly appreciated! 

Thanks!

Debbie

You need to rename "Quantity" text or?

You should be able to accomplish this with CSS only and get a pretty good effect.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>

  .quantity-label {
  
    visibility : hidden;
    
    }
    
  .quantity-label::before {
  
    content : '# of People';
    visibility : visible;
    
    }
    
  </style>

This is for v7.0 using the Bedford template family.

If you need different text as @tuanphan asks, you can change the text as desired. Also this is a change to all products if you need to restrict the effect to certain products you'd need different CSS.

Let us know how it goes.