Trang chủ » Hướng dẫn » Thêm Nút Mua Ngay Vào Woocommerce Đơn Giản

Thêm Nút Mua Ngay Vào Woocommerce Đơn Giản

Nút “Mua Ngay” mang chức năng rất hữu ích và đơn giản, chỉ là click vào và 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. Nhưng nhiều người vẫn chưa biết cách thực hiện. Biết được điều này, bài viết dưới đây BKNS sẽ gửi đến bạn cách thêm nút Mua ngay vào Woocommerce một cách đơn giản. Hãy cùng theo dõi ngay nhé.

Cách thêm nút Mua ngay với Woocommerce

1. Ưu điểm của thêm nút “Mua ngay”

Sử dụng được cho những sản phẩm có biến thể
Chỉ cần thêm code vào functions.php một cách nhẹ nhàng
Không cần cài plugin bổ sung
Không cần có những kiến thức về code vẫn có thể thực hiện

2. Cách thêm nút Mua ngay vào Woocommerce

Cách thêm nút Mua ngay trong Woocommerce

Để thêm nút Mua ngay vào Woocommerce bạn chỉ cần thực hiện thêm code này vào functions.php vào trong theme:

/*

* Add quick buy button go to checkout after click

* Author: levantoan.com

*/

add_action('woocommerce_after_add_to_cart_button','devvn_quickbuy_after_addtocart_button');

function devvn_quickbuy_after_addtocart_button(){

   global $product;

   ?>

   <style>

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

           display: none;

       }

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

           color: #fff;

           pointer-events: none !important;

       }

       .devvn-quickbuy button.buy_now_button {

           position: relative;

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

       }

       .devvn-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('devvn-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;

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

* Add quick buy button go to checkout after click

* Author: levantoan.com

add_action('woocommerce_after_add_to_cart_button','devvn_quickbuy_after_addtocart_button');

function devvn_quickbuy_after_addtocart_button(){

global $product;

<style>

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

display: none;

}

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

color: #fff;

pointer-events: none !important;

}

.devvn-quickbuy button.buy_now_button {

position: relative;

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

}

.devvn-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>

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

</button>

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('devvn-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ậy là bài viết trên BKNS đã gửi đến bạn cách thêm nút Mua ngay vào Woocommerce. Nếu bạn còn thắc mắc nào thì hãy để lại bình luận ở dưới để được giải đáp. Đừng quên truy cập website bkns.vn để được biết thêm nhiều thông tin hữu ích khác nữa nhé.

Hạnh Thịnh

Tôi là Thịnh Hạnh, hiện đang là CEO của BKNS. Tôi sẽ cung cấp cho bạn những dịch vụ công nghệ thông tin và giải pháp mạng một cách nhanh nhất, hiệu quả nhất.

Tên miền

Đăng ký hoặc chuyển đổi

Thông tin cần biết

Hosting

Đăng ký Hosting

Cloud Email

Dịch vụ Email

Thông tin cần biết

Cloud VPS

Máy chủ

Máy chủ

Dịch vụ bổ sung

Phần mềm

Bản quyền phần mềm máy chủ

Bản quyền phần mềm website

Thiết kế website

Đại lý

Trở thành đại lý

Hướng dẫn

Tên miền

Đăng ký hoặc chuyển đổi

Thông tin cần biết

Hosting

Đăng ký Hosting

Cloud Email

Dịch vụ Email

Thông tin cần biết

Cloud VPS

Máy chủ

Máy chủ

Dịch vụ bổ sung

Phần mềm

Bản quyền phần mềm máy chủ

Bản quyền phần mềm website

Thiết kế website

Đại lý

Trở thành đại lý

Hướng dẫn

Thêm Nút Mua Ngay Vào Woocommerce Đơn Giản

1. Ưu điểm của thêm nút “Mua ngay”

2. Cách thêm nút Mua ngay vào Woocommerce