Cách Tạo Mã Coupon Trong WordPress Không Dùng Plugin

Giới Thiệu về Mã Coupon và Lợi Ích của Việc Tạo Mã Coupon

• Khái niệm mã coupon: Giải thích rõ ràng về mã coupon là gì và tại sao chúng quan trọng trong việc tạo khí thế mua sắm và tương tác với khách hàng.
• Lợi ích của việc tạo mã coupon: Liệt kê các lợi ích mà mã coupon mang lại, bao gồm tăng doanh số bán hàng, tạo sự hứng thú cho khách hàng và tạo cơ hội quảng cáo miễn phí.

Lợi ích của Mã Coupon

Trong phần này, An Tran Digital có thể liệt kê những lợi ích của việc sử dụng mã coupon, bao gồm:

• Tạo sự hứng thú và tạo kích thích mua sắm.
• Tăng khả năng tương tác của khách hàng với trang web.
• Thúc đẩy doanh số bán hàng và tăng trưởng kinh doanh.
• Tạo cơ hội quảng cáo miễn phí thông qua khách hàng hạnh phúc chia sẻ ưu đãi với người khác.

Cách Tạo Mã Coupon Trong WordPress Không Cần Sử Dụng Plugin

• Bước 1: Dán đoạn code bên dưới vào file function.php

function enqueue_coupon_styles() {
    wp_enqueue_style('coupon-style', get_template_directory_uri() . '/coupon-style.css');
}
add_action('wp_enqueue_scripts', 'enqueue_coupon_styles');

function generate_coupon_shortcode($atts) {
    $attributes = shortcode_atts(array(
        'code' => '',
    ), $atts);

    $coupon_code = $attributes['code'];

    ob_start(); ?>

    <div class="coupon-container">
        <button id="coupon-button" class="coupon-button">Lấy mã coupon</button>
        <div id="countdown-container" style="display: none;">
            <div id="countdown" class="countdown"></div>
        </div>
        <div id="coupon-code" class="coupon-code" style="display: none;">
            Mã COUPON/VOUCHER là: <span id="coupon-text"><?php echo esc_html($coupon_code); ?></span>
        </div>
    </div>

    <script>
        var countdown = 10;
        var button = document.getElementById('coupon-button');
        var countdownContainer = document.getElementById('countdown-container');
        var countdownDisplay = document.getElementById('countdown');
        var couponCodeElement = document.getElementById('coupon-code');
        var couponTextElement = document.getElementById('coupon-text');
        var originalButtonColor = getComputedStyle(button).backgroundColor;

        button.addEventListener('click', function () {
            button.style.display = 'none';
            countdownContainer.style.display = 'block';
            countdownDisplay.style.backgroundColor = originalButtonColor;

            var interval = setInterval(function () {
                countdownDisplay.textContent = "Chờ " + countdown + " giây";
                countdown--;

                if (countdown < 0) {
                    clearInterval(interval);
                    countdownContainer.style.display = 'none';
                    couponCodeElement.style.display = 'block';
                    couponTextElement.style.color = "#ffcc00"; // Đổi màu thành màu vàng
                    couponTextElement.style.fontWeight = "bold"; // In đậm văn bản
                }
            }, 1000);
        });
    </script>

    <?php return ob_get_clean();
}
add_shortcode('coupon', 'generate_coupon_shortcode');

• Bước 2: Copy đoạn CSS bên dưới để trang trí

/* coupon-style.css */

/* Phần styling cho container chứa mã coupon */
.coupon-container {
    text-align: center;
    padding: 20px;
}

/* Phần styling cho nút "Lấy mã coupon" */
.coupon-button {
    background-color: #3498db; /* Màu sắc ban đầu */
    border: none;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    display: inline-block;
}

.coupon-button:hover {
    background-color: #2980b9; /* Màu sắc khi hover */
}

/* Phần styling cho phần đếm ngược */
.countdown {
    font-size: 24px;
    margin-top: 10px;
    color: white; /* Màu sắc văn bản trong đếm ngược */
    background-color: #3498db; /* Màu sắc của button */
    border-radius: 5px;
    padding: 5px 10px;
    display: inline-block;
}

/* Phần styling cho mã coupon */
.coupon-code {
    font-size: 18px;
    margin-top: 10px;
    color: white; /* Màu văn bản trong mã coupon */
    background-color: #3498db; /* Màu sắc của button */
    border-radius: 5px;
    padding: 5px 10px;
    display: inline-block;
    max-width: 100%;
}

• Bước 3: Cách hiển thị mã Coupon bằng ShortCode

Chỉ cần copy shortcode này rồi dán mã Coupon/Voucher mà bạn muốn

Xem thêm: Cách tạo Scroll Progress Bar cho website

Tạo mã Coupon cho website thông thường

Các bạn có thể xem demo bên dưới mà mình đã up lên codepen

See the Pen
Coupon with CSS by An Tran Digital (@antrandigital)
on CodePen.

Kết luận

Bằng việc mình vừa hướng dẫn cách tạo mã coupon trong wordpress mà không dùng plugin với việt dùng shortcode giúp cho tạo mã tuỳ biến dễ dàng hơn. Mong qua cách hướng dẫn này giúp các bạn có thể tìm được nhiều khách hàng hơn, nếu có phần nào chưa hiểu thì có thể để bình luận bên dưới mình sẽ giải đáp.

CHÚC CÁC BẠN THÀNH CÔNG !!!