Editing the quantity title

Ask the community
,
1

Question:
WTK how to edit the title field for the Quantity title in the Wix Ecommerce Product Page. There doesn’t appear to be any function via setting/layout. Can any one please advise a solution. Need to change it from “Quantity” to “Boxes”
Thank you in advance.

2

dont think its possible.
You would need to build a custom product page

3

Ive read that the label can be changed via coding. ive isolated the code: QuanQuantitytity
But i cant see where and how to edit it within the wix platform

4

Hey Adam,

Add the following code to your site’s Custom Code - Head:

<style>
[data-hook="number-input-spinner-title"] {
    visibility: hidden;
    position: relative;
}

[data-hook="number-input-spinner-title"]::after {
    content: 'Boxes';
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
}
</style>
  • Set the Name to whatever you want. (For eg. Change Quantity text to Boxes)
  • Under Add Code to Pages, select Choose Specific pages and select the Product Page under Checkouts & Orders.
  • Under Place Code In, choose Head.
  • Finally, switch to the Code Type tab and make sure that it is marked as Essential.
  • Once this is all done, click Apply and the change will immediately take place sitewide on all your product pages.

Here’s how to embed Custom Code on your site:

1 Like
5

Thank you SOOOOOOOO much Pratham, you are a legend and saved me hours of racking my brain.

I’ve input the coding and it works brilliantly.

5 Stars for response, effort and information!!!

1 Like
6

Always a pleasure to help! (:

1 Like
7

Sorry to bug you again but for some reason those lines of coding you gave me dont seem o remain permanent. It work brilliantly the first time but every time i refresh it resets to QUANITY rather than boxes. Did i miss something in the instructions?!?

8

Looks like Wix has changed the data-hook of this particular element.

Turn off the old code and add this new one to the Body - End. This should work even after refreshing the page.

<script>
  const updateLabel = () => {
    const legend = document.querySelector('[data-hook="product-quantity-counter"] legend');
    if (legend) {
      const textNode = Array.from(legend.childNodes).find(
        node => node.nodeType === Node.TEXT_NODE && node.nodeValue.trim() === "Quantity"
      );
      if (textNode) {
        textNode.nodeValue = "Boxes";
      }
    }
  };

  document.addEventListener("DOMContentLoaded", updateLabel);

  const observer = new MutationObserver(() => {
    updateLabel();
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true,
  });
</script>
9

Once again, thank you sooooooo much for your assistance. I’m really surprised that no one else has had this issue with a client before.

1 Like