Trong một cửa hàng chắc chắn sẽ luôn có những sản phẩm chính mà chủ cửa hàng muốn bán. Để thu hút người xem thì việc sắp xếp vị trí nổi bật trên cửa hàng và gắn thẻ “nổi bật” sẽ dễ dàng tạo được sự chú ý hơn. Bài viết này leekhoa.com sẽ hướng dẫn bạn cách tạo nhãn (label) nổi bật cho sản phẩm trong WooCommerce.
Tạo nhãn nổi bật cho sản phẩm chính – Show “Featured” label for featured product
Trước khi đến với bước tạo nhãn nổi bật cho sản phẩm, bạn cần thiết lập các sản phẩm chính của mình ở trạng thái “This is a featured product” bằng các cách sau:
- Cách 1: Tích chọn vào nút “This is a featured product” ngay ở trang đăng sản phẩm.
- Cách 2: Tại trang danh sách sản phẩm, bạn tích chọn vào các “ngôi sao” như hình dưới.
Như vậy là bạn đã hoàn tất thiết lập sản phẩm nổi bật cho cửa hàng, việc của bạn bây giờ là chèn các đoạn code dưới đây vào website.
Hiện thị nhãn nổi bật cho sản phẩm ra trang chi tiết sản phẩm và trang chủ
Để thực hiện hiển thị nhãn nổi bật cho sản phẩm mà mình đã chọn ở phần trên ra trang chủ hay các trang chi tiết sản phẩm, trang cửa hàng bạn chỉ cần chèn 2 đoạn code sau vào hệ thống.
Lưu ý: Trước khi thực hiện chèn code vào website, hãy backup lại hệ thống của bạn để tránh trường hợp chèn sai hoặc xảy ra xung đột khiến website bị lỗi. Trường hợp bạn không rành về chỉnh sửa code, hãy nhờ người có chuyên môn hỗ trợ.
Bước 1: Vào Giao diện => Child Theme => Theme File Editor => Chọn file Functions.php.
- Bạn nên thực hiện chỉnh sửa trên giao diện child theme để an toàn cho giao diện chính.
Sau đó chèn đoạn code sau vào cuối trong file functions.php:
|
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 |
// Hiện thị nhãn nổi bật trong trang sản phẩm add_action( 'woocommerce_before_shop_loop_item_title', 'flatsome_product_featured_badge', 10 ); function flatsome_product_featured_badge() { global $product; // Is a WC product if ( is_a( $product, 'WC_Product' ) ) { // Get productID $product_id = $product->get_id(); // Returns an array containing the IDs of the featured products. $featured_product_ids = wc_get_featured_product_ids(); // Checks if a value exists in an array if ( in_array( $product_id, $featured_product_ids ) ) { echo '<span class="featured-badge">Nổi bật</span>'; } } } // Hiện thị nhãn nổi bật trong chi tiết sản phẩm add_action( 'woocommerce_single_product_summary', 'flatsome_single_product_featured_badge', 1 ); function flatsome_single_product_featured_badge() { global $product; // Is a WC product if ( is_a( $product, 'WC_Product' ) ) { // Get productID $product_id = $product->get_id(); // Returns an array containing the IDs of the featured products. $featured_product_ids = wc_get_featured_product_ids(); // Checks if a value exists in an array if ( in_array( $product_id, $featured_product_ids ) ) { echo '<span class="featured-badge-sing">Nổi bật</span>'; } } } |
Bước 2: Thêm css để làm đẹp cho phần hiển thị
Bạn vào Giao diện => Child Theme => Theme File Editor => Chọn file Styles.css và chèn đoạn code dưới đây vào cuối file.
|
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 |
/*** Custom hien thi san pham noi bat ***/ .featured-badge { top: -20px; left: 0px; color: #000; display: flex; justify-content: center; position: absolute; font-size: 13px; text-transform: uppercase; z-index: 22; margin-left: 0px; width: 65px; align-items: center; font-weight: 600; background-color: #f3cc0a; border-radius: 12px 0; padding: 3px 0; } .featured-badge-sing { background: #fff000; color: #000; font-weight: 600; text-transform: uppercase; padding: 5px 10px; font-size: 12px; font-weight: 600; margin-top: 15px; border-radius: 12px 0; padding: 5px 8px; } |
Bấm lưu lại, như vậy là đã xong. Và thành quả sẽ tương tự như thế này:
Chúc các bạn thành công!!!!
Chủ đề: Thủ thuật WooCommerce
