Hướng dẫn thêm nút mua ngay cho Woocommerce bằng code đơn giản

Khi làm web wordpress, thêm nút Mua ngay vào trang thông tin sản phẩm có nhiều lợi ích cho người dùng, bởi vì chỉ cần nhấp vào nút đó, người dùng sẽ được dẫn đến trang giỏ hàng và có thể mua sản phẩm một cách nhanh chóng. Bạn có thể thêm nút Mua ngay ở bất kỳ vị trí nào trên trang web của mình mà không cần biết mã code. Bài viết dưới đây sẽ giúp bạn thêm nút Mua ngay cho Woocommerce bằng cách đơn giản nhất.

Code để thêm nút “Mua Ngay” cho Woocommerce khi làm website wordpress

Để thêm nút Mua ngay cho Woocommerce vào trang web bằng mã code, đầu tiên bạn cần mở file functions.php trong theme đang sử dụng. Tiếp theo, thêm đoạn mã code dưới đây vào file và lưu lại là hoàn tất.

/*

* Add quick buy button go to checkout after click

* Author: nguyenthelong.com

*/

add_action(‘woocommerce_after_add_to_cart_button’,’ntl_quickbuy_after_addtocart_button’);

function ntl_quickbuy_after_addtocart_button(){

global $product;

?>

<style>

.ntl-quickbuy button.single_add_to_cart_button.loading:after {

display: none;

}

.ntl-quickbuy button.single_add_to_cart_button.button.alt.loading {

color: #fff;

pointer-events: none !important;

}

.ntl-quickbuy button.buy_now_button {

position: relative;

color: rgba(255,255,255,0.05);

}

.ntl-quickbuy button.buy_now_button: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>

<button type=”button” class=”button buy_now_button”>

<?php _e(‘Mua ngay’, ‘devvn’); ?>

</button>

<input type=”hidden” name=”is_buy_now” class=”is_buy_now” value=”0″ autocomplete=”off”/>

<script>

jQuery(document).ready(function(){

jQuery(‘body’).on(‘click’, ‘.buy_now_button’, function(e){

e.preventDefault();

var thisParent = jQuery(this).parents(‘form.cart’);

if(jQuery(‘.single_add_to_cart_button’, thisParent).hasClass(‘disabled’)) {

jQuery(‘.single_add_to_cart_button’, thisParent).trigger(‘click’);

return false;

}

thisParent.addClass(‘ntl-quickbuy’);

jQuery(‘.is_buy_now’, thisParent).val(‘1’);

jQuery(‘.single_add_to_cart_button’, thisParent).trigger(‘click’);

});

});

</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(); //or wc_get_cart_url()

}

return $redirect_url;

}

Với mã code như trên, khi người dùng nhấp vào nút Mua ngay, họ sẽ được chuyển hướng đến trang thanh toán. Nếu bạn muốn thay đổi chuyển hướng đến trang giỏ hàng, bạn có thể chỉnh sửa dòng lệnh sau:

$redirect_url = wc_get_checkout_url();

Chuyển thành:

$redirect_url = wc_get_cart_url();

Nếu bạn chạy lại mã code, bạn sẽ thành công trong việc thêm nút Mua ngay Woocommerce theo mong muốn của mình.

Ưu điểm của cách thêm nút mua ngay cho Woocommerce thủ công trong thiết kế web bằng wordpress

Nút Mua ngay là một tính năng đơn giản nhưng rất hữu ích để cải thiện trải nghiệm người dùng khi mua sắm trực tuyến. Nếu bạn bỏ qua việc thêm đoạn mã code này vào trang web của mình, bạn đang bỏ lỡ cơ hội tăng khả năng mua hàng của khách hàng.