Thêm nút Mua Ngay vào sản phẩm Woocommerce WordPress

Thêm nút “Mua ngay” vào trang sản phẩm giúp người dùng dễ dàng chuyển đến trang giỏ hàng và mua sản phẩm một cách thuận tiện. Bạn có thể thực hiện điều này mà không cần kiến thức về mã code, chỉ cần làm theo hướng dẫn đơn giản cho Woocommerce.

Cách thêm nút Mua Ngay vào woocommerce

Bạn chỉ cần thêm đoạn code này vào file functions.php trong theme hiện tại của bạn là xong.

<?php 


class Copi_Quick_Buy_Button {

    public function __construct() {
        // Hook into WordPress
        add_action('wp_enqueue_scripts', array($this, 'enqueue'), 100);
        add_action('wp_head', array($this, 'header'));
        add_action('wp_footer', array($this, 'footer'));
        add_action('woocommerce_after_add_to_cart_button',array($this, 'after_add_to_cart_button'));
    }

    // Enqueue jQuery script
    public function enqueue() {
      wp_enqueue_script('jquery');
    }

    // Function to display the quick buy button CSS
    public function header() {
        ?>
        <style>
            /* Styling for the quick buy button */
            .copi-quickbuy button.single_add_to_cart_button.loading:after {
                display: none;
            }
            .copi-quickbuy button.single_add_to_cart_button.button.alt.loading {
                color: #fff;
                pointer-events: none !important;
            }
            .copi-quickbuy button.copy-buy-now {
                position: relative;
                color: rgba(255,255,255,0.05);
            }
            .copi-quickbuy button.copy-buy-now:after {
                animation: spin 500ms infinite linear;
                border: 2px solid #fff;
                border-radius: 32px;
                border-right-color: transparent !important;
                border-top-color: transparent !important;
                content: "";
                display: block;
                height: 16px;
                top: 50%;
                margin-top: -8px;
                left: 50%;
                margin-left: -8px;
                position: absolute;
                width: 16px;
            }
        </style>
        <?php
    }

    // Function to display the quick buy button script
    public function footer() {
        ?>
        <script>
        jQuery(document).ready(function(){

            // Handle click event on copy-buy-now
            jQuery('body').on('click', '.copy-buy-now', function(e){
                e.preventDefault();
                const form = jQuery(this).closest('form.cart');
                const add_to_cart = form.find('.single_add_to_cart_button');
                const is_buy_now = form.find('.is_buy_now');

                is_buy_now.val('0');

                if(!add_to_cart || !is_buy_now) {
                  return false;
                }

                is_buy_now.val('1');
                form.submit();
            });
        });

        // Handle added_to_cart event
        jQuery( document.body ).on( 'added_to_cart', function (e, fragments, cart_hash, addToCartButton){
            const form = addToCartButton.closest('form.cart');
            const is_buy_now = form.find('.is_buy_now');

            if(!is_buy_now) {
              return false;
            }

            const buy_now = parseInt(is_buy_now.val()) || 0;

            // Redirect to cart if is_buy_now is set to 1
            if(buy_now === 1) {
                window.location = '<?php echo wc_get_checkout_url(); ?>';
            }
        });
        </script>
        <?php
    }

    public function after_add_to_cart_button() {
      ?>
      <button type="button" class="button copy-buy-now"><?php _e('Mua ngay', 'copi'); ?></button>
      <input type="hidden" name="is_buy_now" class="is_buy_now" value="0" autocomplete="off"/>
      <?php

    }
}

// Instantiate the class
new Copi_Quick_Buy_Button();

Đoạn code đã được kiểm thử với biến thể mặc định của Woocommerce. Nếu bạn đang sử dụng plugin bên thứ ba để tùy chỉnh hiển thị biến thể và gặp lỗi, có thể liên hệ trực tiếp cho mình ở mục Liên hệ.