How to Show Sale Price with Crossout in WooCommerce: A Beginner’s Guide
So, you’re running a sale in your WooCommerce store and want to make it obvious to your customers? Excellent! One of the most effective ways to do this is by displaying the original price with a crossout next to the discounted sale price. It’s a simple visual cue that instantly communicates value and encourages purchases. Think of it like seeing “Was $50, Now $30!” – your brain immediately registers the saving.
This guide will walk you through how to achieve this classic sale price display, even if you’re new to WooCommerce or coding. We’ll cover the basics and some more advanced customization options.
Why Use the Crossout Sale Price Display?
Before we dive in, let’s quickly understand why this method is so effective:
- Visual Impact: A crossout price immediately catches the eye. It’s a powerful way to highlight the discount.
- Clear Comparison: Customers can instantly see the original price and the sale price, making it easy to understand the savings.
- Psychological Effect: Showing the original price crossed out creates a sense of urgency and encourages immediate action. Think of seeing a limited-time offer – you’re more likely to buy it!
- Increased Conversion Rate: By making the sale clear and appealing, you can increase the likelihood of customers adding products to their cart.
- Theme Compatibility: Some themes might override the default WooCommerce display.
- Plugin Conflicts: Another plugin could be interfering with the price display.
- Caching Issues: Clear your browser and website cache to ensure you’re seeing the latest version of your site.
- Incorrect Sale Dates: Make sure the sale dates (if you’ve set them in the product data) are valid.
Method 1: WooCommerce’s Built-in Feature (Usually Enabled by Default)
The good news is that WooCommerce typically handles this display automatically! If you set a sale price for a product within WooCommerce, the default theme configuration *should* already display the crossed-out regular price next to the sale price.
Here’s how to check and set a sale price:
1. Go to your WordPress Dashboard.
2. Navigate to Products -> All Products.
3. Edit the product you want to put on sale.
4. In the ‘Product data’ meta box (usually below the product description), select the ‘General’ tab.
5. Enter the original price in the ‘Regular price’ field.
6. Enter the discounted price in the ‘Sale price’ field.
7. Click ‘Update’ to save your changes.
Example:
Imagine you’re selling a t-shirt. The regular price is $25, but you want to offer it at $20 for a limited time. You’d enter $25 in the “Regular price” field and $20 in the “Sale price” field.
Expected Output:
Your product page should now display the price as something like: `$25.00` `$20.00`
Troubleshooting:
If you’ve set a sale price but aren’t seeing the crossout effect, here are some common causes:
If you are having issues even after troubleshooting, it’s time to look into customizations.
Method 2: Customizing the Price Display with Code (For Theme Compatibility or Specific Needs)
If your theme isn’t displaying the crossed-out price correctly or you want to customize the appearance, you’ll need to use a bit of code. Don’t worry; we’ll keep it simple!
Important: Before making any code changes, it’s strongly recommended to use a child theme. This will prevent your changes from being overwritten when you update your main theme.
Here’s how to customize the price display:
1. Access your child theme’s `functions.php` file. You can Check out this post: How To Add A Link To A Woocommerce Email do this via FTP or through the WordPress theme editor (Appearance -> Theme File Editor). *Be very careful when editing files this way. Make a backup before you start.*
2. Add the following code snippet to the `functions.php` file:
<?php /**
function my_custom_price_format( $price, Check out this post: How To Autoprocess Orders On Woocommerce $product ) {
if ( $product->is_on_sale() ) {
$regular_price = wc_get_price_to_display( $product, array( ‘price’ => $product->get_regular_price() ) );
$sale_price = wc_get_price_to_display( $product, array( ‘price’ => $product->get_sale_price() ) );
$price = ‘‘ . wc_price( $regular_price ) . ‘ ‘ . wc_price( $sale_price ) . ‘‘;
}
return $price;
}
?>
Explanation:
- `add_filter( ‘woocommerce_get_price_html’, ‘my_custom_price_format’, 100, 2 );`: This line hooks into WooCommerce’s price display function, allowing us to modify it.
- `my_custom_price_format( $price, $product )`: This is our custom function that will handle the price formatting.
- `if ( $product->is_on_sale() )`: This checks if the product is currently on sale.
- `$regular_price = …`: This gets the regular price of the product.
- `$sale_price = …`: This gets the sale price of the product.
- `$price = ‘
‘ . wc_price( $regular_price ) . ‘‘ . wc_price( $sale_price ) . ‘‘;`: This is the key part! It formats the price using HTML: - `
`: This HTML tag creates the crossed-out effect. - ``: This HTML tag is used to emphasize the new price.
- `wc_price()`: This WooCommerce function formats the price according to your store’s settings (currency symbol, decimal separator, etc.).
3. Save the `functions.php` file.
Result:
This code snippet will ensure that your sale prices are displayed with the original price crossed out, followed by the sale price.
Customization:
You can easily modify the HTML within the `$price` variable to customize the appearance further. For example, you could add CSS classes to the `` and `` tags for styling:
$price = '' . wc_price( $regular_price ) . '' . wc_price( $sale_price ) . '';
Then, you can style the `.old-price` and `.sale-price` classes in your theme’s CSS file (typically `style.css` in your child theme).
Method 3: Using Plugins
If you’re not comfortable editing code, several plugins can help you customize your WooCommerce sale price display. Here are a couple of options:
* YITH WooCommerce Badge Management: This plugin allows you to create custom badges (like “Sale!”) and display them on products, drawing even more attention to your discounts.
* WooCommerce Sale Flash: While not solely focused on crossout pricing, this plugin often offers customization options for sale badges and price display.
Important Note on Plugin Choice: When choosing a plugin, always consider its reviews, compatibility with your WooCommerce version, and whether it’s actively maintained.
Conclusion
Showing the sale price with a crossout in WooCommerce is a proven way to boost sales by clearly communicating the value proposition to your customers. By understanding the different methods available, you can choose the one that best fits your needs and technical comfort level. Whether you use WooCommerce’s built-in functionality, customize the price display with code, or leverage a plugin, make sure your customers can easily see the savings! Happy selling!
