Khuyến mãi
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ào Woocommerce

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

}

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

Bài viết liên quan

Call Back Icon

Xin chào quý khách!

Quý khách đang cần tư vấn dịch vụ, xin vui lòng nhập số điện thoại để chúng tôi gọi lại.

Tổng đài 24/07: 1900 63 68 09

Đăng ký nhanh dịch vụ

Quý khách vui lòng gửi yêu cầu cho BKNS, chúng tôi sẽ liên hệ lại ngay với bạn.