How to hide product input boxes on Squarespace 7.1

In this tutorial will show you how to hide the product input boxes on Squarespace 7.1 navigation. if you have not upgraded to version 7.1 yet then we suggest you do.

Complexity: Easy

---

Step 1

Copy the code below.

// CSS Hide Product Input Boxes
.ProductItem .ProductItem-details .variant-option, .ProductItem .ProductItem-details .product-quantity-input, .ProductItem .ProductItem-details .product-quantity-input input {
    display:none;
}

---

Step 2

Go to Design > Custom CSS and paste the code

---

Step 3

The above code when placed in Design > Custom CSS applies site wide. If you wish to apply the code to a single product, you will need to identify the section id.

A useful tool you can use to identify the #collection-id, #block-id and section[data-section-id="xxxxxx"] is a Chrome Extension called Squarespace ID Finder (https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff)

[data-section-id="6055b328552222411afff759"] {

// CSS Hide Product Input Boxes
.ProductItem .ProductItem-details .variant-option, .ProductItem .ProductItem-details .product-quantity-input, .ProductItem .ProductItem-details .product-quantity-input input {
    display:none;
}
}

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ?“AS IS”. Other than as provided this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, you can book our consultation services.