Cách hiển thị sản phẩm tương tự chỉ theo Danh mục trong Woocommerce | Liêm MKT

Posted on by mtoplistChuyên mục:Top List

Bạn đã làm xong Website, mọi thứ đều hoàn hảo. Cho đến khi bạn thấy sản phẩm tương tự (related product) hiển thị cuối cùng lại đưa ra những sản phẩm tùm lum ở đâu, không nhất quán theo danh mục gì cả. Câu trả lời là do cách hiển thị sản phẩm tương tự trong Woocommerce là theo Danh mục và Thẻ, vì thế nó sẽ hiển thị những sản phẩm có cùng 1 trong 2 yếu tố này để đưa vào “Sản phẩm tương tự“.

Trong bài này, Liêm sẽ hướng dẫn bạn cách hiển sản phẩm tương tự trong Woocommerce theo danh mục để cho trang sản phẩm đỡ rối mắt nhé.

Hướng dẫn sửa code hiển thị sản phẩm tương tự trong Woocommerce

Mục lục

  1. Hướng dẫn sửa code hiển thị sản phẩm tương tự trong Woocommerce

Để có thể cho website hiển thị sản phẩm tương tự theo danh mục các truy cập vào Plugin Woocomerce theo đường dẫn sau:

  • Vào quản trị
  • Vào Giao diện
  • Vào “Sửa giao diện”
  • Chọn Flatsome
    • Tìm mục Woocommerce, click vào
    • Tìm Single-Product, click vào
    • Chọn Related.php
    • Thay thế bằng đoạn code dưới đây
<?php
/**
* Related Products
*
* This template can be overridden by copying it to yourtheme/woocommerce/single-product/related.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see https://docs.woocommerce.com/document/template-structure/
* @author WooThemes
* @package WooCommerce/Templates
* @version 1.6.4
* @share by Liêm MKT
* @more tricks https://liemmkt.com
*/

if ( ! defined( 'ABSPATH' ) ) {
exit;
}

global $product, $woocommerce_loop;

if ( empty( $product ) || ! $product->exists() ) {
return;
}

if ( ! $related = $product->get_related( $posts_per_page ) ) {
return;
}

$cats_array = array(0);

// get categories
$terms = wp_get_post_terms( $product->id, 'product_cat' );

// select only the category which doesn't have any children
foreach ( $terms as $term ) {
$children = get_term_children( $term->term_id, 'product_cat' );
if ( !sizeof( $children ) )
$cats_array[] = $term->term_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' => $orderby,
'tax_query' => array(
array(
'taxonomy' => 'product_cat',
'field' => 'id',
'terms' => $cats_array
),
)
));

$products = new WP_Query( $args );
$woocommerce_loop['name'] = 'related';
$woocommerce_loop['columns'] = apply_filters( 'woocommerce_related_products_columns', $columns );

if ( $products->have_posts() ) : ?>

<div class="related products">

<h2><?php _e( 'Related Products', 'woocommerce' ); ?></h2>

<?php woocommerce_product_loop_start(); ?>

<?php while ( $products->have_posts() ) : $products->the_post(); ?>

<?php wc_get_template_part( 'content', 'product' ); ?>

<?php endwhile; // end of the loop. ?>

<?php woocommerce_product_loop_end(); ?>

</div>

<?php endif;

wp_reset_postdata();

Tiếp theo, vào child theme, chọn file functions.php, paste đoạn mã sau vào:

/**
 * Change number of related products output
 */ 
function woo_related_products_limit() {
  global $product;
    
    $args['posts_per_page'] = 8; 
    return $args;
}
add_filter( 'woocommerce_output_related_products_args', 'jk_related_products_args', 20 );
  function jk_related_products_args( $args ) {
    $args['posts_per_page'] = 8;
    return $args;
}

Sau khi hoàn tất, các bạn lưu file, quay lại trang plugin hủy kích hoạt Plugin Woocommerce đi rồi kích hoạt lại. Sau đó, các bạn vào tang sản phẩm để xem phần sản phẩm tương tự đã hiển thị theo danh mục chưa.

Hi vọng bài viết hướng dẫn hiển thị sản phẩm tương tự theo danh mục sẽ giúp các bạn giải quyết được vấn để hiển thị sản phẩm lộn xộn trong Woocommerce.

Đón xem nhiều chia sẻ hay tại trang thủ thuật website nhé các bạn. Nhớ like và share bài viết, để tạo thêm động lực cho team content của Liêm nhé.

Cảm ơn bạn đã xem – Liêm MKT

Điểm đánh giá

mtoplist