How to display the percentage of a discount on product list in Magento 2

Hi everybody, I am Cuong, Welcome back to my Magento 2 tutorial video series.

In the previous lessons, I showed everybody:

How to create a child theme in Magento 2 in the video link

How to change the font family in Magento 2 in the video link

How to add font awesome to a child theme in Magento 2 in the video link

If you don't watch these lessons yet, you should watch them now.

To continue the previous lessons, Today, I am going to show everybody the best practice, How to display the percentage of a discount on the product list in Magento 2.

This is the result after we complete this practice.

By default, Magento provides us a feature, that allows setting the special price for each product in the backend. You can use this feature by going to the Catalog → Products → Edit → Advanced Pricing → Special Price

When you set the special price for a product successful, on the storefront will show both the final price and regular price. However, Magento doesn't show the percentage of a discount for that product. So in this practice, we will show the percentage of a discount for each product on the product grid.

Okie, let's go.

Let's complete this practice you need to follow steps by step:

Step 1: Determine the templates to overriding
- Enabling the Template Path Hints for Storefront: Go to the Stores → Settings → Configuration → Advanced → Developer → Debug
Set the Enabled Template Path Hints for Storefront to "Yes"
- If you don't see the "Developer" section there, you need to set the magento mode to "developer" by running the command line:
php bin/magento deploy:mode:set developer

Magento 2 uses two templates difference to display the product price for both default product and configurable product. So we need to override these templates in the child theme named giaphufashion.

Step 2: Override the templates phtml
- Copy the file named final_price.phtml in the path vendor\magento\module-configurable-product\view\base\templates\product\price to the path app\design\frontend\PHPCuong\giaphufashion\Magento_ConfigurableProduct\templates\product\price

- Copy the file named final_price.phtml in the path vendor\magento\module-catalog\view\base\templates\product\price to the path app\design\frontend\PHPCuong\giaphufashion\Magento_Catalog\templates\product\price

Step 3: Add the customization CSS

- Copy the file named styles-m.less in the path vendor\magento\theme-frontend-blank\web\css to the path app\design\frontend\PHPCuong\giaphufashion\web\css

- Create the new file named _customization.less in the path app\design\frontend\PHPCuong\giaphufashion\web\css\source
@import 'customization/_discount_percent.less';

- Create the new file named _discount_percent.less in the path app\design\frontend\PHPCuong\giaphufashion\web\css\source\customization

Step 4: Test and see the results
1. Run the following command lines:
rm -rf var/view_preprocessed/*
rm -rf pub/static/frontend/phpcuong/giaphufashion/*
php bin/magento setup:static-content:deploy --theme phpcuong/giaphufashion -f

There are other themes, but we only changed on the phpcuong/giaphufashion, so we only deploy the static content for this theme, so it is fast.

2. Go to the backend, then set the special price to some products

3. Go to the storefront.

Yeah, it works perfectly.

Thank you for watching guide. If you have any questions about this practice please feel free to leave a comment below.

Don't forget to like, comment, share and subscribe to my channel for getting the latest videos.

Please do not hesitate to contact me if you need me to join your Magento project. My rate is $25/hour in Magento 1 and $30/hour in Magento 2.

You can get the source codes of this tutorial on the Github

magento,magento 2,magento trainning,magento 2 tutorial,percentage of a discount,discount percentage,How to display the percentage of a discount on product list in Magento 2,ecommerce,tutorial,magento videos,magento 2 vlogs,magento 2 training videos,display percentage discount,special price in magento 2,regular price in magento 2,product price in magento 2,