WooCommerce how to display a promotional product with a discount in the product card

Initially, in WooCommerce, the product page has similar products, but many clients contact me with a request to withdraw promotional goods. Since the topic is quite popular, I decided to write a small guide about it for those who are already developing online stores on WooCommerce.

This is how similar products are displayed on the store that I corrected “Bed linen sets“. And today I will make a conclusion of promotional goods for him in a separate block, but the same kind.

Your store theme most likely has a folder WooCommerce which contains the file content-single-product.php and it has a connection of similar products. It happens to me thanks to the line of code:

We will display promotional products below similar ones., to do this, we will include a new file using the code.

Put the created file in your template folder -> woocommerce -> single-product -> product-in-sale.php. To make the file look nice, I took as its basis a file from my theme located at Template Folder -> woocommerce -> single-product -> related.php. You probably have this file too., if not, then maybe 2 the reasons:

  1. You have a child theme and you need to take this file from the parent theme. You can read more about the organization of child themes in my article. “Child themes in WordPress“.
  2. Your theme uses this file from the WooCommerce plugin and you can find this file in the plugin itself.

You need to search for the file in exactly the same order as I indicated above..

If the file is found, then copy the data from the related.php file to the product-in-sale.php file we created. Next we will change this code.

Opening the file, the product-in-sale.php we created and correct the code according to the logic, which I have used. Below I will list when my file and write down which part of the code is responsible for the correct selection of the code. (Attention everything except the sampling function may differ).

All you need to change in your code to display promotional products is the top part of the code, where to specify:

  1. Correct number of items $posts_per_pag.
  2. Block header.
  3. specify sorting.
  4. Add parameters to the array for filtering by custom fields _stock_statu and _sale_price.

I won't go into too much detail., I leave you to figure it out on your own.. If you don't understand, I'm waiting for questions in the comments.

This code for displaying promotional products has been tested with the WooCommerc version 3.0, in a smaller version may change slightly.

This is how the promotional product is displayed on my online store

WooCommerce как вывести аукционный товар со скидкой в карточке товара

In the next lessons I will tell you how to display new items in the product, follow my articles and wait as soon as I have free time.


Buy WordPress hosting
WordPress tutor
Online tutoring services. List of courses I teach
  • Basic web design course;
  • Site layout;
  • General course on CMS WordPress and continuation of the course on template development;
  • Website development in PHP.
Read more on the page WordPress tutor
*/

Nikolaenko Maxim

Director of web studies ProGrafika. I am developing, website design and promotion. Always glad to new blog readers and good clients.


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Templates for WordPress
The best hosting in Ukraine
Stable hosting for Drupal