How To Show Retail Price With Strikethrough In Cart Woocommerce

Show Retail Price with Strikethrough in WooCommerce Cart: Boost Sales with Visual Savings

Want to make your WooCommerce store even more irresistible? One simple, yet powerful tactic is to display the retail price with a strikethrough next to your discounted selling price in the cart. This instantly shows customers how much they’re saving, influencing their purchase decision and potentially increasing conversions.

Imagine you’re browsing an online clothing store and see a shirt you like. You click on it, and it’s priced at $30. That’s cool, but then you see a smaller, struck-through price of $45 next to it. Suddenly, the shirt feels like a *steal!* You’re saving $15! This visual cue creates a sense of urgency and value that encourages you to complete the purchase.

This article will walk you through how to implement this strategy in your WooCommerce store, even if you’re a complete beginner. We’ll cover different methods to achieve this, making it easy to follow along.

Why Show Strikethrough Prices?

Before diving into the “how,” let’s reinforce the “why”:

Highlights Savings: It’s the most direct way to showcase the discount amount. Customers instantly see the value they’re getting.
Increases Perceived Value: A higher original price makes the current selling price seem even more attractive.
Creates a Sense of Urgency: Seeing a limited-time offer or a significant discount can push hesitant buyers to complete their purchase. “I better get it before the price goes up!”
Boosts Conversion Rates: All of the above lead to a more compelling offer, ultimately encouraging more sales.

Method 1: WooCommerce Default Functionality (Sale Price)

The easiest way to display a strikethrough price is by leveraging WooCommerce’s built-in “Sale Price” functionality.

1. Edit Your Product: Navigate to the product you want to offer at a discount.

2. Set the “Sale Price”: In the “Product data” meta box (usually below the product description), find the “General” tab.

3. Enter the Regular Price and Sale Price: Enter the original price in the “Regular price” field and the discounted price in the “Sale price” field.

WooCommerce will automatically handle the strikethrough effect on the product page, and it *should* also carry over to the cart and checkout page.

Important Considerations for Sale Price:

Theme Compatibility: While most themes are designed to display sale prices with a strikethrough, some may require custom CSS or theme modifications. If you don’t see the strikethrough, check your theme options first.
Cart and Checkout Display: The “Sale Price” should be reflected in the cart. Test this! Add the product to your cart and see if the discounted price and strikethrough are visible.
Variable Products: For variable products (products with different sizes or colors, for example), you can set sale prices for each variation individually.

Method 2: Using a Code Snippet (For More Control)

If you want more control over the strikethrough price display, or if your theme doesn’t fully support the default WooCommerce functionality, you can use a code snippet. This method involves adding a small piece of PHP code to your theme’s `functions.php` file or using a plugin like “Code Snippets.” Caution: Always back up your website before modifying theme files!

Here’s an example code snippet:

/**
Show retail price with strikethrough in cart.
*/
add_filter( 'woocommerce_cart_item_price', 'ts_show_retail_price_in_cart', 10, 3 );
function ts_show_retail_price_in_cart( $price, $cart_item, $cart_item_key ) {
$_product   = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
$regular_price = $_product->get_regular_price();
$sale_price    = $_product->get_sale_price();

if ( ! empty( $sale_price ) && $sale_price < $regular_price ) {

$price = ‘~~‘ . wc_price( $regular_price ) . ‘~~ ‘ . wc_price( $sale_price ) . ‘‘;

}

return $price;

}

Explanation:

`add_filter( ‘woocommerce_cart_item_price’, … )`: This line tells WordPress to modify the default way the price is displayed in the cart.
`ts_show_retail_price_in_cart( … )`: This is the name of our function that will do the modifying.
`$_product = apply_filters( … )`: This gets the product object associated with the cart item.
`$regular_price = $_product->get_regular_price();`: Gets the regular price of the product.
`$sale_price = $_product->get_sale_price();`: Gets the sale price of the product.
`if ( ! empty( $sale_price ) && $sale_price < $regular_price )`: Checks if a sale price exists and is less than the regular price. This ensures we only show the strikethrough if there's an actual discount.
`$price = ‘~~‘ . wc_price( $regular_price ) . ‘~~ ‘ . wc_price( $sale_price ) . ‘‘;`: This is the core of the function.
`~~`: HTML tag for “deleted text,” which creates the strikethrough.~~
`wc_price()`: WooCommerce function to format the price with the correct currency symbol and decimal places.
``: HTML tag for “inserted text.” We use this to display the sale price.
`return $price;`: Returns the modified price string to be displayed in the cart.

How to Use the Code Snippet:

1. Access Your Theme’s `functions.php` File: Connect to your website via FTP (File Transfer Protocol) or use your hosting provider’s file manager. Navigate to your theme’s folder (e.g., `wp-content/themes/your-theme-name`) and find the `functions.php` file.

2. Edit the `functions.php` File: Open the `functions.php` file in a text editor.

3. Add the Code: Paste the code snippet above at the *end* of the file, before the closing `?>` tag (if it exists).

4. Save the File: Save the `functions.php` file.

5. Alternatively, Use the “Code Snippets” Plugin: Install and activate the “Code Snippets” plugin. Create a new snippet, paste the code into the snippet content, and activate the snippet. This is generally a safer and more organized approach than directly editing `functions.php`.

Customization:

Styling: You can use CSS to further customize the appearance of the strikethrough price and the sale price. For example, you might want to change the color, font size, or font weight. You can add CSS to your theme’s `style.css` file or use the WordPress Customizer.

Method 3: Using a Plugin (Easiest for Non-Coders)

If you’re not comfortable editing code, the easiest option is to use a WooCommerce plugin. There are several plugins available that can handle displaying strikethrough prices and other promotional features. Search the WordPress plugin repository for terms like “woocommerce discount,” “woocommerce promotion,” or “woocommerce sale price.”

Example Plugins:

YITH WooCommerce Badge Management: While primarily for badges, it often includes options for customizing sale price displays.
WooCommerce Dynamic Pricing: This plugin provides advanced pricing rules and can be configured to show strikethrough prices.

Advantages of Using a Plugin:

Ease of Use: Plugins typically have user-friendly interfaces that make it easy to configure settings without writing code.
Feature-Rich: Many plugins offer additional features, such as product badges, countdown timers, and dynamic pricing rules, that can further enhance your promotional efforts.
Updates and Support: Plugin developers generally provide regular updates and support, ensuring that the plugin remains compatible with the latest versions of WooCommerce and WordPress.

Testing and Troubleshooting

After implementing any of these methods, it’s crucial to thoroughly test your store to ensure that the strikethrough prices are displayed correctly in the cart and on product pages.

Clear Your Cache: Clear your browser cache and any caching plugins you’re using to ensure you’re seeing the latest version of your website.
Test Different Products: Test products with and without sale prices to make sure the strikethrough is only displayed when a discount is active.
Check on Different Devices: View your website on different devices (desktop, mobile, tablet) to ensure the strikethrough prices are displayed correctly on all screen sizes.

If you encounter any issues, carefully review the instructions and code snippets. If you’re still stuck, consult the WooCommerce documentation or seek help from a WooCommerce developer or support forum.

Conclusion

Displaying retail prices with a strikethrough in your WooCommerce cart is a simple yet effective way to highlight savings, increase perceived value, and boost conversion rates. By following the methods outlined in this article, you can easily implement this strategy in your store, regardless of your technical skills. Choose the method that best suits your needs and comfort level, and remember to test thoroughly to ensure everything is working as expected. Happy selling!