WooCommerce як вивести акційний товар зі знижкою у картці товару

за Ніколаєнко Максим · Опубліковано Жовтень 14, 2017 · Оновлено Серпень 6, 2018

Спочатку у WooCommerce на сторінці товару є схожі товари, але багато клієнтів до мене звертаються з проханням вивести акційні товари. Так як тема досить популярна я вирішив про неї написати невеликий посібник для тих хто вже розробляє інтернет магазини на WooCommerce.

Ось так виводяться схожі товари на магазині, який підправляв Я “Постільний комплект“. І сьогодні я для нього зроблю виведення акційних товарів в окремому блоці., але такого ж виду.

У вашій темі для магазину, швидше за все, знаходиться папка WooCommerce в якій лежить файл content-single-product.php і в ньому є підключення схожих товарів. У мене це відбувається завдяки рядку коду:

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

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

Акційні товари ми виводитимемо нижче схожих, для цього ми підключимо новий файл за допомогою коду.

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

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

Покладемо створений файл у папку вашого шаблону -> woocommerce -> single-product -> product-in-sale.php. Щоб файл виглядав красиво, я за його основу взяв файл з моєї теми, що знаходиться за адресою Папка шаблону -> woocommerce -> single-product -> related.php. У вас, швидше за все, такий файл теж є, якщо немає, то може бути 2 причини:

У вас є дочірня тема і вам потрібно взяти цей файл з батьківської теми. Докладніше про влаштування дочірніх тем ви можете почитати в моїй статті “Дочірні теми у WordPress“.
Ваша тема використовує цей файл із плагіна WooCommerce і ви можете знайти цей файл у самому плагіні.

Шукати файл потрібно саме в тому порядку, як я вказав вище.

Якщо файл знайдено, то скопіюйте дані з файлу related.php до створеного нами файлу product-in-sale.php. Далі ми змінюватимемо цей код.

Відкриваємо файл, створений нами product-in-sale.php та поправляємо код за логікою, яку я використав у себе. Нижче я наведу листинг коли мого файлу та розпишу яка частина коду відповідає за правильну вибірку коду. (Увага, крім функції вибірки, може відрізнятися).

<?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();

<?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();

Все, що вам буде необхідно змінити у вашому коді для виведення акційних товарів це верхня частина коду, де потрібно вказати:

Правильна кількість товарів $posts_per_pag.
Заголовок блоку.
вказати сортування.
Додати параметри в масив для фільтрації по кастомних полях _stock_statu та _sale_price.

Дуже докладно розповідати не буду, залишаю вам можливість розібратися самостійно. Якщо не розберетеся, то чекаю питань у коментарях.

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