Người Viết : ViKiMi Editor

Hướng dẫn tạo Mẫu tuỳ chỉnh Product Category Template với WooCommerce hiệu quả 100%
Chúng ta đã biết cách tạo ra các Pages để hiển thị sản phẩm cần thiết. Điều đó có thể làm thật đơn giản với các Shortcodes được cung cấp bởi WooCommerce. Các Shortcodes thật hữu dụng trong trường hợp bạn thiết kế các Pages. Nhưng chúng ta cũng có thể làm các thiết kế hiển thị khác hơn khi sử dụng WooCommerce Category. Điều này giúp các tuỳ chọn của chúng ta cao hơn nữa.
Vậy khi tạo ra các WooCommerce Categories thực sự có đem lại lợi ích cao hơn không so với Tạo ra các Pages hiển thị?
Sự Thật khi bạn tạo ra các WooCommerce Categories, Điều này đồng nghĩa với việc bạn muốn đưa người dùng tới nội dung hiển thị là Categories Page. Vì khi người dùng truy cập vào nội dung của Category thì họ sẽ được mở ra trong một Page mới của Website, đây là Page hiển thị nội dung Category.
Hình Ảnh 1 :

Vậy để có thể hiển thị sản phẩm trên một Category Page thì chúng ta cần làm gì? Thật không khó, chúng ta chỉ cần tạo ra Category Template. Đây là File Code chứa nội dung mã Lập Trình giúp hiển thị các sản phẩm trong một Category.
Cũng tương tự khi bạn thực hiện tạo Category Template với WordPress. Nên tảng thương mại điện tử WooCommerce cũng cho phép bạn thực hiện cách tương tự. Vậy trong phần này chúng ta sẽ đề cập đến việc tạo một Category Template giúp hiển thị tất cả các WooCommerce Categories.
Công việc chúng ta làm lần này là tạo một Category Template giúp hiển thị tất cả các WooCommerce Categories (Để tạo Category Template cho một Category chỉ định thì công việc sẽ thực hiện ở phần đề cập lần tới)
CÁC BƯỚC TẠO CATEGORY TEMPLATE ĐỂ NÓ HOẠT ĐỘNG VỚI WOOCOMMERCE STORE
BƯỚC 1 :
Trong Thư mục Theme bạn đang kích hoạt, hãy tạo một File như sau :
+ “taxonomy-product_cat.php”
Đây sẽ là File mẫu dành cho Danh Mục sản phẩm tuỳ chỉnh của bạn. Nó sẽ giúp thực thị các Mã Lập trình để hiển thị nội dung Danh Mục Sản Phẩm (Product Category) trong WooCommerce Store.
BƯỚC 2 :
Truy cập thư mục cài đặt của Plugin WooCommerce :
wp-content\plugins\woocommerce\templates
Sau đó, thực hiện copy nội dung file archive-product.php và Paste nó vào taxonomy-product_cat.php.
Nội dung đó 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' ); } } ?> <nav> <ul> <li><?php echo previous_posts_link( 'PREV') ?></li> <li><?php echo next_posts_link( 'NEXT') ?></li> </ul> </nav> <?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' );
Đây là nội dung mã lập trình giúp bạn thực hiện các hiển thị mong muốn. Nếu bạn muốn tuỳ chỉnh những nội dung hiển thị thì bạn có thể thực hiện tại nội dung này. Các tuỳ chỉnh này tuỳ theo yêu cầu của bạn.
BƯỚC 3 :
Thêm mã code sau đây vào file function.php, đoạn mã này sẽ yêu cầu WooCommerce sử dụng mẫu tuỳ chỉnh này cho các trang Danh Mục Sản Phẩm.
add_filter( 'template_include', 'custom_product_cat_template');
function custom_product_cat_template( $template ) {
if ( is_tax( 'product_cat' ) ) {
$template = get_stylesheet_directory() . '/taxonomy-product_cat.php';
}
return $template;
}
Với những đăng kí này, bạn có thể hiển thị trang Web buôn bán trên nền tảng WooCommerce một cách tốt nhất. Và công việc tiếp theo bạn hãy kiểm tra xem mẫu tuỳ chỉnh của bạn có hoạt động tốt không bằng cách xem nó có hoạt động trên trình duyệt Web hay không.
Khi thực hiện tuỳ chỉnh cách tốt nhất là bạn nên tận dụng các functions và hooks tích hợp của WooCommerce. Điều này sẽ cho phép các tuỳ chỉnh của bạn được hoạt động tốt nhất với WooCommerce và không tốn thời gian lập trình, Website của bạn sẽ hoạt động tốt trên các thiết bị.