Cách thêm nút mua ngay cho website bán hàng
Cách thêm nút “mua ngay” vào website thương mại điện tử có nhiều cách. Chúng ta có thể thêm nút “ Mua ngay” bằng cách chèn code. Hoặc chúng ta có thể thêm nút mua ngay băng plugin. Các bạn cần chú ý để thêm nút “mua ngay ” bằng plugin chỉ áp dụng được với website được thiết kế bằng mã nguồn mở wordpres. Mỗi phương pháp thêm nút“ mua ngay” đều có ưu và nhược điểm riêng.
Thêm nút mua ngay bằng cách thêm code.
Cách thêm nút Mua ngay cho Woocommerce tích hợp vào wewbsite thủ công bằng chèn thêm code vào file “ functions.php ” có ưu điểm.
-Không cần cài thêm bất cứ plugin nào cho trang websie. Vậy lên website nhẹ hơn và tốc độ load nhanh hơn
-Chỉ cần thêm một đoạn code có sẵn vào file functions.php là được.
-Tính năng nhẹ nhàng, không ảnh hưởng đến tốc độ truy cập website. Bởi chúng ta chỉ cần chèn đoạn code ngắn.
-Đặc biệt chèn code và file trong website dùng được cho các sản phẩm có biến thể.
Để thêm nút Mua ngay cho Woocommerce vào trang web bằng code, trước hết bạn mở file functions.php trong theme đang sử dụng ra. Sau đó bạn thêm đoạn code dưới đây vào file và lưu lại là xong.
Bước 1 Vào trang đăng nhập trang quản trị nội dung
Sau đó chúng ta di chuyển vào Chức năng “Giao diện” và chọn “theme file editor”
Giao diện mở gia chúng ta chọn “flatsome” bên phải giao diện để tim tới file functions.php
Bước 2: Tìm file functions.php
Giao diện mở gia chúng ta chọn “flatsome” bên phải giao diện để tim tới file functions.php
Bước : Thêm đoạn code vào functions.php
Sau khi tìm và mở được file functions.php chúng ta tiến hành thêm đoạn code sau vào file , Sau đól ưu lại file là được.
/*
* Add quick buy button go to checkout after click
*/
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;
}
Lưu ý thêm khi chỉnh code trong file
$redirect_url = wc_get_checkout_url();Chuyển thành:
$redirect_url = wc_get_cart_url();Bạn chạy lại đoạn code sẽ cho ra kết quả thêm nút mua ngay Woocommerce thành công như ý muốn.
Như vậy là chúng ta đã chèn song code vào file. BXB ZONE xin đưa ra mẹo cho lần đầu tiên chỉnh sửa code như sau
Chỉnh nút mua ngay bằng cách chèn thêm một đoạn code Không hề khó với người quản trị website có kinh nghiệm. Nhưng với người làm lần đầu hay người chưa chèn code bao giờ sẽ vô tình hoặc sơ xảy ra sai sót. Hiểu điều này lên BXB sẽ đua ra lời khuyên như sau