An Trần Digital
No Result
View All Result
Thứ Bảy, Tháng Chín 30, 2023
  • Thủ thuật
    • All
    • Thủ thuật Blogspot/Blogger
    • Thủ thuật iOS
    • Thủ thuật Phần Mềm
    • Thủ thuật Wordpress
    Tải Astra Pro Plugin Addon miễn phí

    Tải Astra Pro Plugin Addon miễn phí

    Cách tạo menu trong admin wordpress

    Cách tạo Menu trong Admin WordPress

    Cách tạo Copy to Clipboard cho website

    Cách tạo Copy to Clipboard cho website

    Cách tạo mã coupon trong wordpress không dùng plugin

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

    • Thủ thuật Blogspot/Blogger
    • Thủ thuật Phần Mềm
    • Thủ thuật iOS
    • Thủ thuật WordPress
  • Đồ hoạ
    • All
    • Action Photoshop
    • Preset Camera Raw
    • Preset Lightroom Mobile
    • Preset Lightroom PC
    Tải Preset Camera Raw Vintage ngược nắng, cổ điển

    Tải Preset Camera Raw Vintage ngược nắng, cổ điển

    Download Cinematic Night Camera Raw Preset

    Download Cinematic Night Camera Raw Preset

    Chia sẻ bộ Preset Lightroom màu kỷ yếu đẹp cho học sinh

    Chia sẻ bộ Preset Lightroom màu kỷ yếu đẹp cho học sinh

    Share 16 bộ preset màu HongKong lightroom mobile đẹp

    Share 16 bộ preset màu HongKong lightroom mobile đẹp

    • Action Photoshop
    • Preset Camera Raw
    • Preset Lightroom Mobile
    • Preset Lightroom PC
  • Themes
    • All
    • Blogger/Blogspot
    • Wordpress
    Download Theme Porto Wordpress miễn phí

    Download Theme Porto WordPress miễn phí

    Tải theme Avada wordpress

    Tải theme Avada wordpress miễn phí

    Template blogspot bất động sản nhà đất miễn phí

    Share 5 template blogspot bất động sản nhà đất miễn phí

    Share template blogspot tin tức

    Share template blogspot tin tức Zing News

    • Blogger/Blogspot
    • WordPress
  • Khoá học miễn phí
    • All
    • Adobe
    • Kỹ Năng Đời Sống
    • Lập Trình - Web
    • Marketing - SEO
    Share khoá học Figma miễn phí

    Share khoá học Figma từ cơ bản đến thực chiến

    Khoá học tiếng Trung miễn phí

    Chia sẻ khoá học tiếng Trung dành cho người mới bắt đầu

    chia-sẻ-khoá-học-dựng-nhân-vật-hoạt-hình-3D-với-Blender-antrandigital

    Chia sẻ khoá học Dựng nhân vật hoạt hình 3D với Blender

    khoa-hoc-photoshop-thiet-ke-cho-giao-dien-website-antrandigital

    Hướng dẫn dùng Photoshop thiết kế cho giao diện website

    • Adobe
    • Kỹ Năng Đời Sống
    • Lập Trình – Web
    • Marketing – SEO
  • Source Code
  • Mã giảm giá SHOPEE, TIKI
Subscribe
An Trần Digital
  • Thủ thuật
    • All
    • Thủ thuật Blogspot/Blogger
    • Thủ thuật iOS
    • Thủ thuật Phần Mềm
    • Thủ thuật Wordpress
    Tải Astra Pro Plugin Addon miễn phí

    Tải Astra Pro Plugin Addon miễn phí

    Cách tạo menu trong admin wordpress

    Cách tạo Menu trong Admin WordPress

    Cách tạo Copy to Clipboard cho website

    Cách tạo Copy to Clipboard cho website

    Cách tạo mã coupon trong wordpress không dùng plugin

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

    • Thủ thuật Blogspot/Blogger
    • Thủ thuật Phần Mềm
    • Thủ thuật iOS
    • Thủ thuật WordPress
  • Đồ hoạ
    • All
    • Action Photoshop
    • Preset Camera Raw
    • Preset Lightroom Mobile
    • Preset Lightroom PC
    Tải Preset Camera Raw Vintage ngược nắng, cổ điển

    Tải Preset Camera Raw Vintage ngược nắng, cổ điển

    Download Cinematic Night Camera Raw Preset

    Download Cinematic Night Camera Raw Preset

    Chia sẻ bộ Preset Lightroom màu kỷ yếu đẹp cho học sinh

    Chia sẻ bộ Preset Lightroom màu kỷ yếu đẹp cho học sinh

    Share 16 bộ preset màu HongKong lightroom mobile đẹp

    Share 16 bộ preset màu HongKong lightroom mobile đẹp

    • Action Photoshop
    • Preset Camera Raw
    • Preset Lightroom Mobile
    • Preset Lightroom PC
  • Themes
    • All
    • Blogger/Blogspot
    • Wordpress
    Download Theme Porto Wordpress miễn phí

    Download Theme Porto WordPress miễn phí

    Tải theme Avada wordpress

    Tải theme Avada wordpress miễn phí

    Template blogspot bất động sản nhà đất miễn phí

    Share 5 template blogspot bất động sản nhà đất miễn phí

    Share template blogspot tin tức

    Share template blogspot tin tức Zing News

    • Blogger/Blogspot
    • WordPress
  • Khoá học miễn phí
    • All
    • Adobe
    • Kỹ Năng Đời Sống
    • Lập Trình - Web
    • Marketing - SEO
    Share khoá học Figma miễn phí

    Share khoá học Figma từ cơ bản đến thực chiến

    Khoá học tiếng Trung miễn phí

    Chia sẻ khoá học tiếng Trung dành cho người mới bắt đầu

    chia-sẻ-khoá-học-dựng-nhân-vật-hoạt-hình-3D-với-Blender-antrandigital

    Chia sẻ khoá học Dựng nhân vật hoạt hình 3D với Blender

    khoa-hoc-photoshop-thiet-ke-cho-giao-dien-website-antrandigital

    Hướng dẫn dùng Photoshop thiết kế cho giao diện website

    • Adobe
    • Kỹ Năng Đời Sống
    • Lập Trình – Web
    • Marketing – SEO
  • Source Code
  • Mã giảm giá SHOPEE, TIKI
No Result
View All Result
An Trần Digital
No Result
View All Result
Home Thủ thuật Thủ thuật Wordpress

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

by An Tran
in Thủ thuật Wordpress
Reading Time: 5 mins read
A A
Cách tạo mã coupon trong wordpress không dùng plugin

Nội dung bài viết

  1. Giới Thiệu về Mã Coupon và Lợi Ích của Việc Tạo Mã Coupon
  2. Lợi ích của Mã Coupon
  3. Cách Tạo Mã Coupon Trong WordPress Không Cần Sử Dụng Plugin
  4. Tạo mã Coupon cho website thông thường
  5. Kết luận

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ạn có thể tuỳ chỉnh theo ý muốn:
– var countdown = 10: bạn muốn đếm ngược chỉ 5 giây thì đổi số 10 thành số 5
– #ffcc00: thay thành mã màu khác cho coupon
  • 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

[coupon code=”MAGIAMGIA”]
Trong đó: MAGIAMGIA bạn thay mã của bạn là được
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 !!!

Đánh giá post
Tags: cách tạo mã coupon trong wordpress không dùng plugintạo mã coupon không dùng plugin
Previous Post

Cách tạo Scroll Progress Bar cho website

Next Post

Cách tạo Copy to Clipboard cho website

An Tran

An Tran

Tôi là An Trần, thuộc thế hệ 9X. Hiện tại đang làm nhân viên cắt cỏ tại sân Old Trafford.

Related Posts

Tải Astra Pro Plugin Addon miễn phí
Thủ thuật Wordpress

Tải Astra Pro Plugin Addon miễn phí

07/09/2023
Cách tạo menu trong admin wordpress
Thủ thuật Wordpress

Cách tạo Menu trong Admin WordPress

27/08/2023
Cách tạo Copy to Clipboard cho website
Thủ thuật Wordpress

Cách tạo Copy to Clipboard cho website

21/08/2023
Next Post
Cách tạo Copy to Clipboard cho website

Cách tạo Copy to Clipboard cho website

Subscribe
Notify of
guest

Hãy dùng tên của bạn khi comment, không sử dụng keyword trong ô Tên. Xin cảm ơn!

guest

Hãy dùng tên của bạn khi comment, không sử dụng keyword trong ô Tên. Xin cảm ơn!

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.

0 Comments
Inline Feedbacks
View all comments
  • Trending
  • Comments
  • Latest
Preset camera raw photoshop free

2000+ Preset Camera Raw chỉnh màu ảnh đẹp nhất

25/06/2020
chia-se-preset-lightroom-mobile-sieu-dep-cho-chinh-anh

1000+ Chia sẻ Preset Lightroom Mobile siêu đẹp free cho chỉnh ảnh

04/12/2020
share-preset-lightroom-tone-xam-son-tung-antrandigital

Share Preset Lightroom tone xám Sơn Tùng M-TP

17/02/2021
Template blogspot bán hàng miễn phí

Share 5 Template Blogspot bán hàng miễn phí mới nhất

12
Preset camera raw photoshop free

2000+ Preset Camera Raw chỉnh màu ảnh đẹp nhất

10
tao-hieu-ung-dep-cho-anh-bang-photoshop-grunge-action-antrandigital

Tạo hiệu ứng ảnh đẹp với Grunge Photoshop Action

7
Tải Astra Pro Plugin Addon miễn phí

Tải Astra Pro Plugin Addon miễn phí

07/09/2023
Cách tạo menu trong admin wordpress

Cách tạo Menu trong Admin WordPress

27/08/2023
Cách tạo Copy to Clipboard cho website

Cách tạo Copy to Clipboard cho website

21/08/2023


An Trần Digital là blog cá nhân chia sẻ preset lightroom, camera raw từ máy tính đến mobile, template blogspot, theme wordpress và các khoá học khác hoàn toàn miễn phí.

DMCA.com Protection Status

Comments gần đây

  • An Tran
    Quản lý
    trong Chia sẻ khoá học Python miễn phí chất lượng từ zero đến hero
  • Ben trong Chia sẻ khoá học Python miễn phí chất lượng từ zero đến hero
  • An Tran
    Quản lý
    trong Share 5 template blogspot bất động sản nhà đất miễn phí

Xem nhiều nhất ngày

[Plugin Photoshop] Tải Delicious Retouch 5 V6.5 việt hoá cho Windows

2000+ Preset Camera Raw chỉnh màu ảnh đẹp nhất

Về An Trần Digital

Giới thiệu về tôi

Bảo mật

Hợp tác

Bản quyền

Liên hệ

Donate

© 2023 An Trần Digital - Powered by An Trần.

No Result
View All Result
  • Thủ thuật
    • Thủ thuật Blogspot/Blogger
    • Thủ thuật Phần Mềm
    • Thủ thuật iOS
    • Thủ thuật WordPress
  • Đồ hoạ
    • Action Photoshop
    • Preset Camera Raw
    • Preset Lightroom Mobile
    • Preset Lightroom PC
  • Themes
    • Blogger/Blogspot
    • WordPress
  • Khoá học miễn phí
    • Adobe
    • Kỹ Năng Đời Sống
    • Lập Trình – Web
    • Marketing – SEO
  • Source Code
  • Mã giảm giá SHOPEE, TIKI

© 2023 An Trần Digital - Powered by An Trần.

wpDiscuz

Đồng ý sử dụng cookie

Những cookie này giúp trang web ghi nhớ thông tin về lần truy cập của bạn. Nhờ đó, bạn có thể truy cập trang web này dễ dàng hơn vào lần tới và trang web cũng trở nên hữu ích hơn cho bạn. Tìm hiểu thêm