How to Remove the Regular Price in WooCommerce: A Comprehensive Guide
WooCommerce, the leading e-commerce platform for WordPress, offers a wealth of flexibility in managing your online store. One common customization request is removing the display of the regular price, especially when all your products are on sale, or when you simply want to highlight the sale price more prominently. This article provides a comprehensive guide on how to remove the regular price in WooCommerce, covering different methods to achieve this, along with their advantages and potential drawbacks. Whether you prefer code snippets, plugins, or theme customizations, we’ve got you covered.
Why Remove the Regular Price?
Often, store owners choose to remove the regular price for several reasons:
- Emphasize Sales: When products are consistently offered at a discounted price, displaying only the sale price can be a more effective sales strategy.
- Clean Product Pages: Reducing visual clutter can improve the user experience and direct attention to the price you want customers to focus on.
- Simplified Pricing: In scenarios like membership discounts, removing the regular price provides a simpler, more straightforward pricing presentation.
- Avoid Confusion: If prices fluctuate frequently, showing only the current price prevents potential customer confusion.
- Easy to implement.
- No coding knowledge required beyond copying and pasting.
- The regular price is still present in the HTML source code, which may not be ideal for SEO or accessibility purposes.
- This is a very basic Discover insights on How To Turn Off Publisize For Woocommerce Products solution, and might need some more adjustments based on the theme you are using.
Methods to Remove the Regular Price in WooCommerce
Several methods can be used to remove the regular price, each with its own set of pros and cons. Let’s explore some of the most popular techniques:
1. Using CSS
This is the simplest method but might not be the most robust. It simply hides the regular price visually, but the HTML element still exists on the page.
How it Works: We’ll add custom CSS to your theme or using the WordPress customizer to hide the element responsible for displaying the regular price.
Steps:
1. Go to Appearance -> Customize -> Additional CSS in your WordPress admin panel.
2. Add the following CSS code:
.woocommerce div.product p.price del {
display: none !important;
}
* `.woocommerce div.product p.price del` targets the `del` element (which usually represents the regular price) within the product price.
* `display: none !important;` hides the element with high priority.
3. Click Publish to save your changes.
Pros:
Cons:
2. Using a Code Snippet (functions.php or a Code Snippet Plugin)
A more programmatic approach involves using code snippets to directly modify how WooCommerce displays prices. This method is more effective and efficient.
How it Works: We use WordPress hooks to filter the displayed price, removing the regular price component.
Steps:
1. Backup your theme’s functions.php file before making changes.
2. You can either add the following code to your theme’s `functions.php` file (located in `/wp-content/themes/[your-theme-name]/`) or use a code snippet plugin like “Code Snippets”. Using a plugin is generally safer as it isolates the code from your theme and makes it easier to manage.
add_filter( 'woocommerce_get_price_html', 'remove_regular_price', 10, 2 );
function remove_regular_price( $price_html, $product ) {
if ( $product->is_on_sale() ) {
$price_html = ‘‘ . wc_price( $product->get_sale_price() ) . ‘‘;
}
return $price_html;
}
* `add_filter( ‘woocommerce_get_price_html’, ‘remove_regular_price’, 10, 2 )` adds a filter to the WooCommerce function that generates the price HTML.
* `remove_regular_price( $price_html, $product )` is the function that will be executed when the filter is applied.
* `if ( $product->is_on_sale() )` checks if the product is on sale.
* `$price_html = ‘‘ . wc_price( $product->get_sale_price() ) . ‘‘;` replaces the entire price HTML with only the sale price, wrapped in a ``.
* `return $price_html;` returns the modified price HTML.
3. Save the `functions.php` file or activate the code snippet in your plugin.
Pros:
- Removes the regular price from the HTML source code.
- More SEO-friendly than CSS.
- Offers more control over the Check out this post: How To Backup All My Woocommerce Products price display.
Cons:
- Requires some basic PHP knowledge.
- Incorrect code can break your website. Back up your `functions.php` file!
3. Using a WooCommerce Plugin
Several plugins are specifically designed to manage WooCommerce pricing and promotions, allowing you to easily remove the regular price without any coding.
How it Works: These plugins typically provide options within the WooCommerce settings to customize the price display.
Examples:
- YITH WooCommerce Dynamic Pricing and Discounts: Allows you to set up various discounts and promotions, and often includes options to hide the regular price when a discount is active.
- WooCommerce Simple Auctions: This plugin usually has options related to the price display in auctions, allowing you to customize which price is shown.
- Search the WooCommerce plugin directory using keywords like “woocommerce price customization” or “woocommerce hide regular price.”
Steps:
1. Install and activate your chosen plugin from the WordPress plugin directory.
2. Navigate to the plugin’s settings page (usually found under WooCommerce settings).
3. Look for options related to price display or regular price removal.
4. Configure the settings according to your needs and save the changes.
Pros:
- User-friendly interface.
- No coding required.
- Often includes additional features for managing pricing and promotions.
Cons:
- Requires installing an additional plugin.
- Can sometimes be overkill if you only need to remove the regular price.
- Some plugins may have paid versions for advanced features.
Conclusion
Removing the regular price in WooCommerce Learn more about How To Get Older Versions Of Woocommerce can be a simple yet effective way to enhance your store’s presentation and encourage sales. We’ve explored three primary methods: using CSS for a quick visual fix, employing code snippets for a more robust solution, and utilizing dedicated plugins for a user-friendly approach. Consider the pros and cons of each method based on your technical skill level and the specific requirements of your online store. Always back up your website before making any significant changes, especially when editing code or installing new plugins. By carefully selecting the right method, you can create a cleaner, more focused pricing display that drives conversions and improves the overall shopping experience for your customers.
