Hướng dẫn Hiển Thị Mã Giảm Giá Sản Phẩm Coupon (Voucher ) Website WordPress – Plugin WooCommerce

Sao chép đoạn code sau bỏ vào file functions.php

<?php
/* Hiển thị mã giảm giá WooCommerce */
add_action('woocommerce_single_product_summary', 'wpshare247_coupon_popup', 29);
function wpshare247_coupon_popup(){
    $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1; 
    $posts_per_page = 12;

    $args_filter = array(
        'post_type' => array('shop_coupon'),
        'post_status' => array('publish'),
        'order'                => 'desc',
        'posts_per_page' => $posts_per_page,
        'paged' => $paged
    );

    $the_query = new WP_query($args_filter);
    
    if($the_query->have_posts()):
        ?>
        <style type="text/css">
            .wpshare247-coupon-popup{
                display: flex;
                justify-content: center;
                align-items: center;
                position: fixed;
                width: 100%;
                height: 100%;
                z-index: 9999999;
                background: #000000a6;
                top: 0;
                bottom: 0;
                right: 0;
                left: 0;
            }
            .wpshare247-coupon-popup:not(.active){
                display: none;
            }
            .wpshare247-coupon-container{
                width: 300px;
                max-height: 500px;
                overflow-y: scroll;
                background: #fff;
                border-radius: 5px;
                padding: 20px;
                position: relative;
            }
            .wpshare247-coupon-container ul{
                margin: 0;
                padding: 0;
                list-style: none;
            }

            .wpshare247-coupon-container .coupon-item{
                border: 1px dashed;
    			padding: 10px;
    			margin-bottom: 10px;
            }

            .wpshare247-coupon-container .coupon-item p{
                padding: 0;
                margin: 0;
            }
            .coupon-item .copied{
                color: #f00;
            }
            .popup-cls{
                position: absolute;
                top: 3px;
                z-index: 999;
                background: #000;
                right: 0;
                color: #fff;
                display: block;
                width: 30px;
                height: 30px;
                text-align: center;
                text-decoration: none;
                border-radius: 50px;
            }
            .wpshare247-coupon-btn{
                background: #5d954c;
                padding: 9px;
                margin-bottom: 10px;
                display: inline-block;
                text-decoration: none;
                color: #fff;
                text-align: center;
                border: 1px dashed #000;
            }
        </style>

        <!-- Html -->
        <a class="js-show-coupon-popup wpshare247-coupon-btn" href="#wpshare247_coupon_popup">Lấy mã giảm giá</a>

        <section id="wpshare247_coupon_popup" class="wpshare247-coupon-popup">
            <div class="wpshare247-coupon-container">
                <a href="#" class="popup-cls" rel="#wpshare247_coupon_popup">x</a>
            <?php 
            while ($the_query->have_posts()) : $the_query->the_post();
                $shop_coupon_id = get_the_ID();
                $coupon_code = get_the_title( $shop_coupon_id );
                $coupon_obj = new WC_Coupon($coupon_code);
                $usage_limit = $coupon_obj->usage_limit;
                $usage_count = $coupon_obj->usage_count;
                ?>
                <div id="coupon-item-<?php echo $shop_coupon_id; ?>" class="coupon-item">
                    <ul>
                        <li><strong>Nhập mã: </strong><span><?php the_title(); ?><span></li>
                        <li><?php the_excerpt(); ?></li>
                        <?php 
                        if($usage_limit){
                            ?>
                            <li><strong>Đã dùng: </strong><span><?php echo $usage_count; ?>/<?php echo $usage_limit; ?></span></li>
                            <?php
                        }
                        ?>
                        <li><a data-copy="<?php echo $coupon_code; ?>" href="#" class="js-coupon-copy">Sao chép</a></li>
                    </ul>
                </div>
                <?php
            endwhile;
    		wp_reset_postdata();
            ?>
            </div>
        </section>
            <script type="text/javascript"> 
                jQuery(document).ready(function($) {

                jQuery(".js-show-coupon-popup").click(function(event) {
                    var coupon_popup_id = jQuery(this).attr("href");
                    if(jQuery(coupon_popup_id).length>0){
                        jQuery(coupon_popup_id).addClass('active');
                        jQuery(coupon_popup_id).find('.js-coupon-copy').removeClass('copied').text('Sao chép');
                    }
                    return false;
                });

                jQuery(".popup-cls").click(function(event) {
                    var coupon_popup_id = jQuery(this).attr("rel");
                    if(jQuery(coupon_popup_id).length>0){
                        jQuery(coupon_popup_id).removeClass('active');
                    }
                    return false;
                });

                jQuery(".js-coupon-copy").click(function(event) {
                    jQuery(this).addClass('copied');
                    var coupon = jQuery(this).data('copy');
                    jQuery(this).text("Đã sao chép mã");
                    navigator.clipboard.writeText(coupon);

                    return false;
                });

            });
            </script>
            
        <?php
    endif;
}