WooCommerce Product Add-ons: Hiding the Regular Price – A Beginner’s Guide
Want to offer personalized products with add-ons in your WooCommerce store, but don’t want to confuse customers by showing the base product price *and* the add-on cost separately? You’re in the right place! This article will guide you through different ways to hide the regular product price when using WooCommerce Product Add-ons, so you can achieve a cleaner, more user-friendly checkout experience.
Why Hide the Regular Price with Add-ons?
Imagine you’re selling custom-designed t-shirts. Your base t-shirt price is $20, but customers can add:
- A custom logo: +$10
- Text embroidery: +$5
- Premium fabric: +$8
- Quick and easy to implement.
- Requires no coding knowledge (beyond knowing where to add CSS).
- Relies on CSS selectors that might change with WooCommerce updates, breaking your code.
- Doesn’t actually remove the price; it only hides it. The price is still there in the HTML source code, which could be read by bots or scripts.
- Won’t work if the theme using a different selector
- `.woocommerce div.product p.price` and `.woocommerce div.product span.price` are CSS selectors that target the price element within the product page.
- `display: none !important;` hides the element. The `!important` ensures that this style overrides any other styles that might be affecting the price display.
- More reliable than CSS because it actually removes the price generation.
- Allows for more granular control.
- Requires basic PHP knowledge.
- Editing `functions.php` directly can be risky if you’re not careful. A code snippets plugin is highly recommended.
If you display both the base price ($20) *and* the add-on prices, it can look cluttered and potentially scare customers away. They might see $20 + $10 + $5 + $8 = a lot of numbers!
Hiding the base price allows you to present a single, comprehensive price based on the selected add-ons. This makes the final cost clearer and less overwhelming. It’s especially useful when the add-ons significantly impact the final price.
Think of it like ordering a pizza. You don’t see a base price for the dough and sauce separately. You choose your toppings, and the price reflects the *entire* pizza with your customized toppings.
Methods to Hide the Regular Price
There are several ways to achieve this, each with its pros and cons. We’ll explore a few common approaches:
1. CSS (Simple, but Potentially Problematic):
This is the easiest method, but it’s also the least robust. It simply hides the element using CSS.
Pros:
Cons:
How to do it:
Add the following CSS to your theme’s `style.css` file or through the WordPress Customizer (Appearance > Customize > Additional CSS):
.woocommerce div.product p.price,
.woocommerce div.product span.price {
display: none !important;
}
Explanation:
Important Note: As mentioned, this is the least reliable method. Use with caution and be prepared to update the CSS if WooCommerce or your theme is updated.
2. Using Code Snippets (More Reliable, Requires Basic PHP):
This method involves adding PHP code snippets to your theme’s `functions.php` file or using a code snippets plugin (recommended). This is the most reliable approach if you have PHP knowledge.
Pros:
Cons:
Example Code (Using a Code Snippets Plugin):
function hide_regular_price_based_on_addons() {
global $product;
// Check if the product has add-ons (adjust this logic if needed)
if ( function_exists( ‘WC_Product_Addons’ ) && WC_Product_Addons::get_product_addons( $product->get_id() ) ) {
remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 10 );
remove_action( ‘woocommerce_before_shop_loop_item_title’, ‘woocommerce_template_loop_price’, 10 );
}
}
add_action( ‘woocommerce_before_single_product’, ‘hide_regular_price_based_on_addons’ );
//Code to remove price in archives
function remove_loop_price() {
if ( function_exists( ‘WC_Product_Addons’ ) && WC_Product_Addons::get_product_addons( get_the_ID() ) ) {
remove_action( ‘woocommerce_after_shop_loop_item_title’, ‘woocommerce_template_loop_price’, 10 );
}
}
add_action( ‘woocommerce_before_shop_loop_item’, ‘remove_loop_price’);
Explanation:
- `hide_regular_price_based_on_addons()` is a custom function.
- `global $product;` makes the current product object available.
- `function_exists( ‘WC_Product_Addons’ ) && WC_Product_Addons::get_product_addons( $product->get_id() )` checks if the WooCommerce Product Add-ons plugin is active and if the current product *actually has* add-ons configured. This is crucial. You only want to hide the price if add-ons are present! If you don’t have this check the function will execute always and you won’t see prices in any products.
- `remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 10 );` removes the default WooCommerce action that displays the price on the single product page. `10` is the priority.
- `remove_action( ‘woocommerce_before_shop_loop_item_title’, ‘woocommerce_template_loop_price’, 10 );` removes the default WooCommerce action that displays the price on the product listing pages (shop page, category pages, etc.).
- `add_action( ‘woocommerce_before_single_product’, ‘hide_regular_price_based_on_addons’ );` hooks the custom function to run *before* the single product page is rendered. This ensures the price is removed *before* it’s displayed.
- `add_action( ‘woocommerce_before_shop_loop_item’, ‘remove_loop_price’);` hooks the custom function to run *before* each product on the loop page is rendered.
Installing a Code Snippets Plugin:
A code snippets plugin like “Code Snippets” allows you to add and manage PHP snippets without directly editing your `functions.php` file. This is safer and easier to manage. Simply search for “Code Snippets” in the WordPress plugin directory and install it.
Important Notes:
- Back Up Your Website: Before making any changes to your `functions.php` file or installing new plugins, always back up your website!
- Test Thoroughly: After implementing any of these methods, thoroughly test your WooCommerce store to ensure everything is working as expected. Check single product pages, category pages, and the shopping cart.
- Adapt the Code: The code provided above might need adjustments depending on your specific theme and WooCommerce setup. If you are using a different WooCommerce add-on plugin, the conditional statement (`function_exists( ‘WC_Product_Addons’ ) && WC_Product_Addons::get_product_addons( $product->get_id() )`) will need to be changed to detect when add-ons are present. Consult the WooCommerce documentation and your add-on plugin’s documentation for guidance.
- Consider Add-on Plugin Settings: Some WooCommerce Product Add-ons plugins might have built-in options to hide or control the display of the base product price. Check your plugin’s settings before resorting to custom code.
3. Using a Plugin (Easiest for Non-Coders, Potentially Bloated):
There are WooCommerce plugins specifically designed to manage product add-ons and control price display. These plugins often offer options to hide the regular price and calculate the final price based on selected add-ons.
Pros:
- Easiest to use for non-coders.
- Often comes with a user-friendly interface.
Cons:
- Can be expensive.
- Adding too many plugins can slow down your website. Choose wisely!
Examples of Plugins: (Do your research and read reviews before choosing!)
- WooCommerce Product Add-ons (Official Extension)
- Extra Product Options (Product Addons) for WooCommerce
How to Use a Plugin:
1. Install and activate the plugin.
2. Navigate to the plugin’s settings page in your WordPress admin.
3. Look for options related to price display and add-on pricing. There should be a checkbox to “Hide Regular Price” or similar options.
4. Save your changes.
Which Method is Right for You?
- If you are comfortable with CSS and just need a quick and dirty fix: Try the CSS method, but be aware of its limitations.
- If you have some PHP knowledge and want a more reliable solution: Use the code snippets method. Remember to use a code snippets plugin.
- If you’re a non-coder and prefer a user-friendly interface: Consider using a dedicated WooCommerce Product Add-ons plugin that offers price hiding options. Be mindful of plugin bloat.
No matter which method you choose, remember to test thoroughly and back up your website before making any changes. Good luck creating beautiful and user-friendly product pages!
