How to Show Regular and Sale Price WooCommerce

Are you looking for a way to display the regular and sale price on the WooCommerce cart page? Then, read on, as this post aims to provide you with a solution for this problem.

Table of Contents

It is important to note that sale prices are the most used marketing technique in online stores today. When a customer finds out that they are getting a good discount, they will be pushed to the edge of buying the product they wanted to have for a long time. In addition, it makes the decision easier when they see the discounted product coming by.

By default, WooCommerce allows you to add a regular and sale price when adding a product on the product data section. It is worth mentioning that WooCommerce displays regular prices provided there is no sale price available.

If the sale price is available, it is displayed with the regular price crossed out on the shop and single product pages. This is a great way to appeal to customers because you are offering them a discount. All they need to do is click, save, and feel great about getting the deal of a lifetime.

However, you may want to display the regular and sale price on the cart page as well. Alternatively, you may want to display the sale price before the regular price. This is why we created this brief tutorial.

WooCommerce Show Regular and Sale Price

In today’s tutorial, we will show you how to display the regular and sale price on the cart page. We will also show you how you can interchange their position. However, you must have some coding skills to implement this solution.

It is worth mentioning that we will be editing some of WooCommerce’s core files. Before you proceed, we recommend installing or creating a child theme. This will ensure that your changes are not lost during an update.

Let us get right into it.

Steps to Show Regular and Sale Price on WooCommerce Cart Page

Here are the simple steps you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to add the function to show regular and sale prices on the cart page.
Add the following code to the php file:

function njengah_regularsale_price_at_cart( $old_display, $cart_item, $cart_item_key ) {
$product = $cart_item['data'];
if ( $product ) {
return $product->get_price_html();
}
return $old_display;
}
add_filter( 'woocommerce_cart_item_price', 'njengah_regularsale_price_at_cart', 10, 3 );

This is the outcome:
If you want to display the sale price before the regular price, add the following code in the same file:

add_filter( 'woocommerce_format_sale_price', 'njengah_formatted_sale_price', 10, 3 );
function njengah_formatted_sale_price( $price, $regular_price, $sale_price ) {
return '<ins>' . ( is_numeric( $sale_price ) ? wc_price( $sale_price ) : $sale_price ) . '</ins> <del>' . ( is_numeric( $regular_price ) ? wc_price( $regular_price ) : $regular_price ) . '</del>';
}

This is the outcome:

Wrapping Up

In summary, we have shared a code snippet for displaying the regular and sale price on the cart. The second snippet allows you to display the sale price first. This is a great way to entice customers into your store to make more sales.

We hope that this post helped you solve your problem.

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.

How to Show Regular and Sale Price WooCommerce

WooCommerce Show Regular and Sale Price

Steps to Show Regular and Sale Price on WooCommerce Cart Page

Wrapping Up

Similar Articles

Related