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:
1 |
<?php if(etheme_get_option('show_related')) woocommerce_output_related_products(); ?> |
We will display promotional products below similar ones., to do this, we will include a new file using the code.
1 |
<?php require_once( trailingslashit( get_template_directory() ). 'woocommerce/single-product/product-in-sale.php' ); ?> |
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:
- 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“.
- 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).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<?php /** * Related Products * * @author WooThemes * @package WooCommerce/Templates * @version 3.0.0 */ if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly global $product, $woocommerce_loop; $posts_per_page = 5; // updated for woocommerce v3.0 $related = array_map( 'absint', array_values( wc_get_related_products( $product->get_id(), $posts_per_page ) ) ); if ( sizeof( $related ) == 0 ) return; echo '<h2 class="products-title"><span>Акция на товар</span></h2>'; $args = apply_filters( 'woocommerce_related_products_args', array( 'post_type' => 'product', 'ignore_sticky_posts' => 1, 'no_found_rows' => 1, 'posts_per_page' => $posts_per_page, 'orderby' => array('meta_value' => 'ASC', 'date' => 'DESC'), //'post__in' => $related, 'post__not_in' => array( $product->id ), 'meta_query' => array( array( 'key' => '_stock_status', 'value' => 'instock', 'compare' => '=', 'key' => '_sale_price', 'value' => 0, 'compare' => '>', 'type' => 'numeric' ) ) ) ); $slider_args = array( //'title' => esc_html__( 'Related Products', 'xstore' ) ); etheme_create_slider( $args, $slider_args ); wp_reset_postdata(); |
All you need to change in your code to display promotional products is the top part of the code, where to specify:
- Correct number of items $posts_per_pag.
- Block header.
- specify sorting.
- 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly global $product, $woocommerce_loop; $posts_per_page = 5; // updated for woocommerce v3.0 $related = array_map( 'absint', array_values( wc_get_related_products( $product->get_id(), $posts_per_page ) ) ); if ( sizeof( $related ) == 0 ) return; echo '<h2 class="products-title"><span>Акция на товар</span></h2>'; $args = apply_filters( 'woocommerce_related_products_args', array( 'post_type' => 'product', 'ignore_sticky_posts' => 1, 'no_found_rows' => 1, 'posts_per_page' => $posts_per_page, 'orderby' => array('meta_value' => 'ASC', 'date' => 'DESC'), //'post__in' => $related, 'post__not_in' => array( $product->id ), 'meta_query' => array( array( 'key' => '_stock_status', 'value' => 'instock', 'compare' => '=', 'key' => '_sale_price', 'value' => 0, 'compare' => '>', 'type' => 'numeric' ) ) ) ); |
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
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.
/*
- Basic web design course;
- Site layout;
- General course on CMS WordPress and continuation of the course on template development;
- Website development in PHP.