Thêm NÚT MUA NGAY vào woocommerce thật dễ dàng

Sau 1 số khách hàng yêu cầu thêm nút MUA NGAY và chuyển tới trang Thanh toán khi bấm vào trên trang chi tiết sản phẩm, cũng như tăng tính trải nghiệm của khách hàng, giúp tăng tỉ lệ quyết định mua sản phẩm cho các shop. Nên mình cũng tìm hiểu tổng hợp kiến thức trên internet, hướng dẫn các bạn thêm nút mua hàng ngay vào woocommerce một cách đơn giản.

Hướng dẫn thêm nút mua ngay đơn giản

 

Thêm nút mua ngay vào woocommerce

Đầu tiên hãy mở file function.php trong theme, nếu bạn dùng child theme thì vào thư mục child-theme của theme, sau đó copy đoạn code bên dưới.


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;?>
}

Code chuyển tới trang check out (thanh toán) khi bấm nút mua ngay

Đoạn này là đoạn dùng để khi khách hàng bấm Nút Mua ngay trên trang chi tiết sản phẩm , nó sẽ chuyển thẳng tới trang Check out ( Thanh toán ) bỏ qua trang giỏ hàng, giúp bỏ qua bước phức tạp khi khách hàng đặt mua hàng.

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;
}

Sau khi thêm 2 đoạn code trên vào file fuction.php bạn sẽ có nút mua ngay trong trang chi tiết sản phẩm, tiếp theo đó là css để làm đẹp nó thôi.

Làm đẹp nút mua ngay

Sau khi hoàn thành thêm nút mua hàng ngay trên trang chi tiết sản phẩm bạn thưc hiện css nút đó cho đẹp. Bên dưới là đoạn css trên web của mình, bạn có thể css thêm để đẹp hơn trên web của bạ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;
}

Update code >> dưới đây là đoạn của bác Toản nó khác ở đoạn trên là đối với sản phẩm có biến thể thì thêm bình thường nhé!. Đoạn trên chỉ dành cho sản phẩm dạng bình thường thôi nhé

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);
            background-color: green!important;
        
        }
        .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"/>
     <?php dynamic_sidebar('block-action-down-cart'); ?>
    <script>
        jQuery(document).ready(function(){
            jQuery('body').on('click', '.buy_now_button', function(){
                var thisParent = jQuery(this).parents('form.cart');
                if(jQuery('.single_add_to_cart_button', thisParent).hasClass('disabled')) 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;
}
?>

Chúc bạn thành công, xin cảm ơn.

Nguồn: INTERNET tổng hợp

DỊCH VỤ TUỆ LÂM SOFT ĐANG CUNG CẤP

THIẾT KẾ WEBSITE

Tuệ Lâm Soft Cung cấp giải pháp thiết kế website theo yêu cầu, thiết kế website trọn gói theo mẫu giá rẻ, nhiều mẫu giao diện đẹp, khả năng tùy biến cao, tối ưu hóa Onpage.

PHÒNG MARKETING THUÊ NGOÀI

Phòng Marketing Thuê Ngoài Tuệ Lâm Soft giúp doanh nghiệp làm Marketing bài bản. Tối ưu chi phí vận hành, tối đa hiệu quả công việc. Cam kết hiệu quả. Đội ngũ kinh nghiệm

THIẾT KẾ LOGO THƯƠNG HIỆU

Đội ngũ trẻ thiết kế logo nhận diện thương hiệu trẻ trung, sáng tạo, ấn tượng. Dịch vụ uy tín hàng đầu. Giá rẻ, tư vấn chuẩn xác. Quy trình bài bản. Đội ngũ nhiệt tình.

QUẢNG CÁO GOOGLE ADWORD

Tư vấn từ khóa hiệu quả, nhắm đúng khách hàng mục tiêu, theo dõi đấu giá từ khóa, tăng điểm chất lượng quảng cáo Google tối ưu chi phí tốt nhất.

DỊCH VỤ SEO

Dịch vụ SEO website chuyên nghiệp bền vững, gia tăng sự nhận diện thương hiệu của doanh nghiệp trên internet, tối đa hóa lợi nhuận với chi phí tối ưu nhất

EMAIL DOANH NGHIỆP

Email Doanh Nghiệp Mua 1 Lần Dùng Vĩnh Viễn‎ - Hệ thống Email theo tên miền góp phần gây dựng nên hình ảnh chuyên nghiệp nâng cao uy tín - khẳng định thương hiệu cho công ty bạn.