Hướng dẫn thêm nút MUA NGAY vào woocommerce

Bài viết dưới đây webgle chia sẻ với các bạn cách thêm nút “MUA NGAY” vào woocommerce đơn giản, chỉ vài dòng code copy và paste là xong. Mời bạn tham khảo cách làm nhé.

Woocommerce có hỗ trợ nút “MUA NGAY” không?

Khi bạn cài plugin woocommerce vào trong website của mình hiển nhiên website đó mặc định những chức năng cũ của woocommerce mà thôi, khi bạn muốn thêm 1 tính năng mới vào thì bạn phải code và code làm sao để có thêm tính năng mới được, Thiết kế website wordpress webgle hướng dẫn bạn thêm mới tính năng “MUA NGAY” giúp bạn dễ dàng hơn khi thêm mới 1 tính năng cho website của mình nhé.

Code chức năng thêm nút mua ngay vào woocommerce

Trước tiên bạn phải tìm tới file function.php của website mình nhé.

File function.php nằm ở đâu? Bạn vào trong phần chỉnh sửa giao diện là thấy ngay(chú ý ở phần đầu ở phần đầu).

Tiếp đến bạn copy đoạn code này và paste vào trong file nhé.

add_action('woocommerce_after_add_to_cart_button','hdev_quickbuy_after_addtocart_button');
 function hdev_quickbuy_after_addtocart_button(){
     global $product;
     global $post;
     ?>
     <div class="custorm_quickbuy"><a href="?quick_buy=1&add-to-cart=<?php echo $post->ID ;?>" class="qn_btn">Mua ngay</a></div>
 
   <?php endif;?>
}

Như vậy, bạn đã có ngay nút button “MUA NGAY” ở phần thông tin sản phẩm rồi nhé.

Hướng dẫn chuyển hướng “MUA NGAY” sang trang “THANH TOÁN”

Chỉ hiển thị nút “MUA NGAY” thôi là chưa đủ bạn cần xử lý và chuyển hướng nút “MUA NGAY” tới phần “THANH TOÁN” để khách hàng không chần chừ suy nghĩ và mua ngay sản phẩm bạn nhé.

Thêm đoạn code này giúp bạn có thể chuyển hướng nhanh tới trang “THANH TOÁN” nhé

add_filter ('woocommerce_add_to_cart_redirect', 'redirect_to_checkout');
function redirect_to_checkout($checkout_url) {
    global $woocommerce;
    if($_GET['quick_buy']) {
        $checkout_url = $woocommerce->cart->get_checkout_url();
    }
    return $checkout_url;
}

Như vậy là xong chức năng “MUA NGAY” rồi nhé, đơn giản phải không nào.

Css nút “MUA NGAY” cho website

Để thêm phần sống động cho website cũng như là nút “MUA NGAY” bạn thêm đoạn css này vào để cho có phần đẹp và sinh động hơn nhé.

.qn_btn {
    background: #03c411;
    padding: 10px;
    border-radius: 7px;
    display: inline-block;
    width: 48%;
    margin-left: 3px;
    font-size: 18px;
    color: white;
    text-align: center;
}

Nếu bạn đang dùng thêm flatsome thì bạn vào phần css trong phần tùy biến và paste vào là xong nhé. Còn nếu bạn dùng theme khác ở file function.php bạn thêm: <style> paste đoạn code css </style> như vậy là xong.

Trên đây, Mình đã hướng dẫn bạn cách thêm nút “MUA NGAY” vào trong plugin woocommerce đơn giản hiệu quả, bạn không biết code cũng có thể làm được nhé. Trong quá trình xử lý không được hay bị lỗi gì comment cho mình phía dưới, mình chỉ nhé.

Trích nguồn code tham khảo: Internet