[Hướng dẫn] Cách tạo khung khuyến mãi flatsome cực đẹp

Cách tạo khung khuyến mãi flatsome cực đẹp

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.

Cách tạo khung khuyến mãi Flatsome:

Bước 1: Chèn code html vào trang sản phẩm

Các bạn hãy truy cập đường dẫn Giao diện -> Tuỳ biến -> Woocommerce -> Product Page và kéo xuống dưới cùng để thêm đoạn code vào mục HTML after Add To Cart button

Paste đoạn code này vào

<div class=”khuyen-mai-flatsome″><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>

Bước 2: Chèn CSS để làm đẹp box quà tặng

Các bạn có thể chèn đoạn code css này vào file style.css hoặc theo đường dẫn Giao diện -> Tuỳ biến -> Add CSS

/*-------------------Khuyến mãi CSS ------------*/
.khuyen-mai-flatsome {
margin-bottom: 15px;
margin-top: 30px;
background: white;
padding: 10px;
border-radius: 5px;
border: 1px solid #ef0b0b;
font-size: 15px;
width: 100%;
}
.khuyen-mai-flatsome .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;
}
.khuyen-mai-flatsome ul {
margin-bottom: 4px;
}

Xong rồi, F5 lại và tận hưởng thành quả thôi nào

Nguồn: flatsomea-z