Thiết Kế Website
SEO tổng thể
Sáng Tạo Nội Dung
Bộ nhận diện thương hiệuBài viết hướng dẫn thực hiện trên theme Flatsome, sử dụng Woocommerce.
Bước 1: Thêm code HTML vào vị trí cần chèn
Bạn muốn chèn box khuyến mại vào đâu thì sẽ tìm vị trí đó sẵn sàng để chuẩn bị copy đoạn HTML vào đó nha.
Theo như hình trên, box thông báo khuyến mại sẽ nằm giữa mô tả ngắn và cụm nút Add to cart. Do đó, cách nhanh nhất để thêm HTML vào sẽ là:
Trong theme Flatsome, bạn vào Giao diện -Tùy biến – Woocommerce (shop) – Product Page – HTML before Add to cart. Sau đó copy toàn bộ đoạn code HTML dưới đây paste vào đó:
|
1 2 3 4 5 6 7 8 |
<div class="khuyen-mai-hb"> <span class="tieu-de"><iclass="icon-gift"></i>Khuyến mãi đặc biệt</span> <ul> <li>Giảm 30% khi đăng ký hosting 3 năm</li> <li>Giảm 10% phí dịch vụ khi like và share website</li> <li>Tặng 01 khóa học viết bài chuẩn SEO online</li> </ul> </div> |
Bạn có thể chỉnh sửa nội dung bằng cách thay text trong các thẻ <li> bên trên nha!
Bước 2: Thêm code CSS để trang trí
Bạn vào Giao diện – Tùy biến – Style – Custom CSS sau đó thêm đoạn code CSS dưới đây vào:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.khuyen-mai-hb{ margin-bottom:2px; margin-top:2px; background:white; padding:10px; border-radius:5px; border:1pxsolid#ef0b0b; font-size:15px; width:100%; } .khuyen-mai-hb.tieu-de{ background:#e31616; padding:2px20px; margin-top:-24px; font-size:15px; font-weight:500; color:#ffffff; display:block; max-width:207px; border-radius:99px; } .khuyen-mai-hbul{ margin-bottom:4px; list-style-image:url(tick.png); } |
Bước 3: Lưu lại và hưởng thành quả
Chúc các bạn thành công, nếu gặp khó khăn gì vui lòng comment để tương tác và mình hỗ trợ sớm nhé!