Làm thế nào để tạo phần chứng nhận (badges) trên sản phẩm trong Flatsome?
Tạo phần chứng nhận (badges) cho sản phẩm là một cách tuyệt vời để làm nổi bật các sản phẩm đặc biệt như sản phẩm mới, bán chạy, giảm giá, hoặc các sản phẩm nổi bật khác. Flatsome không có tính năng chứng nhận (badges) tích hợp sẵn trong trình chỉnh sửa mặc định, nhưng bạn có thể thực hiện điều này thông qua một số phương pháp. Dưới đây là hướng dẫn từng bước để thêm chứng nhận (badges) trên sản phẩm trong Flatsome:
1. Sử Dụng Các Tính Năng Mặc Định của WooCommerce
WooCommerce cho phép bạn sử dụng các thuộc tính của sản phẩm để tạo chứng nhận, nhưng không có tính năng chứng nhận (badges) cụ thể. Bạn có thể sử dụng các plugin bổ sung để thêm tính năng này.
2. Sử Dụng Plugin Tạo Chứng Nhận (Badges)
Để thêm chứng nhận cho sản phẩm, bạn có thể sử dụng các plugin hỗ trợ tính năng này. Dưới đây là các bước để cài đặt và cấu hình một plugin chứng nhận:
a. Cài Đặt Plugin Chứng Nhận
- Chọn và Cài Đặt Plugin:
- Một số plugin phổ biến để thêm chứng nhận cho sản phẩm bao gồm WooCommerce Product Badge Manager, YITH WooCommerce Badge Management, hoặc WooCommerce Boost Sales.
- Đăng nhập vào WordPress Dashboard.
- Vào Plugins > Add New.
- Tìm kiếm tên plugin và nhấp vào Install Now.
- Kích hoạt plugin sau khi cài đặt.
- Cấu Hình Plugin:
- Vào phần cài đặt của plugin (thường nằm dưới menu WooCommerce hoặc tên plugin trong Dashboard).
- Tạo các chứng nhận mới và tùy chỉnh kiểu dáng, màu sắc, và nội dung của chứng nhận theo nhu cầu của bạn.
b. Thêm Chứng Nhận (Badges) Vào Sản Phẩm
- Cập Nhật Sản Phẩm:
- Vào Products > All Products và chọn sản phẩm mà bạn muốn thêm chứng nhận.
- Trong phần chỉnh sửa sản phẩm, bạn sẽ thấy các tùy chọn để gán chứng nhận từ plugin mà bạn đã cài đặt.
- Lưu Thay Đổi:
- Lưu các thay đổi và kiểm tra trang sản phẩm để đảm bảo chứng nhận hiển thị đúng cách.
3. Tạo Chứng Nhận (Badges) Thủ Công Với CSS
Nếu bạn không muốn sử dụng plugin, bạn có thể tạo chứng nhận (badges) thủ công bằng cách sử dụng CSS và HTML tùy chỉnh.
- Thêm HTML Cho Chứng Nhận:
- Vào Products > All Products và chọn sản phẩm mà bạn muốn thêm chứng nhận.
- Thêm HTML cho chứng nhận vào mô tả sản phẩm hoặc sử dụng các trường tùy chỉnh nếu có.
- Thêm CSS Tùy Chỉnh:
- Vào Appearance > Customize > Additional CSS hoặc Appearance > Theme Editor để thêm mã CSS tùy chỉnh.
- Thêm mã CSS để định dạng chứng nhận, ví dụ:
css
.product-badge {
position: absolute;
top: 10px;
left: 10px;
background-color: #ff0000;
color: #ffffff;
padding: 5px 10px;
border-radius: 5px;
font-size: 14px;
}
- Đảm bảo rằng bạn đã thêm lớp CSS này vào HTML chứng nhận của sản phẩm.
4. Sử Dụng UX Builder
- Mở UX Builder:
- Đăng nhập vào WordPress Dashboard.
- Vào trang sản phẩm mà bạn muốn thêm chứng nhận.
- Nhấp vào Edit with UX Builder để mở trình chỉnh sửa kéo và thả của Flatsome.
- Thêm Phần Tử Tùy Chỉnh:
- Kéo và thả một Text Block hoặc Custom HTML vào khu vực mong muốn.
- Thêm HTML cho chứng nhận và tùy chỉnh bằng CSS như hướng dẫn ở trên.
- Lưu và Cập Nhật:
- Lưu các thay đổi và cập nhật trang sản phẩm để chứng nhận hiển thị.
Lưu Ý
- Hiệu Suất: Đảm bảo rằng việc thêm chứng nhận không làm giảm hiệu suất của trang sản phẩm.
- Thiết Bị Di Động: Kiểm tra hiển thị của chứng nhận trên các thiết bị di động để đảm bảo chúng không bị che khuất hoặc không hiển thị đúng cách.
Bằng cách làm theo các bước trên, bạn có thể dễ dàng tạo và thêm chứng nhận (badges) vào sản phẩm trong Flatsome, giúp làm nổi bật các sản phẩm đặc biệt và thu hút sự chú ý của khách hàng.
