Người Viết : ViKiMi Editor

Online Shopping hiệu quả hơn khi Website có thiết kế WooCommerce Product Tag Template
WooCommerce cho phép tạo ra các trang buôn bán bất kỳ sản phẩm nào bạn muốn. WooCommerce là nền tảng thương mại điện tử mạnh mẽ, tạo ra các Page hiển thị các sản phẩm một cách dễ dàng. Các bạn cũng biết là chỉ cần sử dụng các Shortcodes cung cấp bởi WooCommerce đã có thể tạo ra các Page hiển thị ưng ý. Việc thiết kế một Website như vậy không tốn nhiều thời gian và thuận tiện cho mọi người.
+ Đối với những cá nhân không có chuyên môn nhiều về Lập Trình thì điều đó thật tuyệt vời.
+ Đối với một Lập Trình Viên hoặc một Nhà Phát Triển thì có lẽ yêu cầu là cao hơn nữa. Thiết kế các hiển thị sản phẩm theo các Categories và Tags … đều cần phải có và phát triển.
+ Trong phần này, đề cập tới việc thiết kế WooCommerce Tags cho phép hiển thị các sản phẩm trong các Tags. Nhằm tạo ra các Tags hiển thị các sản phẩm theo chủng loại, theo sản phẩm nổi bật. Tag Template sẽ cho phép chúng ta đưa ra các thiết kế hiển thị như vậy.
+ Lập trình với Tag Template sẽ cho phép hiển thị WooCommerce Tag cách tốt nhất. Cũng tương tự khi bạn phát triển một WordPress Website thông thường, công việc chúng ta cần làm có nhiều sự tương đồng.
Hình Ảnh 1 :

Công việc chúng ta cần làm là tạo một Tag Template giúp hiển thị tất cả WooCommerce Tags (Để tạo Tag Template cho một Product Tag 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 TAG 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_tag.php”
Đây sẽ là File mẫu dành cho Thẻ 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 Thẻ Sản Phẩm (Product Tag) 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_tag.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 Thẻ Sản Phẩm.
add_filter( 'template_include', 'custom_product_tag_template');
function custom_product_tag_template( $template ) {
if ( is_tax( 'product_tag' ) ) {
$template = get_stylesheet_directory() . '/taxonomy-product_tag.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.
Tạo Tag Template giúp bạn có thể đưa ra những mã Lập Trình hiện đại và những hiển thị tốt nhất cần thiết cho WooCommerce Tags. Sự kết hợp của những Shortcodes được tạo ra giúp hiển thị và Các Template tuỳ chỉnh giúp cho bạn có những Website hiện đại & giao diện thân thiện.
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ị.