Thủ thuật wordpress

Hướng Dẫn Tạo Mã Giảm Giá Bằng ACF Không Cần Dùng Plugin thêm plugin

Đăng vào Tháng 9 27, 2024Tháng mười một 8, 2024 bởi admin

admin

27/09/2024

4 Phút đọc

343 Lượt xem

Đánh giá

4.5/5 - (100 bình chọn)

Trong bài viết này, mình sẽ hướng dẫn bạn cách tạo mã giảm giá trên WordPress bằng cách sử dụng Advanced Custom Fields (ACF) mà không cần cài đặt thêm plugin. Đây là một phương pháp gọn nhẹ, đơn giản và giúp tối ưu hóa tốc độ của website. Bài viết này sẽ hướng dẫn từng bước cách tạo và hiển thị mã giảm giá trên website của bạn.

Hướng Dẫn Tạo Mã Giảm Giá Bằng ACF Không Cần Dùng Plugin

Yêu Cầu Trước Khi Bắt Đầu

Đảm bảo rằng plugin Advanced Custom Fields (ACF) đã được cài đặt và kích hoạt.
Một chút kiến thức cơ bản về PHP và WordPress để tùy chỉnh theo nhu cầu.

Hướng Dẫn Tạo Mã Giảm Giá Bằng ACF

1. Tạo Trang Quản Lý Mã Giảm Giá

Đầu tiên, bạn cần thêm trang tùy chọn cho mã giảm giá bằng cách sử dụng đoạn mã sau trong file functions.php của theme:

// Đảm bảo rằng ACF đã được cài đặt và kích hoạt
if (function_exists('acf_add_options_page')) {
    // Thêm trang tùy chọn
    acf_add_options_page(array(
        'page_title' => 'Quản Lý Mã Giảm Giá',
        'menu_title' => 'Mã Giảm Giá',
        'menu_slug'  => 'manage_coupons',
        'capability' => 'manage_options',
        'redirect'   => false,
    ));
}

// Đảm bảo rằng ACF đã được cài đặt và kích hoạt

if (function_exists('acf_add_options_page')) {

// Thêm trang tùy chọn

acf_add_options_page(array(

'page_title' => 'Quản Lý Mã Giảm Giá',

'menu_title' => 'Mã Giảm Giá',

'menu_slug' => 'manage_coupons',

'capability' => 'manage_options',

'redirect' => false,

));

}

2. Thêm Các Trường ACF

Sau khi đã tạo trang tùy chọn, bạn cần thêm các trường cần thiết để nhập dữ liệu mã giảm giá. Chèn đoạn mã dưới đây vào functions.php:

Vui lòng đăng nhập hoặc đăng ký tài khoản để xem nội dung này

Sau khi tạo, chúng ta sẽ có một trang như sau:

3. Tạo Shortcode Để Hiển Thị Mã Giảm Giá

Sau khi tạo xong các trường tùy chỉnh, bạn cần tạo shortcode để hiển thị mã giảm giá trên trang web. Thêm đoạn mã sau vào functions.php:

// Shortcode để hiển thị mã giảm giá
function muathemewpgiare_coupon_shortcode_with_image() {
    $coupons = get_field('coupon_list', 'options') ?: []; // Lấy mã giảm giá từ options

    ob_start();
    ?>
    <div class="coupon-list">
        <?php foreach ($coupons as $coupon) : ?>
            <?php if ($coupon['coupon_display']) : // Kiểm tra trạng thái hiển thị ?>
                <div class="coupon-item">
                    <img class="coupon-image" src="<?php echo esc_url($coupon['coupon_image']); ?>" alt="Coupon Image">
                    <div class="coupon-content">
                        <strong><?php echo esc_html($coupon['coupon_code']); ?></strong>
                        <p><?php echo esc_html($coupon['coupon_condition']); ?></p>
                        <button class="copy-btn" data-code="<?php echo esc_attr($coupon['coupon_code']); ?>" onclick="copyCouponCode(this, '<?php echo esc_attr($coupon['coupon_code']); ?>')">Sao chép mã</button>
                        <button class="detail-btn" onclick="showCouponDetail('<?php echo esc_html($coupon['coupon_code']); ?>', '<?php echo esc_html($coupon['coupon_condition']); ?>')">Chi tiết</button>
                    </div>
                </div>
            <?php endif; ?>
        <?php endforeach; ?>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script type="text/javascript">
        function copyCouponCode(button, code) {
            navigator.clipboard.writeText(code).then(function() {
                button.textContent = "Đã sao chép";
                button.style.backgroundColor = "#28a745";
                button.style.color = "#fff";

                Swal.fire({
                    icon: 'success',
                    title: 'Sao chép thành công!',
                    text: 'Mã giảm giá ' + code + ' đã được sao chép.',
                    timer: 2000,
                    showConfirmButton: false
                });

                setTimeout(function() {
                    button.textContent = "Sao chép mã";
                    button.style.backgroundColor = "#0344ff"; 
                    button.style.color = "#fff";
                }, 10000);
            }, function(err) {
                console.error('Không thể sao chép mã giảm giá', err);
            });
        }

        function showCouponDetail(code, condition) {
            Swal.fire({
                title: 'Chi tiết mã giảm giá',
                html: '<strong>Mã:</strong> ' + code + '<br><strong>Điều kiện:</strong> ' + condition,
                icon: 'info',
                confirmButtonText: 'Đóng'
            });
        }
    </script>
    <style>
        .coupon-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        .coupon-item {
            display: flex;
            align-items: center;
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .coupon-image {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 8px;
            margin-right: 15px;
        }
        .coupon-content {
            flex-grow: 1;
        }
        .coupon-content strong {
            display: block;
            font-size: 16px;
            color: #333;
            margin-bottom: 5px;
        }
        .coupon-content p {
            font-size: 14px;
            color: #777;
            margin-bottom: 10px;
        }
        .copy-btn, .detail-btn {
            background-color: #0344ff;
            color: #fff;
            border: none;
            padding: 4px 7px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            margin-right: 5px;
        }
        .copy-btn:focus, .detail-btn:focus {
            outline: none;
        }
    </style>
    <?php
    return ob_get_clean(); // Trả về nội dung của shortcode
}
add_shortcode('muathemewpgiare_coupons', 'muathemewpgiare_coupon_shortcode_with_image');

100

101

102

103

104

105

106

107

108

109

// Shortcode để hiển thị mã giảm giá

function muathemewpgiare_coupon_shortcode_with_image() {

$coupons = get_field('coupon_list', 'options') ?: []; // Lấy mã giảm giá từ options

ob_start();

<?php foreach ($coupons as $coupon) : ?>

<?php if ($coupon['coupon_display']) : // Kiểm tra trạng thái hiển thị ?>

<img class="coupon-image" src="<?php echo esc_url($coupon['coupon_image']); ?>" alt="Coupon Image">

<button class="copy-btn" data-code="<?php echo esc_attr($coupon['coupon_code']); ?>" onclick="copyCouponCode(this, '<?php echo esc_attr($coupon['coupon_code']); ?>')">Sao chép mã</button>

</div>

<?php endif; ?>

<?php endforeach; ?>

</div>

function copyCouponCode(button, code) {

navigator.clipboard.writeText(code).then(function() {

button.textContent = "Đã sao chép";

button.style.backgroundColor = "#28a745";

button.style.color = "#fff";

Swal.fire({

icon: 'success',

title: 'Sao chép thành công!',

text: 'Mã giảm giá ' + code + ' đã được sao chép.',

timer: 2000,

showConfirmButton: false

});

setTimeout(function() {

button.textContent = "Sao chép mã";

button.style.backgroundColor = "#0344ff";

button.style.color = "#fff";

}, 10000);

}, function(err) {

console.error('Không thể sao chép mã giảm giá', err);

});

}

function showCouponDetail(code, condition) {

Swal.fire({

title: 'Chi tiết mã giảm giá',

html: '<strong>Mã:</strong> ' + code + '<br><strong>Điều kiện:</strong> ' + condition,

icon: 'info',

confirmButtonText: 'Đóng'

});

}

</script>

<style>

.coupon-list {

display: flex;

flex-direction: column;

gap: 15px;

}

.coupon-item {

display: flex;

align-items: center;

background-color: #f9f9f9;

border-radius: 8px;

padding: 10px;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

}

.coupon-image {

width: 60px;

height: 60px;

object-fit: cover;

border-radius: 8px;

margin-right: 15px;

}

.coupon-content {

flex-grow: 1;

}

.coupon-content strong {

display: block;

font-size: 16px;

color: #333;

margin-bottom: 5px;

}

.coupon-content p {

font-size: 14px;

color: #777;

margin-bottom: 10px;

}

.copy-btn, .detail-btn {

background-color: #0344ff;

color: #fff;

border: none;

padding: 4px 7px;

border-radius: 5px;

cursor: pointer;

font-size: 14px;

margin-right: 5px;

}

.copy-btn:focus, .detail-btn:focus {

outline: none;

}

</style>

<?php

return ob_get_clean(); // Trả về nội dung của shortcode

}

add_shortcode('muathemewpgiare_coupons', 'muathemewpgiare_coupon_shortcode_with_image');

4. Sử Dụng Shortcode

Sau khi thêm shortcode vào file functions.php, bạn chỉ cần thêm shortcode dưới vào bài viết hoặc trang để hiển thị danh sách mã giảm giá.

[muathemewpgiare_coupons]

1	[muathemewpgiare_coupons]

Với cách sử dụng ACF để tạo mã giảm giá mà không cần plugin, bạn có thể dễ dàng tùy chỉnh và quản lý các mã giảm giá trên trang web của mình. Điều này giúp tối ưu hóa tốc độ và khả năng kiểm soát nội dung của bạn. Hãy thử áp dụng ngay để tăng hiệu quả bán hàng trên website của bạn! Chúc các bạn thành công.

Demo chức năng mã giảm giá:

THEMEWP900

Giảm 900K cho đơn hàng từ 5.000k

MUATHEMEWP20

Giảm 20K cho đơn hàng từ 100k

MUATHEMEWP40

Giảm 40% cho đơn hàng từ 2.000k

MUATHEMEWPGIARE10

Giảm 10% cho đơn hàng từ 100k

MUATHEMEWP15

Giảm 15% cho đơn hàng từ 50k

MUATHEMEWP45

Giảm 45% cho đơn hàng từ 3.000k

THEMEWPGIARE500

Giảm 500K cho đơn hàng từ 3.500k

CHOTHEME50

Giảm 50K cho đơn hàng từ 750k

MUATHEMEWP50

Giảm 50% cho đơn hàng từ 3.500k

THEMEWPGIARE100

Giảm 100K cho đơn hàng từ 900k

THEMEWP50

Giảm 50K cho đơn hàng từ 700k

MUATHEMEWPGIARE15

Giảm 15% cho đơn hàng từ 100k

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

Liên hệ qua Zalo Liên hệ qua Facebook Gửi Email Gọi Điện

Share code Header top đơn giản

Share code Header top đơn giản dành cho các bạn mới nhé. Code header này để dùng hiển thị các thông tin như liên hệ,...
Cách chèn thêm sản phẩm vào trong bài viết wordpress giống levantoan

Mục LụcYêu Cầu Trước Khi Bắt ĐầuHướng Dẫn Tạo Mã Giảm Giá Bằng ACF1. Tạo Trang Quản Lý Mã Giảm Giá2. Thêm Các Trường ACF3....
Sharecode cách Chuyển 0đ hoặc không điền thành chữ “Liên hệ”

Nếu bạn đang quản lý một cửa hàng trực tuyến với WooCommerce và muốn thay thế giá trị “0đ” bằng chữ “Liên hệ” cho những...
Thủ thuật wordpress – Code thêm nút Edit nhanh cho Admin trên Mobile WordPress

Nếu bạn là một quản trị viên của website WordPress và đang tìm kiếm cách code thêm nút Edit nhanh cho Admin trên Mobile WordPress...
Giới thiệu tính năng Flash Sale “Đã bán bao nhiêu” giống Shopee

Nếu bạn là một người bán hàng trực tuyến trên muathemewpgiare.com và muốn tăng cường sự uy tín của cửa hàng mình, chắc chắn bạn...
Hướng Dẫn Cách Ẩn Sản Phẩm Khi Hết Thời Gian Khuyến Mãi

Nếu bạn đang tìm kiếm một giải pháp dễ dàng để ẩn sản phẩm khi hết thời gian khuyến mãi trên website của mình, bài...
Code thêm SKU tự động vào đường dẫn của sản phẩm trong WordPress

Trong bài viết này, muathemewpgiare sẽ cùng tìm hiểu cách tự động thêm SKU vào đường dẫn sản phẩm trong WordPress, code thêm SKU tự...
Thêm trường số điện thoại, xoá trường email, website và chống spam bình luận bài viết

Trong quá trình phát triển website, việc quản lý bình luận từ người dùng là một phần quan trọng để duy trì tính tương tác...
Cách Code Fake Số Lượng Hàng Đã Bán Trong Woocommerce (Không Cần Plugin)

Khi phát triển trang thương mại điện tử với Woocommerce trên nền tảng WordPress, ngoài việc cung cấp đầy đủ thông tin sản phẩm như...
Sharecode chức năng đăng nhập gần nhất và cột ngày đăng ký tài khoản

Mục LụcYêu Cầu Trước Khi Bắt ĐầuHướng Dẫn Tạo Mã Giảm Giá Bằng ACF1. Tạo Trang Quản Lý Mã Giảm Giá2. Thêm Các Trường ACF3....
Sharecode HTML và CSS Bảng Báo Giá

DEMO: Thiết kế Website Cơ bản 5,000,000đ Thiết kế website chuẩn SEO Giao diện responsive Tích hợp cơ bản (Form liên hệ, Bản đồ) Tư...
Sharecode plugin bộ lọc khoảng giá cho wordpress không cần plugin

Khi xây dựng một website WordPress, việc cung cấp công cụ tìm kiếm hiệu quả cho người dùng là rất quan trọng, đặc biệt là...
Sharecode slider sản phẩm đã xem wordpress

Mục LụcYêu Cầu Trước Khi Bắt ĐầuHướng Dẫn Tạo Mã Giảm Giá Bằng ACF1. Tạo Trang Quản Lý Mã Giảm Giá2. Thêm Các Trường ACF3....
Tự Động Cập Nhật Hình Đại Diện Cho Bài Viết Trong WordPress

Hình đại diện (thumbnail) cho bài viết trong WordPress là yếu tố quan trọng giúp tăng tính thẩm mỹ và tạo điểm nhấn trực quan...
Share code hiển thị bài viết theo danh mục trong widget

Hướng dẫn chi tiết tạo Widget hiển thị bài viết theo danh mục trong WordPress là một phần quan trọng giúp tối ưu hóa trải...
Cách Thêm Ô Tìm Kiếm Danh Mục (Category) Trong WordPress

Bạn đã bao giờ cảm thấy mệt mỏi khi phải lục tung hàng tá danh mục trong WordPress mỗi khi đăng bài hay sản phẩm...