How to Show Regular Price in WooCommerce: A Beginner’s Guide
WooCommerce makes it easy to display product prices, but sometimes you need to make sure the regular price is *always* visible, even when you’re running a sale. This guide walks you through different ways to achieve this, from simple settings to a bit of custom code, perfect for WooCommerce newbies.
Why Show the Regular Price?
Imagine walking into a store during a “50% off” sale. You’d want to know the *original* price to truly understand the value of the discount, right? The same applies online. Showing the regular price in WooCommerce:
- Increases transparency: Customers see the actual discount they’re getting, building trust.
- Highlights value: A visible regular price emphasizes the savings and makes the sale more appealing.
- Improves user experience: Clear pricing information helps customers make informed purchasing decisions.
- Marketing Boost: Sometimes you just want to show your pricing is competitive, even if you aren’t running a sale!
- Check Your Theme’s WooCommerce Files: Some themes have customized WooCommerce templates that might override the default pricing display. Look for files like `single-product/price.php` within your theme’s `woocommerce` directory. If you find a heavily customized file, consult your theme developer or consider switching to a theme known for its WooCommerce compatibility.
- Plugin Conflicts: A plugin might be interfering with the price display. Try temporarily deactivating plugins one by one to see if one is the culprit. Remember to clear your website’s cache after deactivating each plugin!
Method 1: WooCommerce’s Default Behavior (Sale Price Display)
WooCommerce *usually* displays the regular price alongside the sale price automatically when you set a sale price for a product. Let’s quickly review how to set a sale price:
1. Navigate to Products: In your WordPress dashboard, go to “Products” and select the product you want to edit.
2. Edit Product Pricing: In the “Product data” metabox (usually below the product description), click on the “General” tab.
3. Set Regular and Sale Price: You’ll see fields for “Regular price” and “Sale price.” Enter the original price in the “Regular price” field and the discounted price in the “Sale price” field.
4. Update Product: Click the “Update” button to save your changes.
WooCommerce should then automatically display the regular price with a strikethrough and the sale price in a prominent color.
Example:
Let’s say you’re selling a t-shirt. The regular price is $25, and you’re offering it for $20 on sale. WooCommerce will typically display:
`$25` $20
Method 2: Ensuring Regular Price Visibility (When Needed)
Sometimes, your theme or a plugin might interfere with WooCommerce’s default display. If the regular price isn’t showing when a sale price *is* set, there are a few troubleshooting steps:
Method 3: Using Code Snippets (Custom Display)
If you need more control over *how* the regular price is displayed, you can use code snippets. Use this method cautiously and only if you are comfortable with basic PHP. It’s recommended to use a child theme to add these snippets, so your changes aren’t lost when you update your theme.
#### Showing the Regular Price Even Without a Sale (Important!)
Sometimes, you might want to show the regular price *all the time*, even when the product isn’t on sale. This can be helpful to emphasize the value of a product compared to others.
Here’s a code snippet you can add to your theme’s `functions.php` file (or a code snippets plugin):
add_filter( 'woocommerce_get_price_html', 'always_show_regular_price', 10, 2 );
function always_show_regular_price( $price_html, $product ) {
// Get the regular price
$regular_price = wc_get_price_to_display( $product, array( ‘price’ => $product->get_regular_price() ) );
// If the product is on sale, WooCommerce already handles the regular price display. We don’t want duplicates.
if ( $product->is_on_sale() ) {
return $price_html; // Let WooCommerce handle it in that case
}
// Format the regular price
$regular_price_html = ‘‘ . wc_price( $regular_price ) . ‘‘;
// Add the regular price to the price HTML
$price_html = $regular_price_html . ‘ ‘ . $price_html;
return $price_html;
}
Explanation:
- `add_filter( ‘woocommerce_get_price_html’, … )`: This line tells WordPress to run our function whenever WooCommerce generates the HTML for a product’s price.
- `always_show_regular_price( $price_html, $product )`: This is our custom function.
- `$price_html`: The HTML that WooCommerce would normally generate for the price.
- `$product`: The WooCommerce product object.
- `$regular_price = wc_get_price_to_display(…)`: This line retrieves the regular price in the correct currency format, accounting for WooCommerce settings.
- `if ($product->is_on_sale()) { return $price_html; }`: This crucial check prevents duplicate regular prices. If the product *is* on sale, we simply return the original WooCommerce HTML because it already displays both prices.
- `$regular_price_html = ‘
‘ . wc_price( $regular_price ) . ‘‘;`: This formats the regular price with a `` tag, creating a strikethrough effect. `wc_price()` ensures the price is formatted correctly with currency symbols. - `$price_html = $regular_price_html . ‘ ‘ . $price_html;`: This adds the formatted regular price to the beginning of the existing price HTML, so it appears alongside the sale price (or the regular price, if no sale is active).
Important Considerations When Using Code:
- Backup Your Website: Before making changes to your theme’s files, always back up your website.
- Use a Child Theme: Add the code snippet to your child theme’s `functions.php` file to avoid losing your changes when you update your parent theme.
- Test Thoroughly: After adding the code, test the price display on various products (simple, variable, grouped, etc.) to ensure it works as expected.
Conclusion
Showing the regular price in WooCommerce is a simple but effective way to improve transparency, highlight value, and enhance the user experience. Whether you’re using WooCommerce’s default behavior or a custom code snippet, ensuring the regular price is visible can significantly boost your sales and customer satisfaction. Start with the simplest method and move towards code customizations only if necessary!
