Bài viết này Themewp.vn sẽ hướng dẫn bạn tạo khung khuyến mãi đẹp trong trang sản phẩm khi dùng Theme Flatsome. Giúp trang trí website bán hàng của bạn cũng như là thu hút khách hàng hơn. 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.
Tạo khung khuyến mãi đẹp trong Flatsome
Bước 1: Chèn code HTML vào trang product
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
Code HTML:
<div class=”khuyen-mai-themewpvn″><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: Thêm code CSS để làm đẹp khung khuyến mãi
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-themewpvn { margin-bottom: 15px; margin-top: 30px; background: white; padding: 10px; border-radius: 5px; border: 1px solid #ef0b0b; font-size: 15px; width: 100%; } .khuyen-mai-themewpvn .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-themewpvn ul { margin-bottom: 4px; }
Vậy là xong rồi, các bạn hãy clear cache, F5lại và tận hưởng thành quả nhé.
- Thêm hiệu ứng ánh sáng khi hover ảnh sản phẩm Woocommerce bằng CSS
- Tổng hợp 10 cách tăng tốc Website WordPress không thể bỏ qua
- Cài đặt Redis Cache với Unix Socket cho website WordPress
- Có nên sử dụng Plugin và Theme được chia sẻ trên mạng không?
- Ưu đãi khi mua Theme WordPress duy nhất chỉ có tại ThemeWP.vn