Hôm nay lân la tìm lại đoạn code thêm nút mua ngay vào giao diện Woocommerce sử dụng Flatsome mà tìm hoài mới thấy. Đây là code của bác nguyenvantoan.com đã chia sẻ, mình mạo phép đăng tải lại trên blog cá nhân để tiện theo dõi về sau. Cách làm này cực kỳ nhanh – gọn và hiệu quả cho anh em nào đang làm site bán hàng.

Cảm ơn tác giả đã chia sẻ những dòng code vô cùng hữu ích này để anh em làm website bán hàng bằng woocommerce nhẹ đầu hơn.

Hướng dẫn thêm nút mua ngay vào woocommerce

Theo giao diện mặc định của woocommerce sẽ luôn có một nút “Thêm vào giỏ hàng”, nhưng trong một số trường hợp bạn muốn làm theo các trang thương mại điện tử, đó là thêm một nút “mua ngay” vào kế bên nút “thêm vào giỏ hàng” thì sao. Dưới đây là cách hướng dẫn.

Thêm nút "mua ngay" vào Woocommerce sử dụng Flatsome

Thực chất nút “mua ngay” là thao tác đưa người mua hàng đi thẳng đến trang thanh toán hoặc bạn cũng có thể custom thành trang giỏ hàng.

Ưu điểm của code thêm nút mua ngay vào woocommerce:

Bạn KHÔNG cần biết CODE vẫn có thể làm được
KHÔNG cần phải cài thêm PLUGIN cho nặng website
KHÔNG cần phải sửa CODE
Chỉ cần COPY & PASTE vào file FUNCTION.PHP là được.

Cách thêm nút mua ngay vào woocommerce nhanh chóng:

Để thêm nút mua ngay vào trang product page trong woocommerce sử dụng giao diện flatsome rất dễ dàng, bạn chỉ cần copy và paste đoạn code dưới đây vào file function.php là được.

Lưu ý: Để đảm bảo an toàn, nếu bạn chưa rành về sửa website thì nên backup website lại trước khi sửa. Cách tốt nhất là bạn hãy thêm code vào file fuction trong child theme, đừng sửa trực tiếp trong theme mẹ nha.

/*
 * 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;
}

* 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>

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 việc thêm đoạn code trên là website của bạn đã xuất hiện button Mua ngay trên trang sản phẩm rồi.

Tuy nhiên, nếu bạn muốn chuyển hướng đến trang giỏ hàng thay vì chuyển thẳng đến trang thanh toán thì sửa lại đoạn code sau ở dòng 27:

từ như này:

$redirect_url = wc_get_checkout_url();

1	$redirect_url = wc_get_checkout_url();

thành như này:

$redirect_url = wc_get_cart_url();

1	$redirect_url = wc_get_cart_url();

Xong, đơn giản vậy thôi. Hãy ra trang sản phẩm và xem thử thành quả nhé.

Đoạn code này đã được test với biển thể mặc định của giao diện woocommerce.

Tổng kết

Chỉ với một vài bước đơn giản là bạn đã có thể thêm nút mua ngay vào giao diện bán hàng của mình rồi. Hy vọng bài chia sẻ đem lại giá trị hữu ích đối với các bạn. Nếu gặp vấn đề cần giúp đỡ thì đừng quên để lại bình luận ở bên dưới nhé. Truy cập vào phần chuyên mục Flatsome để xem các bài hướng dẫn custom giao diện chủ đề này nhé.