Thiết Kế Website

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

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ôm nay mình hướng dẫn bạn tạo khung khuyến mại đẹp trên trang sản phẩm Flatsome đơn giản nhất.

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.

1. Thêm CSS tùy chỉnh

Các bạn vào Advanced => Custom CSS. Sau đó thêm đoạn CSS dưới đây vào mục ALL SCREENS

CSS tùy chỉnh:

.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://isharevn.net/wp-content/uploads/2021/05/tick.png);
/* Giải thích: Tạo dấu tick cho mỗi dòng khuyến mại*/
}

2. Thêm code khuyến mại vào trước hoặc sau Add to card (thêm vào giỏ)

Cũng trong Advanced => Woocommerce, các bạn dán đoạn code khuyến mại dưới đây vào trước hoặc sau nút Add to Cart như hình dưới.

Code khuyến mại:

<div class=”khuyen-mai-qnet88″> <span class=”tieu-de”><i class=”icon-gift”></i> ƯU ĐÃI LỚN</span>
<strong>Để chúng tôi hỗ trợ bạn nhanh nhất:</strong><br>
1. Chiết khấu cao cho đơn hàng doanh nghiệp, đơn hàng lớn<br>
2. Giao hàng miễn phí trong nội thành.<br>
3. Thanh toán khi nhận hàng.<br>
4. Thiết kế logo theo yêu cầu tặng khách hàng.<br>
5. Hàng cam kết chuẩn, chính hãng.
</div>

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

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 *

Back to top button