Display Old Price Struck-Through Next to New Promotional Price
How to show old price with strikethrough in woocommerce;
Display old and new price on woocommerce product page;
Woocommerce show discounted price with strikeout;
Add strikethrough to original price in wordpress;
Woocommerce display sale price next to original price;
Show regular price crossed out on woocommerce;
Woocommerce variable product old price strikethrough;
How to display discount price with old price in woocommerce;
Woocommerce strike through old price and show sale price;
Display old price with line through it in wordpress;
Explanation
To show the old price with a strikethrough next to the new sale price in WooCommerce, this code snippet does the trick:
What It Does:
- Checks if a product is on sale.
- Grabs both the regular (old) price and the sale (new) price.
- Formats the old price with a strikethrough and places it next to the new price.
How It Works:
- The code hooks into WooCommerce's price display system.
- If the product is on sale, it fetches both the regular and sale prices.
- The regular price is wrapped in a
<del>
tag, which adds the strikethrough effect. - The sale price is wrapped in an
<ins>
tag, making it stand out.
Result: On your product pages, customers will see the original price crossed out, right next to the discounted price, making it clear there's a sale.
Code
<?php
// Hook into WooCommerce to modify the way prices are displayed on product pages
add_filter('woocommerce_get_price_html', 'wp_dudecom_display_strikethrough_old_price', 10, 2);
/**
* Display the old price with a strikethrough next to the new sale price.
*
* @param string $price The original price HTML.
* @param WC_Product $product The WooCommerce product object.
* @return string Modified price HTML with strikethrough for old price.
*/
function wp_dudecom_display_strikethrough_old_price($price, $product) {
// Check if the product is on sale
if ($product->is_on_sale()) {
// Get the regular and sale prices
$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()));
// Format the prices
$regular_price_html = wc_price($regular_price);
$sale_price_html = wc_price($sale_price);
// Return the formatted price with strikethrough for the regular price
$price = '<del>' . $regular_price_html . '</del> <ins>' . $sale_price_html . '</ins>';
}
return $price;
}
?>
Instructions
File Location: Add the code to your theme's functions.php
file or a custom plugin file.
Prerequisites:
- Ensure WooCommerce is installed and activated on your WordPress site.
Implementation Steps:
- Log in to your WordPress admin dashboard.
- Navigate to Appearance > Theme Editor.
- In the right-hand sidebar, find and click on
functions.php
to open it. - Scroll to the bottom of the
functions.php
file. - Copy and paste the provided code snippet at the end of the file.
- Click Update File to save your changes.
- Visit a product page on your site to verify that the old price is displayed with a strikethrough next to the new sale price.
If you encounter any issues or need further customization, consider reaching out to wp-dude.com for expert assistance.