Tạo khung khuyến mãi đẹp trong Flatsome

Tối ưu trải nghiệm trang sản phẩm: Hướng dẫn tạo khung khuyến mãi chuyên nghiệp trong Flatsome

Trong thương mại điện tử, việc làm nổi bật các thông tin ưu đãi ngay tại trang sản phẩm là yếu tố then chốt để thúc đẩy tỷ lệ chuyển đổi. Với người dùng sử dụng theme Flatsome, bạn hoàn toàn có thể tùy biến giao diện này một cách linh hoạt mà không cần phụ thuộc vào các plugin nặng nề. Bài viết này, STAR WAR Digital Solutions sẽ hướng dẫn bạn cách tạo khung khuyến mãi chuyên nghiệp, giúp thông điệp bán hàng của bạn hiển thị ấn tượng và thu hút hơn.

Bước 1: Thiết lập cấu trúc HTML cho khung ưu đãi

Để bắt đầu, bạn cần chèn nội dung khuyến mãi vào vị trí ngay dưới nút "Thêm vào giỏ hàng". Flatsome hỗ trợ sẵn tính năng này trong trình tùy biến mà không cần can thiệp sâu vào code PHP.

Thực hiện theo các bước sau:

• Truy cập vào Giao diện (Appearance) -> Tuỳ biến (Customize).
• Chọn mục WooCommerce -> Product Page.
• Tìm đến phần HTML after Add To Cart button và dán đoạn mã HTML dưới đây vào:

<div class="khuyen-mai-starwar">
    <span class="tieu-de"><i class="icon-gift"></i> ƯU ĐÃI ĐẶC BIỆT</span>
    <strong>Quyền lợi dành cho khách hàng:</strong><br>
    1. Chiết khấu hấp dẫn cho đơn hàng số lượng lớn.<br>
    2. Hỗ trợ giao hàng nhanh nội thành.<br>
    3. Hỗ trợ kỹ thuật 24/7.<br>
    4. Cam kết sản phẩm chính hãng 100%.
</div>

Bước 2: Định hình giao diện với CSS

Sau khi đã có khung HTML, chúng ta cần thêm các thuộc tính CSS để làm nổi bật khung khuyến mãi. Bạn có thể dán đoạn mã này vào Giao diện -> Tuỳ biến -> Additional CSS.

/* Khung khuyến mãi STAR WAR */
.khuyen-mai-starwar {
    margin-top: 30px;
    margin-bottom: 15px;
    background: #fff;
    padding: 20px 15px 15px 15px;
    border-radius: 8px;
    border: 1px solid #d9534f;
    font-size: 14px;
    width: 100%;
    position: relative;
}
.khuyen-mai-starwar .tieu-de {
    background: #d9534f;
    padding: 5px 20px;
    position: absolute;
    top: -15px;
    left: 15px;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    border-radius: 20px;
    text-transform: uppercase;
}
.khuyen-mai-starwar strong {
    display: block;
    margin-bottom: 10px;
}

Kết luận

Chỉ với vài thao tác đơn giản, bạn đã hoàn thiện việc thiết kế khung khuyến mãi chuyên nghiệp cho website của mình. Việc trình bày thông tin rõ ràng không chỉ giúp khách hàng dễ dàng nắm bắt lợi ích mà còn tạo cảm giác tin cậy cho thương hiệu. Sau khi lưu lại, đừng quên xóa cache trình duyệt hoặc cache website để thấy thay đổi ngay lập tức.

Nếu bạn cần tư vấn giải pháp tối ưu hóa website hoặc triển khai các tính năng tùy chỉnh phức tạp hơn trên nền tảng WordPress/Flatsome, đội ngũ kỹ thuật tại STAR WAR Digital Solutions luôn sẵn sàng đồng hành cùng doanh nghiệp của bạn.