Hướng dẫn thêm nút mua ngay cho Woocommerce bằng code đơn giản

Hướng dẫn thêm nút mua ngay cho Woocommerce bằng code đơn giản

Khi làm web wordpress, thêm nút Mua ngay vào trang thông tin sản phẩm có nhiều lợi ích cho người dùng, bởi vì chỉ cần nhấp vào nút đó, người dùng sẽ được dẫn đến trang giỏ hàng và có thể mua sản phẩm một cách nhanh chóng. Bạn có thể thêm nút Mua ngay ở bất kỳ vị trí nào trên trang web của mình mà không cần biết mã code. Bài viết dưới đây sẽ giúp bạn thêm nút Mua ngay cho Woocommerce bằng cách đơn giản nhất.

Code để thêm nút “Mua Ngay” cho Woocommerce khi làm website wordpress

Để thêm nút Mua ngay cho Woocommerce vào trang web bằng mã code, đầu tiên bạn cần mở file functions.php trong theme đang sử dụng. Tiếp theo, thêm đoạn mã code dưới đây vào file và lưu lại là hoàn tất.

/*
* Add quick buy button go to checkout after click
* Author: nguyenthelong.com
*/
add_action(‘woocommerce_after_add_to_cart_button’,’ntl_quickbuy_after_addtocart_button’);
function ntl_quickbuy_after_addtocart_button(){
    global $product;
?>
    <style>
        .ntl-quickbuy button.single_add_to_cart_button.loading:after {
            display: none;
        }
        .ntl-quickbuy button.single_add_to_cart_button.button.alt.loading {
            color: #fff;
            pointer-events: none !important;
        }
        .ntl-quickbuy button.buy_now_button {
            position: relative;
            color: rgba(255,255,255,0.05);
        }
        .ntl-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(‘ntl-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ới mã code như trên, khi người dùng nhấp vào nút Mua ngay, họ sẽ được chuyển hướng đến trang thanh toán. Nếu bạn muốn thay đổi chuyển hướng đến trang giỏ hàng, bạn có thể chỉnh sửa dòng lệnh sau:

$redirect_url = wc_get_checkout_url();
Chuyển thành:
$redirect_url = wc_get_cart_url();

Nếu bạn chạy lại mã code, bạn sẽ thành công trong việc thêm nút Mua ngay Woocommerce theo mong muốn của mình.

them nut mua ngay cho woocomerce

Ưu điểm của cách thêm nút mua ngay cho Woocommerce thủ công trong thiết kế web bằng wordpress

Nút Mua ngay là một tính năng đơn giản nhưng rất hữu ích để cải thiện trải nghiệm người dùng khi mua sắm trực tuyến. Nếu bạn bỏ qua việc thêm đoạn mã code này vào trang web của mình, bạn đang bỏ lỡ cơ hội tăng khả năng mua hàng của khách hàng.

 

nut mua ngay woocommerce 1536x1012 1 768x506 1

Cách thêm nút Mua ngay cho Woocommerce bằng mã code có nhiều ưu điểm như sau:

  • Bạn không cần phải có kiến thức về lập trình để thực hiện.
  • Không cần cài đặt bất kỳ plugin nào cho trang web.
  • Chỉ cần thêm đoạn mã code đã có sẵn vào file functions.php là đủ.
  • Tính năng nhẹ nhàng, không ảnh hưởng đến tốc độ truy cập trang web.
  • Nó có thể được sử dụng cho các sản phẩm có biến thể.

Nếu bạn muốn tăng tỷ lệ mua hàng trên trang web của mình, đừng quên thêm nút Mua ngay cho Woocommerce.

Xem thêm: Cách khắc phục lỗi không up được ảnh lên WordPress

Mời bạn đánh giá
Bài viết liên quan
Hướng dẫn đăng ký hosting Hostarmada giá rẻ 2024

Danh mục bài viếtHướng dẫn thêm nút mua ngay cho Woocommerce bằng code đơn giảnCode...

Top 10 hosting tốt nhất để làm tiếp thị liên kết

Danh mục bài viếtHướng dẫn thêm nút mua ngay cho Woocommerce bằng code đơn giảnCode...

Bí quyết viết nội dung chuẩn SEO Blog, Website, Mạng xã hội với AI Content Gravitywrite – hỗ trợ SEO đỉnh cao

Danh mục bài viếtHướng dẫn thêm nút mua ngay cho Woocommerce bằng code đơn giảnCode...

Hướng Dẫn Nâng Cấp Tài Khoản Canva Pro Miễn Phí, Cách nhận Biết Canva Pro, Canva Đội Nhóm, Canva Edu

Danh mục bài viếtHướng dẫn thêm nút mua ngay cho Woocommerce bằng code đơn giảnCode...

Hướng Dẫn Bảo Mật website, Quét Virus, Xác Thực 2 Bước Khi Đăng Nhập Trong WordPress

Danh mục bài viếtHướng dẫn thêm nút mua ngay cho Woocommerce bằng code đơn giảnCode...

Cách Tạo Tài Khoản ChatGPT Mới Nhất Tại Việt Nam Miễn Phí 100% Cực Dễ

Danh mục bài viếtHướng dẫn thêm nút mua ngay cho Woocommerce bằng code đơn giảnCode...

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 *