Trong WordPress, WooCommerce là một plugin mạnh mẽ giúp tạo và quản lý cửa hàng trực tuyến. Mỗi sản phẩm có thể được sắp xếp vào các danh mục khác nhau để giúp khách hàng dễ dàng tìm kiếm. Tuy nhiên, mặc định WooCommerce không hiển thị danh mục con một cách trực quan với hình ảnh. Vì vậy, bài viết này sẽ hướng dẫn bạn cách hiển thị danh mục con có hình ảnh khi vào danh mục sản phẩm wordpress vào danh mục sản phẩm.
Lợi Ích Của Việc Hiển Thị Danh Mục Con
- Giao diện trực quan hơn: Khách hàng có thể dễ dàng nhận biết các danh mục con thông qua hình ảnh.
- Dễ dàng tùy chỉnh: Bạn có thể thêm CSS hoặc thay đổi hiển thị theo ý muốn.
- Cải thiện trải nghiệm người dùng: Giúp khách hàng duyệt sản phẩm nhanh hơn, tăng tỷ lệ chuyển đổi.
Cách Hiển Thị Danh Mục Con Có Hình Ảnh Trong WooCommerce Khi Vào Danh Mục Sản Phẩm
Để thực hiện, bạn cần thêm đoạn mã dưới đây vào file functions.php
của theme đang sử dụng.
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 | // Hiển thị danh mục con có hình ảnh trong WooCommerce - muathemewpgiare.com function muathemewpgiare_co_display_subcategories() { if (!is_product_category()) { return; } $category_id = get_queried_object_id(); $taxonomy = 'product_cat'; // Lấy danh mục con của danh mục hiện tại $subcategories = get_terms([ 'taxonomy' => $taxonomy, 'hide_empty' => true, 'parent' => $category_id, ]); if (empty($subcategories)) { return; } echo '<div class="muathemewpgiare-co-subcategories">'; echo '<ul class="muathemewpgiare-co-list">'; foreach ($subcategories as $subcategory) { $subcat_link = get_term_link($subcategory, $taxonomy); $thumb_id = get_term_meta($subcategory->term_id, 'thumbnail_id', true); $thumb_url = wp_get_attachment_image_url($thumb_id, 'full'); echo '<li class="muathemewpgiare-co-item">'; echo '<a href="' . esc_url($subcat_link) . '">'; if ($thumb_url) { echo '<div class="muathemewpgiare-co-thumb"><img src="' . esc_url($thumb_url) . '" alt="' . esc_attr($subcategory->name) . '"></div>'; } echo '<div class="muathemewpgiare-co-title">' . esc_html($subcategory->name) . '</div>'; echo '</a></li>'; } echo '</ul>'; echo '</div>'; } add_action('woocommerce_archive_description', 'muathemewpgiare_co_display_subcategories', 10); // CSS Tùy Chỉnh function muathemewpgiare_co_custom_styles() { echo ' <style> .muathemewpgiare-co-subcategories { padding: 10px; margin-bottom: 20px; } .muathemewpgiare-co-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; } .muathemewpgiare-co-item { flex: 1 1 calc(16.66% - 10px); text-align: center; background: #fff; box-shadow: 1px 1px 5px #ddd; padding: 10px; border-radius: 5px; } .muathemewpgiare-co-item a { text-decoration: none; color: #333; display: block; } .muathemewpgiare-co-thumb img { max-width: 100%; height: auto; border-radius: 5px; } .muathemewpgiare-co-title { margin-top: 8px; font-size: 14px; font-weight: bold; } @media (max-width: 768px) { .muathemewpgiare-co-item { flex: 1 1 calc(50% - 10px); } } </style> '; } add_action('wp_head', 'muathemewpgiare_co_custom_styles'); |
Hướng Dẫn Cách Thực Hiện
- Mở file
functions.php
của theme đang dùng. - Sao chép và dán đoạn mã trên vào cuối file.
- Lưu lại và kiểm tra kết quả trên trang danh mục sản phẩm.
Dịch Vụ Hỗ Trợ Khác Về WordPress & WooCommerce
Muathemewpgiare.com cung cấp các dịch vụ liên quan đến WordPress và WooCommerce, phù hợp với nhiều nhu cầu khác nhau:
- Viết plugin và tùy chỉnh chức năng để mở rộng khả năng của WordPress.
- Phát triển ứng dụng theo yêu cầu, phù hợp với nhu cầu sử dụng riêng.
- Lấy bài viết, sản phẩm từ website khác, giúp cập nhật nội dung nhanh chóng.
- Viết bài chuẩn SEO, tối ưu nội dung theo yêu cầu.
- Quản trị và chăm sóc website, bao gồm cập nhật nội dung, cải thiện hiệu suất.
- Hỗ trợ đăng bán theme trên chợ web, giúp tiếp cận khách hàng dễ dàng.
- Cung cấp theme có sẵn, đầy đủ tính năng tại Muathemewpgiare.com.
- Clone theme WordPress theo yêu cầu, đảm bảo đầy đủ chức năng và thiết kế.
Nếu cần thêm thông tin chi tiết, bạn có thể liên hệ để trao đổi cụ thể hơn.
Kết Luận
Với đoạn mã trên, bạn đã có thể hiển thị danh mục con có hình ảnh trong WooCommerce một cách dễ dàng. Điều này không chỉ giúp tăng trải nghiệm người dùng mà còn làm cho cửa hàng của bạn chuyên nghiệp hơn. Nếu bạn có bất kỳ câu hỏi nào, hãy để lại bình luận nhé!
- Sharecode bắt buộc xác minh tài khoản người dùng qua OTP gmail miễn phí
- Bí Kíp SEO Danh Mục Để Lên Top Google năm 2024: Cứ Vui Mà Làm, Cứ Hài Mà Đúng!
- Các Phương Pháp Quảng Cáo Website Miễn Phí Hiệu Quả
- Mua Theme Giá Rẻ và Chọn Theme WordPress Bán Hàng Chuẩn SEO
- Hướng dẫn chi tiết kết nối Zalo OA với WooCommerce: Tối ưu hóa trải nghiệm khách hàng và tăng cường tương tác