Việc tạo khung đưa ra các khuyến mãi lớn, ưu đãi đặc biệt khi mua hàng không còn là vấn đề xa lạ với các web bán hàng online. Hiện tại với 2 nền tảng cho phép can thiệp và thay đổi giao diện trang sản phẩm như UX builder hoặc elementor thì việc thêm hoặc design mới trang sản phẩm không còn là vấn đề gì đó khó khăn nữa.

Hướng dẫn tạo khung khuyến mãi đẹp trong flatsome

Công việc cần làm:

Mình sẽ cần chèn code html và css cho nó. Làm cách này, trực tiếp, nó sẽ ngon và nhanh hơn so với việc dùng plugin. Tốt cho web chuẩn SEO nha các bác.

Bước 1:

Dán đoạn css này vào mục thêm css (additional Css) của mục tùy biến (customize).

.khuyen-mai-qnet88 { margin-bottom: 2px; margin-top: 2px; background: white; padding: 10px; border-radius: 5px; border: 1px solid #ef0b0b; font-size: 15px; width: 100%; }
// Giải thích: Tạo khung có border đỏ cho phần khuyến mại
.khuyen-mai-qnet88 .tieu-de { background: #e31616; padding: 2px 20px; margin-top: -24px; font-size: 15px; font-weight: 500; color: #ffffff; display: block; max-width: 207px; border-radius: 99px; }
// Giải thích: Tạo ô tiêu đề
.khuyen-mai-qnet88 ul {
margin-bottom: 4px;
list-style-image: url(https:qnet88.com/tick.png); /* nút hình ảnh dấu tick, lấy cái nào thì google nhé.*/
/* Giải thích: Tạo dấu tick cho mỗi dòng khuyến mại*/
}

.khuyen-mai-qnet88 { margin-bottom: 2px; margin-top: 2px; background: white; padding: 10px; border-radius: 5px; border: 1px solid #ef0b0b; font-size: 15px; width: 100%; }

// Giải thích: Tạo khung có border đỏ cho phần khuyến mại

.khuyen-mai-qnet88 .tieu-de { background: #e31616; padding: 2px 20px; margin-top: -24px; font-size: 15px; font-weight: 500; color: #ffffff; display: block; max-width: 207px; border-radius: 99px; }

// Giải thích: Tạo ô tiêu đề

.khuyen-mai-qnet88 ul {

margin-bottom: 4px;

list-style-image: url(https:qnet88.com/tick.png); /* nút hình ảnh dấu tick, lấy cái nào thì google nhé.*/

/* Giải thích: Tạo dấu tick cho mỗi dòng khuyến mại*/

}

Bước 2:

Chèn tiếp đoạn html này vào trước hoặc sau add to cart. như hình minh họa phía dưới.

/* Code để hiện ra khuyến mại*/

1	/* Code để hiện ra khuyến mại*/

<div class=”khuyen-mai-qnet88″> <span class=”tieu-de”><i class=”icon-gift”></i> Khuyến mãi đặc biệt</span> </div>

Chú ý: là dùng advanced custom field.

Nguồn tham khảo:

Chưa phân loại

Hướng dẫn tạo khung khuyến mãi đẹp WOO trong flatsome

Công việc cần làm:

Bước 1:

Bước 2:

Trả lời Hủy

LIÊN KẾT NHANH

DỊCH VỤ CỦA CÔNG MINH WEB

THÔNG TIN LIÊN HỆ

Công việc cần làm:

Bước 1:

Bước 2:

One thought on “Hướng dẫn tạo khung khuyến mãi đẹp WOO trong flatsome”

Trả lời Hủy