Hướng dẫn thay đổi hiển thị cho biến thể trên theme Flatsome
Hi mọi người. Lâu quá không viết bài chia sẻ, nay có làm phần này thì thấy khá khá hay. Có thể nhiều anh em sẽ chưa để ý tới phần này.
Demo tại đây nha, theme mẹ và bé
Cách thay đổi lại hiển thị cho biến thể sản phẩm trên Flatsome khi sử dụng tính năng Variation Swatch(bật tại Flatsome > Advanced > Woocommerce > bật variation swatches.).
Sau khi đã bật lên bạn có thể sử dụng được tính năng này.
Bây giờ đi vào phần style lại cho nó như tiêu đề bài viết ha. Bỏ hết code css sau vào style.css của theme.
form.variations_form .ux-swatches {
display: grid;
grid-template-columns: auto auto;
grid-gap: 10px;
padding: 0;
width: 100%;
}
form.variations_form .ux-swatches .ux-swatch__text{
display: block
}
form.variations_form .ux-swatch {
width: 100%;
padding: 5px;
height: auto;
display: flex;
justify-content: flex-start;
align-items: center;
}
form.variations_form .ux-swatch > *:not(.ux-swatch__text) {
width: 30px;
height: 30px;
margin-right: 8px;
}
Ok vài dòng css là đã xong rồi. Xoá cache và kiểm tra lại xem nhé mọi người!