Tạo nhãn nổi bật cho sản phẩm trong WooCommerce Featured Products

Tạo nhãn nổi bật cho sản phẩm trong WooCommerce Featured Products

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.

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.
Tạo nhãn nổi bật cho sản phẩm trong WooCommerce 5
  • 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.
Tạo nhãn nổi bật cho sản phẩm trong WooCommerce 1

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.
Tạo nhãn nổi bật cho sản phẩm trong WooCommerce 2
Trong phần chỉnh sửa giao diện, lưu ý chọn giao diện để chỉnh sửa là child theme. Và chọn các file giao diện đúng như trong bài.

Sau đó chèn đoạn code sau vào cuối trong file functions.php:

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.

Bấm lưu lại, như vậy là đã xong. Và thành quả sẽ tương tự như thế này:

Tạo nhãn nổi bật cho sản phẩm trong WooCommerce 3
Tạo nhãn nổi bật cho sản phẩm trong WooCommerce 4

Chúc các bạn thành công!!!!

Chủ đề: Thủ thuật WooCommerce

Đánh giá post

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *