Cách thêm nút mua ngay cho website với 2 bước đơn giản

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”

Vao chinh sua theme

Giao diện mở gia chúng ta chọn “flatsome” bên phải giao diện để tim tới file functions.php

Tim file flatstome

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

 

 

Tim file flatstome 1 1

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

Với đoạn code như trên, khi người dùng bấm vào nút Mua ngay sẽ được chuyển hướng đến trang thanh toán. Nếu muốn thay đổi chuyển hướng đến giỏ hàng thì bạn sửa đổi dòng lệnh sau:
$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

Lời khuyên 1: Chúng ta tải file functions.php về để có lưu lại bản file gốc

Lời khuyên 2. Trước khi chúng ta thêm bất kỳ 1 đoạn code nào. Chúng ta copy đoạn code cũ vào công cụ code bất kỳ hoặc là notepad hoặc notepad++. Sau đó giả sử chúng ta có làm sai vẫn còn nguyên đoạn code cũ

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *