Hiding Pricing for a Specific Product

In some storefront setups, you may wish to hide pricing for certain products without affecting the rest of your catalog. For example, you may:

• Offer items where the customer isn't directly billed.
• Use a $0.00 placeholder price to accommodate flexible or variable pricing.
• Prevent confusion when the price you display on the product’s landing page differs from the final calculation (e.g., page count charges for booklets).

In this article, we’ll walk through how to hide prices on specific products using the Custom Product Class and a simple CSS override. We’ll also cover considerations around checkout visibility, examples of real-world usage, and potential pitfalls.

Important Note: While this article provides general guidance on using the Custom Product Class approach, the creation, modification, and troubleshooting of custom CSS are outside the scope of standard Infigo support

1. Why Hide a Product’s Price?

• Separate Billing: You might invoice your client after the order is placed, so you don’t need to show the price at checkout.
• Complex Pricing: If your final price is not determined until after a design is uploaded, you may not want an initial, seemingly “incorrect” price to cause confusion.
• Client Request: Your clients might prefer to hide pricing from their end users (e.g., corporate employees who only need to choose a product without seeing any cost).

2. Hiding Pricing vs. Removing Pricing Site-Wide

Important: There is a global setting to hide prices across the entire storefront. Turning this on hides all prices but may also remove “Start” or “Add to Cart” buttons in some storefront themes. This article focuses on hiding prices only for specific products, preserving normal pricing visibility on the rest of the site.

3. Overview of the “Custom Product Class” & CSS Method

In Infigo, each product has a field called Custom Product Class (located in the Catalog > Products > Display Settings tab).

By adding a custom class name here (e.g., hide-my-price), you can then insert CSS rules into your CSS override file that specifically target only that class to hide pricing elements.

Key Steps:

1. Assign a custom product class to the item(s) you want to hide the price for.
2. Add a CSS rule in the storefront’s CSS file that will hide the pricing elements when that custom class is present.

4. Step-by-Step Instructions

4.1 Add the Custom Product Class to the Product

1. Go to Catalog > Products.
2. Open the product you want to hide the price for.
3. Navigate to the Display Settings tab (the name may vary slightly, but typically “Display Settings” or “Product Info”).
4. Locate the Custom Product Class field.
5. Enter a class name (e.g., hide-my-price).
6. Click Save.

Note: You can reuse the same custom class for multiple products if they all require the same CSS styling. Otherwise, create unique class names if you have multiple scenarios or partial changes.

4.2 Create or Update Your CSS Override

1. Navigate to the CSS Override area.

   • 

2. Download the existing CSS file (if any) so that you can edit it.

3. Open the CSS file in an applicable editor (such as Visual Studio Code).

4. Add a CSS rule similar to the following (match your class name and the ID/class name used for prices):

   /* Example to hide the price on the product details page */ .hide-my-price .product-price { display: none; }
   • The precise selector (e.g., .product-price) can vary.
   • If you want to hide the price in the product detail, the editor, and possibly the checkout line item, you may need multiple selectors.

5. Upload or Save your updated CSS file back into the system.

6. Refresh or clear your storefront cache if necessary.

5. Extending This to the Checkout Experience

Sometimes you also need to hide the price in the cart and checkout. This often requires additional selectors. For example, if your checkout uses .cart-item-price or #cart-pricing-block, you can hide those in the same CSS file using the same custom class approach:

However, if your store uses totals or subtotals that must remain visible for other products, you should confirm whether you want only the line-item price hidden or to remove the subtotals entirely. Hiding subtotals or totals can affect all products, so it may need a more advanced approach or custom development.

6. Common Questions & Considerations

1. Will this affect our admin or back-office data?

   • No. The CSS only hides pricing on the storefront. You will still see correct pricing in the Infigo back office or in order confirmations.

2. What if I later decide to show the price for that product again?

   • Simply remove the custom class from the product’s Display Settings or remove the corresponding CSS rules.

3. What if the user also doesn’t see the “Start” or “Add to Cart” button?

   • This usually happens if you’ve used the global “hide all prices” approach. With the targeted CSS approach, your button should still appear, unless your theme ties the button to the same price element. Adjust your CSS or theme logic if necessary.

4. Could this be done programmatically instead of using CSS?

   • In some scenarios, custom development is possible, but most users find the CSS approach is quick, flexible, and requires no changes to core functionality.

5. Do I need a unique custom class for each product?

   • Not necessarily. If the same hide-pricing behavior applies to multiple products, you can use the same custom class. If you need different designs or partial changes, create unique ones.

7. Summary

Hiding a product’s price on the storefront can be achieved easily with the Custom Product Class and CSS override. This method offers a targeted way to hide individual product pricing without turning off prices for your entire site. Just remember to confirm whether you also need to hide prices during checkout, ensure the “Add to Cart”/“Start” button remains visible, and test thoroughly.

If you have questions about advanced scenarios, such as dynamic pricing or deeper customization, please reach out to Infigo Support or explore more detailed guides in the Infigo Academy.