Người Viết : ViKiMi Editor
Thực hiện tuỳ chỉnh tạo phân trang sản phẩm liên quan – WooCommerce related products
Mặc định WooCommerce không cung cấp khả năng phân trang với sản phẩm liên quan (Related Products), điều này có vẻ không thuận lợi lắm. Nếu muốn phân trang dành cho sản phẩm Related Products thì chúng ta có thể lựa chọn một vài Plugin với phiên bản Pro. Hoặc cũng có thể phân trang bằng cách tuỳ chỉnh sản phẩm liên quan để có thể phân trang.
Chúng ta liệu có thể thực hiện nó một cách đơn giản hay không?
+ Chắc chắn rồi, Việc này không quá phức tạp để thực hiện.
Vì phân trang với WooCommerce, thì bạn có thể thực hiện tương tự như WordPress. Bản chất hệ thống thương mại điện tử WooCommerce là một Plugin của WordPress, nên chúng ta có thể tuỳ chỉnh WooCommerce dựa trên những gì WordPress cung cấp + WooCommerce cũng cho phép điều đó.
Hiển thị của sản phẩm liên quan Related Products được thiết kế tại file:
wp-content \plugins \woocommerce \templates \single-product \related.php
Do đó, chúng ta có thể thực hiện Ghi đè File này của WooCommerce để tạo hiển thị phân trang.
Chúng ta có thể ghi đè File này bằng cách : Ghi đè tại Folder WooCommerce của Theme đang kích hoạt.
BƯỚC 1 : Thực hiện ghi đè File related.php
Chúng ta Tạo File : YourTheme / woocommerce / single-product / related.php
Nếu bạn muốn biết các thông tin chi tiết việc thực hiện ghi đè các Template của WooCommerce (Hãy tham khảo tại đây)
Nội dung Code của related.php như sau :
<?php /** * Related Products * This template can be overridden by copying it to * yourtheme/woocommerce/single-product/related.php. */ if ( ! defined( 'ABSPATH' ) ) { exit; } if ( $related_products ) : $arr = array(); ?> <section class="related products"> <?php $heading = apply_filters( 'woocommerce_product_related_products_heading', __( 'Related products', 'woocommerce' ) ); if ( $heading ) : ?> <h2><?php echo esc_html( $heading ); ?></h2> <?php endif; ?> <?php woocommerce_product_loop_start(); ?> <?php foreach ( $related_products as $related_product ) : ?> <?php array_push($arr,$related_product->get_id()); ?> <?php endforeach; ?> <?php wp_reset_query(); $GLOBALS['arr'] = $arr; $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1; $wp_query = new WP_Query(array('post_type' => 'product', 'post__in' => $GLOBALS['arr'], 'posts_per_page' => '3', 'paged' => $paged)); while ( $wp_query->have_posts()) : $wp_query->the_post(); wc_get_template_part( 'content', 'product' ); endwhile; $number_pages = $wp_query->max_num_pages; $previous_text = '«'; $next_text = '»'; $args = wp_parse_args( $args, [ 'total' => $number_pages, 'mid_size' => 3, 'prev_next' => false, 'prev_text' => __($previous_text, 'textdomain'), 'next_text' => __($next_text, 'textdomain'), 'type' => 'plain', 'screen_reader_text' => __('Posts navigation', 'textdomain'), 'before_page_number' => '<strong>', 'after_page_number' => '</strong>', ]); echo '<BR/>'; echo '<strong>Page : </strong>'.paginate_links($args); ?> <?php woocommerce_product_loop_end(); ?> </section> <?php endif; wp_reset_postdata();
BƯỚC 2 : Thực hiện tuỳ chỉnh số lượng hiển thị của Related Products tại file Function.php (Tốt nhất hãy thực hiện tại Child Theme hoặc dùng Code Snippets)
Nội cung Code chúng ta thêm vào Function.php :
add_filter( 'woocommerce_output_related_products_args', 'custom_related_products_args', 20 ); function custom_related_products_args( $args ) { $args['posts_per_page'] = -1; // show all products $args['columns'] = 3; // arranged in 3 columns return $args; }
+ Chúng ta sẽ cho phép hiển thị toàn bộ sản phẩm liên quan & kết hợp với thiết kế tại related.php là cho phép hiển thị 6 sản phẩm trên một Page (Chúng ta sẽ có nhiều Page phân trang)
+ Số cột hiên thị là 3
Hình Ảnh :
Như vậy, đã có thể thực hiện phân trang cho sản phẩm liên quan Related Products. Không khó để thực hiện điều này, và cũng tương tự cho các sản phẩm khác được cung cấp bởi WooCommerce. Bạn có thể có những tuỳ chỉnh cho phù hợp với ý đồ tạo ra.
Lưu ý : Chúng ta cũng có thể thực hiện phân trang cho sản phẩm liên quan (Related Products) bằng cách sử dụng Hook cung cấp bởi WooCommercer. Việc lập trình cũng tương tự !
remove_action(‘woocommerce_after_single_product_summary’,’woocommerce_output_related_products’,20);
add_action( ‘woocommerce_single_product_summary’, ‘custom_woocommerce_output_related_products‘,20);
function custom_woocommerce_output_related_products()
{
/* Your Code Here */
}
