[Hướng dẫn] Thêm nút Mua ngay Woocommerce một cách đơn giản

Thêm-nút-mua-ngay-vào-trang-chi-tiết-sản-phẩm-woocommerce

[Hướng dẫn] Thêm nút Mua ngay Woocommerce một cách đơn giản:

Bài viết này Flatsomea-z tổng hợp được nên share lại cho các bạn cùng tham khảo nhé. Cảm ơn tác giả vì những dòng code hết sức giá trị có thể giúp anh em làm website bán hàng dễ dàng tuỳ biến Woocommerce. Cùng bắt đầu nào!

Mặc định của woocommerce là nút thêm vào giỏ hàng và khi khách hàng click vào nó sẽ dẫn sang trang giỏ hàng khiến khách hàng rất mất thời gian và khó chịu dẫn đến việc đơn hàng có thể bị huỷ bỏ. Bởi thế, việc tạo ra 1 nút mua ngay ở bên cạnh nút thêm vào giỏ hàng là vô cùng quan trọng. Nó sẽ điều hướng khách hàng trực tiếp sang trang thanh toán để khách hàng điền thông tin mua hàng. Rất tốt phải không?

Nút mua ngay thực chất có chức năng rất đơn giản, chỉ là click vào thì nó được chuyển hướng tới trang giỏ hàng, đồng thời thêm sản phẩm đã chọn vào giỏ hàng.

Thêm-nút-mua-ngay-vào-trang-chi-tiết-sản-phẩm-woocommerce
Thêm-nút-mua-ngay-vào-trang-chi-tiết-sản-phẩm-woocommerce

Ưu điểm của đoạn code thêm nút Mua ngay này:

  • KHÔNG cần BIẾT CODE vẫn làm ngon lành
  • KHÔNG cần cài thêm plugin
  • Chỉ thêm code vào functions.php
  • Nhẹ nhàng, load nhanh
  • Dùng được cho sản phẩm có biến thể

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

Copy đoạn code này và bỏ vào file functions.php trong theme của bạn đang sử dụng. Vậy 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;
}
Đoạn trên sau khi click vào button Mua Ngay sẽ chuyển hướng tới trang thanh toán. Nếu bạn nào muốn chuyển hướng tới trang giỏ hàng luôn thì tìm đoạn code này $redirect_url = wc_get_checkout_url(); và sửa 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 nha.
Nguồn: https://levantoan.com/them-nut-mua-mgay-vao-woocommerce-mot-cach-don-gian/

Trả lời

Email của bạn sẽ không được hiển thị công khai.