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

Nút mua ngay có chức năng: click vào thì nó được chuyển hướng tới trang giỏ hàng. Đồng thời sẽ thêm sản phẩm đã chọn vào trong giỏ hàng.

Ưu điểm của đoạn code thêm nút Mua ngay dưới đây như sau:

• KHÔNG cần BIẾT CODE vẫn làm ngon lành (đã sẵn chỉ việc copy)
• KHÔNG cần cài thêm plugin (nhẹ nhàng, không làm nặng website)
• Chỉ thêm code vào functions.php (chèn đơn giản)
• Dùng được cho cả sản phẩm có biến thể

Cách thêm nút Mua Ngay vào woocommerce bằng code

Bạn thêm đoạn code dưới đây vào file functions.php trong theme mà bạn đang sử dụng là xong.

/*
 * Add quickbuy button go to cart after click
 */
add_action('woocommerce_after_add_to_cart_button','devvn_quickbuy_after_addtocart_button');
function devvn_quickbuy_after_addtocart_button(){
    global $product;
    ?>
    <button type="submit" name="add-to-cart" value="<?php echo esc_attr($product->get_id()); ?>" class="single_add_to_cart_button button alt" id="buy_now_button">
        <?php _e('Mua ngay', 'devvn'); ?>
    </button>
    <input type="hidden" name="is_buy_now" id="is_buy_now" value="0" />
    <script>
        jQuery(document).ready(function(){
            jQuery('body').on('click', '#buy_now_button', function(){
                if(jQuery(this).hasClass('disabled')) return;
                var thisParent = jQuery(this).closest('form.cart');
                jQuery('#is_buy_now', thisParent).val('1');
                thisParent.submit();
            });
        });
    </script>
    <?php
}
add_filter('woocommerce_add_to_cart_redirect', 'redirect_to_checkout');
function redirect_to_checkout($redirect_url) {
    if (isset($_REQUEST['is_buy_now']) && $_REQUEST['is_buy_now']) {
        $redirect_url = wc_get_checkout_url();
    }
    return $redirect_url;
}

Với đoạn code trên sau khi click vào button Mua Ngay sẽ chuyển hướng tới trang Thanh toán. Trường hợp bạn muốn chuyển hướng tới trang Giỏ hàng luôn thì sửa dòng 27 như sau:

từ

$redirect_url = wc_get_checkout_url();

thành

$redirect_url = wc_get_cart_url();

Code này đã được test với biến thể mặc định của woocommerce. Còn bạn nào dùng plugin thứ 3 để custom hiển thị biến thể mà bị lỗi thì comment bên dưới để thảo luận nhé!

Lời kết

Cám ơn các bạn đã quan tâm theo dõi blog nguyencongnam.id.vn. Chúc các bạn thực hiện thành công và có những trải nghiệm thú vị khi ghé thăm website!

Nguồn: Lê Văn Toản