WooCommerce how to display new items on the product card

by Nikolaenko Maxim · Published October 15, 2017 · Updated August 6, 2018

There is another task for promoting an online store on WooCommerce that is useful for your customers. Very often I receive orders to display new products inside the product card next to similar products. I think this is a common problem, not only for me., but in standard themes for WooCommerce this is not provided. Therefore, today I decided to slightly open the veil and describe the process of creating a block with new products in the product card..

You may also be interested in my previous article in the WooCommerce tutorial series. “WooCommerce how to display an auction product with a discount in the product card“.

As in the previous lesson, to develop this block, we will take an existing block with the output of similar articles. We will do everything in order.

Finding the template file for the product card, it is usually located in the /wp-content/themes/ folder{your theme name}/woocommerce/content-single-product.php.
At the bottom of it you will find a connection of a file of similar products, it looks like this:

WooCommerce вывод похожих товаров в карточке товара

<?php if(etheme_get_option('show_related')) woocommerce_output_related_products(); ?>

1

<?php if(etheme_get_option('show_related')) woocommerce_output_related_products(); ?>

right below this line we write the connection of a new file in which we will add the code for displaying new products (new products).

Вывод новинок интернет магазина в карточке товаров

<?php require_once( trailingslashit( get_template_directory() ). 'woocommerce/single-product/product-new.php' ); ?>

1

<?php require_once( trailingslashit( get_template_directory() ). 'woocommerce/single-product/product-new.php' ); ?>
Now, when we set the path for connecting the file, you need to create the file. Create a file along the path /wp-content/themes/{your theme name}/woocommerce/single-product/product-new.php
In the created product-new.php file, copy the contents of the related.php file, which is located along the path /wp-content/themes/{your theme name}/woocommerce/single-product/related.php.
Check how products are displayed in the product card. If done right, then you will have 2 block of similar products.
In the product-new.php file, change the name of the block to “Novelties in the online store”.
Next, to display new products, we will need to change the array with parameters for the apply_filters function( ‘woocommerce_related_products_args’, array( … ).
Below I will give an example of how I did it.

<?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 = 8;

// 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 )
) );

$slider_args = array(
	//'title' => esc_html__( 'Related Products', 'xstore' )
);

etheme_create_slider( $args, $slider_args );

wp_reset_postdata();

<?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 = 8;

// 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 )

) );

$slider_args = array(

//'title' => esc_html__( 'Related Products', 'xstore' )

);

etheme_create_slider( $args, $slider_args );

wp_reset_postdata();

The code can be modified and new products can be displayed from the parent category for the product, for this you need to modify the code a little.

$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 ),
	'tax_query'      => array(
                'relation'      => 'OR',
                array(
                    'taxonomy'     => 'product_cat',
                    'field'        => 'id',
                    'terms'        => array($term_cat_id)
                )
            )
) );

$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 ),

'tax_query' => array(

'relation' => 'OR',

array(

'taxonomy' => 'product_cat',

'field' => 'id',

'terms' => array($term_cat_id)

)

) );

If you didn't succeed, write questions in the comments, I will try to answer them.

This auction code has been tested with WooCommerc 3.0, in a smaller or older version, the code may change slightly.

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.