Chào các bạn, mặc định trang Danh mục sản phẩm của Woocommerce chỉ cho phép hiển thị các card sản phẩm, người dùng phải điều hướng các danh mục con thông qua menu hoặc sidebar, điều này gây không ít khó khăn cho việc thao tác và trải nghiệm người dùng. Do đó, xuất phát từ yêu cầu của khách hàng, phải show đủ các danh mục con và sản phẩm để người dùng dễ theo dõi, hôm nay mình chia sẻ tới mọi người cùng sử dụng nha!
Bài viết hướng dẫn thực hiện trên web wordpress, sử dụng woocommerce và theme Flatsome.
Bước 1: Xác định file layout của trang danh mục
Trong theme Flatsome có nhiều file quy định layout của trang danh mục, tùy trường hợp cụ thể của các bạn để chúng ta chọn file layout phù hợp nhé!
Ở trường hợp của mình, trang danh mục không có sidebar nên sử dụng file wp-content/themes/flatsome/woocommerce/layouts/category-none.php. Thay toàn bộ nội dung trang category-none.php bằng code bên dưới:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | <?php /** * Category layout with no sidebar. * * @package Flatsome/WooCommerce/Templates * @flatsome-version 3.18.7 */ ?> <div class="row category-page-row"> <div class="col large-12"> <?php defined( 'ABSPATH' ) || exit; /** * Xác định danh mục cần lấy */ $terms = array(); // Trang Shop => lấy danh mục gốc if ( is_shop() ) { $terms = get_terms( array( 'taxonomy' => 'product_cat', 'parent' => 0, 'hide_empty' => true, 'orderby' => 'menu_order', 'order' => 'ASC', ) ); } // Trang danh mục => lấy danh mục con elseif ( is_product_category() ) { $current_term = get_queried_object(); $terms = get_terms( array( 'taxonomy' => 'product_cat', 'parent' => $current_term->term_id, 'hide_empty' => true, 'orderby' => 'menu_order', 'order' => 'ASC', ) ); } /** * Nếu có danh mục cần hiển thị */ if ( ! empty( $terms ) && ! is_wp_error( $terms ) ) : foreach ( $terms as $term ) : ?> <section class="archive-category-section"> <h2 class="archive-category-title"> <?php echo esc_html( $term->name ); ?> </h2> <?php echo do_shortcode( '[ux_products cat="' . esc_attr( $term->slug ) . '" products="4" columns="4" columns__md="4" columns__sm="2" orderby="date" order="desc" image_height="100%" image_size="media" ]' ); ?> <div class="archive-view-all"> <a href="<?php echo esc_url( get_term_link( $term ) ); ?>"> » Xem tất cả </a> </div> </section> <?php endforeach; /** * Không có danh mục con -> hiển thị mặc định */ else : if ( woocommerce_product_loop() ) : woocommerce_product_loop_start(); while ( have_posts() ) : the_post(); wc_get_template_part( 'content', 'product' ); endwhile; woocommerce_product_loop_end(); do_action( 'woocommerce_after_shop_loop' ); else : do_action( 'woocommerce_no_products_found' ); endif; endif; ?> <?php /** * Hook: flatsome_products_after. * * @hooked flatsome_products_footer_content - 10 */ do_action( 'flatsome_products_after' ); /** * Hook: woocommerce_after_main_content. * * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content) */ do_action( 'woocommerce_after_main_content' ); ?> </div> </div> |
Code quy định rõ:
- Nếu có danh mục con thì liệt kê danh mục con + 4 sản phẩm đầu tiên của mỗi danh mục con, sau đó có nút “Xem thêm” để trỏ link vào danh mục con đó.
- Nếu không có danh mục con thì hiển thị dạng lưới như mặc định
Sau khi paste thay thế nội dung file, bạn nhớ lưu lại và ra xem sản phẩm để thấy sự thay đổi nhé!
Bước 2: Thêm CSS để làm đẹp
Tùy nhu cầu làm đẹp, các bạn có thể tham khảo CSS của mình hoặc tự tùy biến thêm
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .archive h1 { margin: 20px 0 23px 0; text-align: center; text-transform: uppercase; font-size: 36px; color: #034ea2; } h2.archive-category-title { font-size: 28px; text-transform: uppercase; text-align: center; color: #034ea2; } .archive-view-all a { color: #2196f3; display: block; text-align: center; } .archive-view-all { text-align: right; font-weight: 700; letter-spacing: 0; margin-bottom: 40px; } |
Bước 3: Review lại và chỉnh sửa thêm
Review lại một lượt xem ok chưa, đặc biệt là phần CSS để làm đẹp theo ý của các bạn nhé! Các danh mục con hiển thị lần lượt và show sản phẩm của danh mục con như hình dưới là ok!
Chúc các bạn thành công, nếu gặp lỗi hay khó khăn gì cứ bình luận hoặc nhắn tin mình hỗ trợ. Xin cám ơn!
