Back To Blog

How to Display and Customize WooCommerce On Sale Products

How to Display and Customize WooCommerce On Sale Products

The method you use to display your WooCommerce products has the potential to enhance conversions and sales. For example, using the WooCommerce On Sale product feature might be advantageous if you want to promote things and market them at reduced pricing. This element shows a grid of discounted items with customized metadata.

This article will demonstrate how to add the WooCommerce On Sale option to products.

Benefits of Using WooCommerce On Sale Products Feature

Most business owners need to consider the optimal presentations to discount their products. Don’t make the same mistake! There are several reasons why you should take necessary actions to showcase and emphasize your WooCommerce sale items:

  • Sale items bring the customer’s attention to the most excellent method to save money, increasing the likelihood that they will purchase from you.
  • You can also raise your average order value by emphasizing goods presently on sale or discounts.
  • And suppose you’re looking to clear out old inventory. In that case, selling On Sale goods individually will also help you clear out old stock more rapidly and free up warehouse space.

Now that we know the benefits of using WooCommerce on sale products let’s discuss how to show them.

How to Show WooCommerce On Sale Products 

If you want to show On Sale products with massive customization options, ProductX, a plugin to create WooCommerce stores, can help you. With help of ProductX’s newest WooCommerce Builder, things became easier.

So, let’s learn how to show WooCommerce On Sale products with ProductX.

Step 1: Install ProductX

First, install and activate ProductX. Here’s a step-by-step guide to doing so:

Install ProductX
Install ProductX
  • Open the Plugins menu in the WordPress Dashboard.
  • Now install the plugin by clicking the “Add New” option.
  • Type “ProductX” into the search bar and then hit the “Install” button.
  • Click the “Activate” button after you’ve installed the ProductX plugin.

Step 2: Turn on the Builder

After installing ProductX, you need to activate the Builder. To turn it on, you need to:

Turn on WooCommerce Builder Addon
Turn on WooCommerce Builder Addon
  • Go to ProductX from the WordPress dashboard.
  • Select the Addons Tab
  • Enable the Builder via the toggle option.

Step 3: Create Home Page Template

After turning on the Builder, you must create the home page. To do that:

Home Page Template
Home Page Template
  • Go to ProductX from the WordPress dashboard.
  • Go to WooCommerce Builder.
  • Select the ‘add home page.’
  • Select Start from Scratch or the Import Premade template.
  • And after arranging your home page, Click Publish.

And you’re done with creating a WooCommerce Home Page Template.

Step 4: Select On Sale Products

You can create on sale products from the default WooCommerce settings. However, you won’t get any customization options whatsoever. Anyway, to do that:

On Sale Products
On Sale Products
  • Go to Products from your WordPress dashboard and Edit the product you want to sell.
  • Go to the General section of the Product Data. You can see a Sale Price field. Enter the discounted price amount in it.
  • Click Schedule. Then Enter the Start Date and End Date.

And you’re done.

Step 5: Display On Sale Products

After adding Product blocks to your home page, you’ll see various settings on the right panel.

From the settings, turn on the Sales option via the toggle bar. And you can display the “on-sale” option on products. 

Let’s discuss customization now. ProductX gives you complete control over the “On sale” option.

On Sale Settings
On Sale Settings

You’ll have the following customization option:

  • Text (Change the on sale texts to anything you want)
  • Sale Position (Show the on sale tag on the top left/right or bottom left/right position)
  • Sales Design (Show texts, Only % or Both)
  • Sales Style (select between classic or ribbon style)
  • Color (Change text color)
  • Background Color (Change background color)
  • Typography (Edit all types of typography regarding on sale)
  • Border Radius (customize top, bottom, left, and right border radius)
  • Padding (customize top, bottom, left, and right padding)

You can also display various types of featured products using ProductX.


If you have products in your WooCommerce store that you want to sell, you must ensure that they are visible to customers.

This article shows that the WooCommerce On Sale product option is the ideal approach to draw shoppers’ attention to discounted products. ProductX allows you to customize the WooCommerce on sale product option and pick which information to show.

You can check out WordPress video tutorials on our YouTube Channel. Also, find us on Facebook and Twitter for regular updates!

Like this article? Spread the word

Written byRuhul

Ruhul is a technical and SEO-driven content writer, a tech enthusiast, and a pro gamer. He loves exploring new things and has written over 1,500 articles on diverse topics.

Leave a Reply