How to hide product input boxes on Squarespace 7.1

IIf you're using Squarespace 7.1 and want to simplify your product pages by hiding certain product input boxes—such as quantity selectors, variant dropdowns, or subscription fields—this tutorial will show you how to do it using custom CSS.

This approach is useful when you're offering products that only come in one configuration, or when you want to clean up the layout for aesthetic or functional reasons.

Table of Contents

• Why Hide Product Input Boxes

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Hide Product Input Boxes?

• You only offer one version or variant of a product

• You want to streamline the checkout experience

• You want to reduce visual clutter on your product page

• You use custom order forms or buttons instead

Complexity: Easy

---

Step-by-Step Instructions

Step 1

From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the appropriate 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.

[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;
}
}

---

Key Takeaways

• Custom CSS gives you control over which product elements display on your site.

• You can hide only what’s necessary and leave everything else untouched.

• This method is fully reversible—just remove the CSS when you want the inputs back.

FAQs

Will hiding input fields affect the checkout process?
As long as the product doesn’t require those fields (like variants or quantity), hiding them is safe. Otherwise, Squarespace may still expect input behind the scenes.

Can I hide inputs for only specific products?
Yes. You can use the product page ID or URL slug as a class to target specific products.

What if I only want to hide inputs on mobile?
Use media queries: @media only screen and (max-width: 640px) { .product-quantity-input { display: none !important; } }

---

---

Conclusion

Customizing your Squarespace product pages is easy with a few lines of CSS. Whether you're refining your store layout or preparing a more simplified purchasing experience, hiding product input fields can help you present your products more cleanly.

---

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, expressed 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.