Displaying the amount saved for on-sale products

WooCommerce will automatically add a sale badge to any products on-sale. That way, a customer browsing your store will be able to see at a glance which products are on-sale. If you have a store that has sales pretty often or where some products have a big discount and others have a small discount, you might want to give the customer more information. Replacing the sale badge with a badge that shows the discount amount can be really useful in these situations.

Getting ready

Make sure you have a product in your store that's on-sale. This can be set in the Sale Price field in the Product Data panel on the Edit Product screen in the WordPress admin.

How to do it…

There's a plugin that will do all of this for us. There aren't any settings to be configured. Just install and activate the plugin and it's done.

  1. In the WordPress admin, click on the Plugins menu and then on Add New.
  2. Run a search for WooCommerce Smart Sale Badge.
  3. Install and activate the plugin.
  4. Take a look at the frontend of your site and view a product that's on sale.
    How to do it…

Note

If your sale badge doesn't look like mine or you don't see it at all, that's most likely something controlled in your theme. You can reach out to the theme developer for assistance or, if you're familiar with HTML and CSS, you can try styling it yourself.

There's more...

If you want to display percentages instead of an absolute dollar amount, we'll cover that in the next recipe.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset