Người Viết : ViKiMi Editor

Thiết kế hiển thị cho một Category bằng cách tạo tuỳ chỉnh Product Category Template
Chúng ta đã thấy rõ WooCommerce cho phép thực hiện rất nhiều thiết kế với Page, Category hoặc Tag. Những thiết kế này giúp có rất nhiều cách để có được những bố cục cho các Sản Phẩm. Hầu hết đều đem lại các thiết kế nhanh gọn nhất có thể. Lợi ích này thực sự làm chúng ta cảm thấy hài lòng với vấn đề đã giải quyết. Nhưng để có thể hiểu rõ hơn thì vẫn cần thời gian cho vấn đề này.
Chúng ta sẽ thực hiện cụ thể cách tạo ra một file Category để có thể hiển thị với một Category cụ thể. Với cách này sẽ có những hiển thị cần thiết mà chúng ta mong muốn và nó sẽ là một mẫu chung có thể áp dụng cho một Website bán hàng Online.
Giả sử : Chúng ta có một Product Category là Shoes. Slug của Category sẽ là shoes (Slug sẽ được tạo ra khi bạn tạo Product Category).
A ) Chúng ta sẽ tạo một file Category : category-shoes.php
Đây là một Category Template giúp hiển thị toàn bộ sản phẩm trong Category Shoes.
Nội Dung Code như sau :
<?php defined( 'ABSPATH' ) || exit; get_header( 'shop' ); /** * Hook: woocommerce_before_main_content. * * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content) * @hooked woocommerce_breadcrumb - 20 * @hooked WC_Structured_Data::generate_website_data() - 30 */ do_action( 'woocommerce_before_main_content' ); ?> <header class="woocommerce-products-header"> <?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?> <h1 class="woocommerce-products-header__title page-title"><?php woocommerce_page_title(); ?></h1> <?php endif; ?> <?php /** * Hook: woocommerce_archive_description. * * @hooked woocommerce_taxonomy_archive_description - 10 * @hooked woocommerce_product_archive_description - 10 */ do_action( 'woocommerce_archive_description' ); ?> </header> <?php if ( woocommerce_product_loop() ) { /** * Hook: woocommerce_before_shop_loop. * * @hooked woocommerce_output_all_notices - 10 * @hooked woocommerce_result_count - 20 * @hooked woocommerce_catalog_ordering - 30 */ do_action( 'woocommerce_before_shop_loop' ); woocommerce_product_loop_start(); if ( wc_get_loop_prop( 'total' ) ) { while ( have_posts() ) { the_post(); /** * Hook: woocommerce_shop_loop. */ do_action( 'woocommerce_shop_loop' ); wc_get_template_part( 'content', 'product-cat-shoes' ); } } ?> <?php woocommerce_product_loop_end(); /** * Hook: woocommerce_after_shop_loop. * * @hooked woocommerce_pagination - 10 */ do_action( 'woocommerce_after_shop_loop' ); } else { /** * Hook: woocommerce_no_products_found. * * @hooked wc_no_products_found - 10 */ do_action( 'woocommerce_no_products_found' ); } ?> /** * Hook: woocommerce_after_main_content. * * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content) */ do_action( 'woocommerce_after_main_content' ); /** * Hook: woocommerce_sidebar. * * @hooked woocommerce_get_sidebar - 10 */ do_action( 'woocommerce_sidebar' ); get_footer( 'shop' );
1 ) Xử lý Chung : Chúng ta có thể hiểu rõ đoạn Code trên một cách dễ dàng.
/** Nếu có Sản phẩm trong Category thì sẽ thực hiện hiển thị **/
if ( woocommerce_product_loop() ) {
} else { /** Thông báo không có Sản Phẩm **/
}
2 ) Các Xử lý khác dựa vào Hook cung cấp bởi WooCommerce :
Tất các các xử lý thật đơn giản dựa vào các Hook do WooCommerce cung cấp. Và các Comment rất rõ ràng.
Ví dụ :
[ Hook: woocommerce_before_main_content.]
Đây là Hook cho phép chúng ta hiển thị hoặc tuỳ chỉnh các thông tin :
+ outputs opening divs for the content
+ woocommerce breadcrumb
[ Hook: woocommerce_archive_description.]
Đây là Hook cho phép chúng ta hiển thị hoặc tuỳ chỉnh các thông tin :
+ description
[ Hook: woocommerce_before_shop_loop.]
Đây là Hook cho phép chúng ta hiển thị hoặc tuỳ chỉnh các thông tin :
+ output all notices
+ result count
+ catalog ordering
Tương tự cho tất cả các Hook được cung cấp bởi WooCommerce. Dù bạn làm việc với bất kỳ Hook nào thì công việc thực hiện đều tương tự nhau. Bạn có thể tuỳ chỉnh để có các hiển thị phù hợp, công việc thực hiện các tuỳ chỉnh do các yêu cầu mà bạn có thể làm theo cách khác nhau. Vấn đề tuỳ chỉnh với các Hook của WooCommerce sẽ đề cập tại phần tới.
3 ) Trong phần này chúng ta sẽ quan tâm tới phần Code màu đỏ.
/**
* Hook: woocommerce_shop_loop.
*/
do_action( 'woocommerce_shop_loop' );
wc_get_template_part( 'content', 'product-cat-shoes' );
Đoạn Code cho phép chúng ta include mẫu :
Content-product-cat-shoes.php
Đây là mẫu cho phép tạo cách hiển thị cho các sản phẩm trong Category Shoes. Các tuỳ chỉnh để có được cách hiển thị cho sản phẩm sẽ thực hiện tại file này (Với Các Category khác nhau chúng ta có thể tạo ra cách File khác nhau).
Nội Dung Code của File content-product-cat-shoes.php sẽ như sau :
<?php
/**
* The template for displaying product content within loops.
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
global $product, $woocommerce_loop;
// Store loop count we're currently on
if ( empty( $woocommerce_loop['loop'] ) ) {
$woocommerce_loop['loop'] = 0;
}
// Store column count for displaying the grid
if ( empty( $woocommerce_loop['columns'] ) ) {
$woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 4 );
}
// Ensure visibility
if ( ! $product || ! $product->is_visible() ) {
return;
}
// Increase loop count
$woocommerce_loop['loop']++;
// Extra post classes
$classes = array();
if ( 0 == ( $woocommerce_loop['loop'] - 1 ) % $woocommerce_loop['columns'] || 1 == $woocommerce_loop['columns'] ) {
$classes[] = 'first';
}
if ( 0 == $woocommerce_loop['loop'] % $woocommerce_loop['columns'] ) {
$classes[] = 'last';
}
?>
<li <?php post_class( $classes ); ?> style="width:100%;border: 1px solid darkgrey;">
<?php do_action( 'woocommerce_before_shop_loop_item' ); ?>
<?php
/**
* remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
* remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
* remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
*/
do_action( 'woocommerce_single_product_summary' );
?>
<a href="<?php the_permalink(); ?>">
<div style="width:20%; padding: 2%; float: left; ">
<?php
/**
* woocommerce_before_shop_loop_item_title hook
*
* @hooked woocommerce_show_product_loop_sale_flash - 10
* @hooked woocommerce_template_loop_product_thumbnail - 10
*/
do_action( 'woocommerce_before_shop_loop_item_title' );
?>
</div>
<div style="width:70%; float:left;">
<?php
/**
* woocommerce_shop_loop_item_title hook
*
* @hooked woocommerce_template_loop_product_title - 10
*/
do_action( 'woocommerce_shop_loop_item_title' );
/**
* Hook: woocommerce_single_product_summary.
*
* @hooked woocommerce_template_single_rating - 10
* @hooked woocommerce_template_single_price - 10
* @hooked woocommerce_template_single_excerpt - 20
* @hooked woocommerce_template_single_meta - 40
* @hooked woocommerce_template_single_sharing - 50
* @hooked WC_Structured_Data::generate_product_data() - 60
*/
do_action( 'woocommerce_single_product_summary' );
/**
* woocommerce_after_shop_loop_item_title hook
*
* @hooked woocommerce_template_loop_rating - 5
* @hooked woocommerce_template_loop_price - 10
*/
do_action( 'woocommerce_after_shop_loop_item_title' );
?>
</div>
</a>
<?php
/**
* Hook: woocommerce_after_shop_loop_item.
*
* @hooked woocommerce_template_loop_product_link_close - 5
* @hooked woocommerce_template_loop_add_to_cart - 10
*/
do_action( 'woocommerce_after_shop_loop_item' );
?>
</li>
Chúng ta quan tâm phần Code có màu đỏ, Đây là Code để thay đổi cách hiển thị. Chúng ta thấy WooCommerce mặc định thì tất cả các sản phẩm đều hiển thị dạng Grid View. Tuy nhiên, với cách tạo ra thiết kế đơn giản này chúng ta sẽ có thể có một dạng List View đơn giản nhất.
+ Chúng ta đã thêm vào các thiết kế với CSS để tạo ra một hiển thị mới. Hiển thị sẽ dưới dạng List View Và Kết quả quan tâm có như bên dưới.
( Lưu ý : các Hook chính là nơi chúng ta có thể thực hiện tuỳ chỉnh các hiển thị về sản phẩm. )
Hình Ảnh kết quả :

Chúng ta thấy cách tạo ra một file hiển thị các thông tin sản phẩm thuộc một Category rất dễ dàng và các tuỳ chỉnh cũng thật đơn giản. Kết quả chúng ta có được một Template File cho phép hiển thị theo các riêng.
Tất nhiên, nếu bạn muốn có thêm các hiển thị dành cho các nhóm sản phẩm khác nhau thì bạn cũng có thể làm được điều đó dễ dàng bằng các Truy vấn Sản Phẩm của WooCommerce hoặc WordPress, vì cả 2 cách này đều được cho phép. Khi bạn truy vấn thành công các sản phẩm theo yêu cầu thì cũng có thể tạo ra các Thiết Kế hiển thị một cách dễ dàng.
[ Ví Dụ Tạo Ra Thiết Kế Mới Như Bên Dưới : ]
+ Chúng ta sẽ tạo thêm 2 truy vấn và 2 hiển thị cần thiết tại category-shoes.php
+ Chúng ta sẽ thực hiện 2 phần hiển thị dựa vào đoạn mã lập trình :
wc_get_template_part( ‘content’, ‘product-cat-shoes’ ); // Giúp hiển thị dạng List View
wc_get_template_part( ‘content’, ‘product’ ); // Thiết kế hiển thị mặc định dạng Grid View
Tất nhiên, Bạn cần có các xử lý phù hợp tại category-shoes.php để có kết quả như bên dưới !!!

Trong phần này, chủ yếu đề cập tới tuỳ chỉnh Product Category Template để tạo ra một cách hiển thị như ý muốn. Do vậy, bạn có thể tạo ra các hiển thị cần thiết với cách này. Và tất nhiên, bạn có thể thực hiện tạo ra nhiều truy vấn thông tin để tạo ra những phần hiển thị thiết kế khác nhau, nhằm tạo ra một bố cục thiết kế hiển thị tốt nhất.
Việc tạo các tuỳ chỉnh sử dụng các Hooks được cung cấp bởi WooCommerce sẽ đề cập tại những lần tới.