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

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

Để 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;

}

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