Rate this post

Trong bài này chúng tôi sẽ chia sẻ code thêm nút Mua Ngay vào Woocommerce một cách đơn giản. Nút Mua Ngay này có chức năng rất đơ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.

Thêm nút Mua Ngay vào trang sản phẩm Woocommerce
Thêm nút Mua Ngay vào trang sản phẩm Woocommerce

Hiện tại, có nhiều Plugin bên thứ ba để Thêm nút Mua Ngay vào trang sản phẩm Woocommerce, nếu bạn đang sử dụng Plugin nào “hấp dẫn” thì hãy comment cho chúng tôi cùng biết nhé !

Ưu điểm

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

  • 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
  • và đặc biệt dùng được cho sản phẩm có biến thể

Các bước thực hiện

1. Đoạn Code để tạo nút Mua Ngay

Copy đoạn code bên dưới và dán vào file functions.php của theme hiện hành. Nhớ Lưu lại để được áp dụng.

– – – – – – – – – –

/*
* Them nut MUA NGAY vào Woocommerce 
* Thêm vào file funtions.php của Theme
* Author: 2cuong.com | cuongblog
*/
add_action('woocommerce_after_add_to_cart_button','cuongblog_quickbuy_after_addtocart_button');
function cuongblog_quickbuy_after_addtocart_button(){
     global $product;
?>
     <style>
          .cuongblog-quickbuy button.single_add_to_cart_button.loading:after {
               display: none;
          }

          .cuongblog-quickbuy button.single_add_to_cart_button.button.alt.loading {
               color: #fff;
               pointer-events: none !important;
          }

          .cuongblog-quickbuy button.buy_now_button {
               position: relative;
               color: rgba(255,255,255,0.05);
          }

          .cuongblog-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', 'cuongblog'); ?>
</button>
<input type="hidden" name="is_buy_now" class="is_buy_now" value="0" autocomplete="off"/>
<script>
jQuery(document).ready(function(){
     jQuery('.is_buy_now').val('0');
     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('cuongblog-quickbuy');
     jQuery('.is_buy_now', thisParent).val('1');
     jQuery('.single_add_to_cart_button', thisParent).trigger('click');
     });
});
jQuery( document.body ).on( 'added_to_cart', function (e, fragments, cart_hash, addToCartButton){
     let thisForm = addToCartButton.closest('.cart');
     let is_buy_now = parseInt(jQuery('.is_buy_now', thisForm).val()) || 0;
     if(is_buy_now === 1 && typeof wc_add_to_cart_params !== "undefined") {
     window.location = wc_add_to_cart_params.cart_url;
     }
});
</script>
<?php
}

add_filter('woocommerce_add_to_cart_redirect', 'redirect_to_checkout');
function redirect_to_checkout($redirect_url) {
     if(!get_theme_mod( 'ajax_add_to_cart' )) {
     if (isset($_REQUEST['is_buy_now']) && $_REQUEST['is_buy_now'] && get_option('woocommerce_cart_redirect_after_add') !== 'yes') {
          $redirect_url = wc_get_checkout_url(); //or wc_get_cart_url()
          }
     }
return $redirect_url;
}

add_filter('woocommerce_get_script_data', 'cuongblog_woocommerce_get_script_data', 10, 2);
function cuongblog_woocommerce_get_script_data($params, $handle) {
     if($handle == 'wc-add-to-cart'){
     $params['cart_url'] = wc_get_checkout_url();
     }
return $params;
}

– – – – – – – – – –

2. Chỉnh sửa CSS để trang trí và hiển thị

Sau khi thêm code thành công, nút Mua Ngay sẽ xuất hiện trên trang chi tiết sản phẩm. Để nút được hiển thị “đẹp” và vị trị theo ý mong muốn thì phải sửa code giao diện CSS cho nút.

Trong đoạn code trên thì đoạn CSS chỉnh giao diện nút nằm trong cặp dấu <style> … </style>.

Dưới đây là một đoạn code CSS được sử dụng trên Web 2 CƯỜNG này để các bạn tham khảo và dễ hình dung:

button.button.buy_now_button {
     position: relative;
     display: inline-block;
     margin-top: 10px !important;
     margin-left: 15% !important;
     width: 75%;
}

3. Xem thành quả

Nút mua ngay trên trang 2 CƯỜNG (chưa chỉnh giao diện bằng CSS)
Nút mua ngay trên trang 2 CƯỜNG (chưa chỉnh giao diện bằng CSS)
Code này đã được test với biến thể mặc định của Woo. Còn bạn nào dùng plugin bên thứ 3 để custom hiển thị biến thể mà bị lỗi thì comment bên dưới.

Chúc các bạn thành công !