To hide the main product price and default Shopify quantity selector, particularly useful when employing the Dimension option type, this guide offers 2 straightforward approaches:
A. Edit your theme #
a. Hide Main Product Price and Quantity Selector for All of your Products #
Begin by accessing your theme editor: Navigate to Sales channels > Online Store > Themes, then click the “Customize” button on your current theme.
Next, select the Product template you’re applying to your products:
Navigate to the “Price” section, then click the eye icon to hide the main product price.
Similarly, hide the quantity selector by clicking the eye icon in the “Quantity selector” section.
Finally, click Save to complete. Return to your storefront’s product page to review the changes.
b. Hide Main Product Price and Quantity Selector for Specific Products Only #
1/ Create new Product Templates for the products requiring hidden prices and quantity selectors #
If you’re utilizing a single Product template for all products but need to hide the main product price and quantity selector for specific items, follow these steps:
- Firstly, create a new Product Template: Go to Products > Create template.
- Name your new template, for example, “Hide Price and Qty Selector”, then click “Create template”.
- In this new template, navigate to the “Price” and “Quantity selector” sections and hide them as explained in the previous guide.
- Save after creating and editing your new Product Template.
2/ Assign the New Product Template for Specific Products #
- Navigate to your Products listing page.
- Select the products requiring the new template. In the product editing page, scroll down to the “Theme template” section, and choose the new Product template with hidden prices and quantity selectors.
- Save the changes.
- Repeat for other applicable products.
Notes: This method is suitable when applying the new Product template to a limited number of products. Assigning the template to numerous products individually may be time-consuming. For extensive application across products utilizing Easify’s option set, consider the 2nd approach (B).
B. Use the App’s Custom HTML Option Type #
This method eliminates the need to edit your theme.
On the option set of the products requiring hidden prices and quantity selectors, add the “HTML” option type and insert the provided custom code.
1/ Hide main product price only #
<style>
/* Hide price */
.price.price--large {
display: none !important;
}
</style>2/ Hide default quantity selector only #
<style>
/* Hide quantity selector */
.product-form__input.product-form__quantity {
display: none !important;
}
</style>3/ Hide both price and quantity selector #
<style>
/* Hide price */
.price.price--large {
display: none !important;
}
/* Hide quantity selector */
.product-form__input.product-form__quantity {
display: none !important;
}
</style>Save the option set to complete. Consequently, the custom code within the HTML option type will hide the price and quantity selector on products where this option set is applied.
Notes: While the provided custom code typically works seamlessly with most Shopify themes, there might be instances where it doesn’t align perfectly with your specific theme’s structure. In such cases, don’t hesitate to reach out to us. Our experienced developers will gladly provide an alternative code tailored to ensure compatibility with your theme.
Need Assistance? #
Encountering any challenges while implementing these changes? Don’t hesitate to reach out to us for assistance through our convenient in-app live chat, by submitting your request via our contact form, or by sending an email to support@tigren.com. We’re here to help!
