Để đăng sản phẩm có nhiều biến thể khác nhau về giá, trọng lượng, dung tích, màu sắc, kích cỡ, chất liệu,… bạn cần cập nhật thông tin chi tiết cho từng biến thể. Điều này sẽ phức tạp hơn so với đăng sản phẩm đơn giản thông thường. Tuy nhiên, bài viết này sẽ hướng dẫn bạn cách đăng sản phẩm có biến thể trên Flatsome phiên bản 3.14 trở lên hoặc các plugin Additional Variation Images Gallery for WooCommerce hoặc WooSwatches – Woocommerce Color or Image Variation Swatches có thể sử dụng tương tự.
Bước 1: Bật tùy chọn nhiều biến thể
Đi đến Admin > Flatsome > Advanced > Woocommerce
Chọn ô VARIATION SWATCHES và lưu cài đặt.
Bước 2: Tạo thuộc tính cho sản phẩm
Đi đến Admin > Sản phẩm > Các thuộc tính
Có thể tạo các thuộc tính như trọng lượng, dung tích, màu sắc, kích thước, chất liệu, thương hiệu,.. Theo định nghĩa của bạn. Những thuộc tính này có thể khác nhau về giá hoặc đơn giản là bạn muốn tách ra thành 2 sản phẩm riêng biệt để khách hàng lựa chọn.
Tạo thuộc tính
Tên: Tên thuộc tính
Đường dẫn tĩnh: Không cần quan tâm
Cho phép lưu trữ: Chọn để lưu trữ và sử dụng nhiều lần.
Loại: Có ba lựa chọn:
– UX Color: Hiển thị thuộc tính theo màu sắc
– UX Image: Hiển thị thuộc tính bằng hình ảnh
– UX Label: Hiển thị thuộc tính dưới dạng chữ (text)
Swatch size: Kích thước hiển thị của thuộc tính trong trang chi tiết sản phẩm, sau này có thể tinh chỉnh.
Swatch shape: Kiểu hình dạng hiển thị thuộc tính trong trang chi tiết sản phẩm, sau này có thể tinh chỉnh.
Use variation images: Sử dụng ảnh của thuộc tính sản phẩm làm ảnh hiển thị của thuộc tính.
Bước 3: Thiết lập loại thuộc tính sản phẩm
Để thêm các thuộc tính cho sản phẩm, bạn chỉ cần nhấp vào đây.

Ví dụ, nếu bạn muốn thêm thuộc tính màu sắc, bạn có thể chọn màu sắc trong phần UX Color bên dưới, tương tự với UX Label hay UX Image.
Bước 4: Tạo sản phẩm có nhiều biến thể
Với dạng sản phẩm đơn giản nếu bạn dùng UX Image thì tại phần Cấu hình chủng loại của thuộc tính sản phẩm bạn cần chọn mình ảnh cho từng thuộc tính.
Với dạng sản phẩm có biến thể thì các thuộc tính bạn tạo sẽ được lấy thông tin, hình ảnh từ phần Các biến thể, ví dụ dưới đây là cài đặt cơ bản



Phần Màu sắc để dạng UX Image
Phần Size mình để dạng UX Label
Và đây là kết quả

Nếu bạn muốn hiển thị thuộc tính màu sắc hoặc bất cứ thuộc tính nào khác như thế này:

Bạn làm như sau nhé: Giao diện > Tùy biến > Woocommerce > Danh mục sản phẩm
Kéo xuống đến phần Swatches và cấu hình như mình là sẽ được như bên trên.

Chúc bạn thành công!
- Zalo lỗi tài khoản này tạm thời không thể sử dụng chức năng này và cách khắc phục
- Cách tạo bài viết mới trên website wordpress
- Hộp thư Gmail sắp đầy? Cách dọn dẹp & giải phóng dung lượng Gmail triệt để không cần mua thêm
- Cách kết nối tích hợp vận chuyển online vào website WordPress
- Kinh nghiệm lựa chọn Hosting cho website WordPress tốt và rẻ nhất

Website Studio Chụp Ảnh Cưới 04 - Nhiếp Ảnh - Full Source Code
Website Mỹ Phẩm - Thẩm Mỹ - Trang Điểm 04 - Shop Online - Full Source Code
Website agency 4 có chức năng bán theme plugin - Full Source Code
Website Bán Quạt Trần - Thiết Bị Làm Mát - Điện Gia Dụng - Shop Online - Full Source Code
Website Bất Động Sản 28 - Mua Bán Nhà Đất - Full Source Code
Website Kiến Trúc Xây Dựng 03 - Thiết Kế Thi Công - Full Source Code
Website Quà Tết 2 - Shop Online - Full Source Code
Website Thời Trang Trẻ Em - Shop Online - Full Source Code
Website Phòng Khám Y Tế Dược Phẩm 07 - Giới Thiệu Dịch Vụ - Full Source Code
Website Sản Phẩm Số - MMO - Key Phần Mềm - Shop Online - Full Source Code
Website Bán Điện Thoại Theo Hãng - Shop Online - Full Source Code
Website Thực Phẩm Chức Năng 09 - Shop Online - Full Source Code
Website Vệ Sinh Công Nghiệp 1 - Dịch Vụ - Full Source Code
Website Thời Trang 35 - Shop Online - Full Source Code
Website Dịch Vụ Hàn Cáp Quang - Viễn Thông - Full Source Code
Website Trái Cây Hoa Quả Sấy - Đặc Sản - Full Source Code
Website Bán Đồng Hồ Thời Trang - Shop Online - Full Source Code
Website Studio Chụp Ảnh Cưới 06 - Nhiếp Ảnh - Quay Phim Sự Kiện - Full Source Code
Website Điện Máy Công Nghệ 4 - Shop Online - Full Source Code
Website Điện Máy 08 - Gia Dụng - Shop Online - Full Source Code
Website Bán Túi Xách - Shop Online - Full Source Code
Website Shop Mỹ Phẩm 07 - Shop Online - Full Source Code
Website Bệnh Viện Phòng Khám - Dịch Vụ Y Tế - Full Source Code
Website Bán Nội Thất Sofa - Shop Online - Full Source Code
Website Công Ty Thực Phẩm - Sản Xuất - Full Source Code
Website Nhà Thuốc - Dược Phẩm - Shop Online - Full Source Code
Website Công Ty Vận Tải Quốc Tế - Logistics - Full Source Code
Website Giới Thiệu Sản Phẩm Thiết Bị Y Tế - Full Source Code
Website Tin Tức 17 - Blog - Full Source Code
Website Giới Thiệu Khóa Học Tiếng Anh - Full Source Code
Website Mỹ Phẩm - Thẩm Mỹ - Trang Điểm 02 - Shop Online - Full Source Code
Website Mỹ Phẩm Thẩm Mỹ - Shop Online - Full Source Code
Website Bán Máy Tính Laptop 10 - Shop Online - Full Source Code
Website Dịch Vụ Taxi Vận Chuyển - Full Source Code
Website Bán Máy Lọc Nước 04 - Shop Online - Full Source Code
Website Tư Vấn Du Học - Full Source Code
Website Công Ty Xây Dựng - Doanh Nghiệp - Full Source Code
Website Kho Gạch Men Giá Rẻ - Vật Liệu Xây Dựng - Shop Online - Full Source Code
Website Tạp Hóa - Văn Phòng Phẩm - Shop Online - Full Source Code
Website Bán Camera Thiết Bị Điện Tử - Shop Online - Full Source Code
Website Dịch Vụ Thiết Kế In Ấn 02 - Full Source Code
Website Giới Thiệu Công Ty Xây Dựng - Full Source Code
Website Thực Phẩm Chức Năng Gym - Shop Online - Full Source Code
Website Nội Thất 43 - Thiết Kế Thi Công - Full Source Code
Website Nội Thất 36 - Nội Thất Cao Cấp - Shop Online - Full Source Code
Website Bán Nội Thất Đồ Cũ - Shop Online - Full Source Code
Flatsome Multi Purpose Responsive WooCommerce Theme
All in One WP Migration Unlimited Extension
Khóa học Bí Kíp Xây Dựng Website Bán Hàng Trực Tuyến với WordPress và Theme Flatsome
Dịch Vụ Cài Đặt Website Từ Source Code 










