Thêm nút buy now (mua ngay) trên danh sách sản phẩm woocommerce wordpress như thế nào

Thảo luận trong 'Mã nguồn mở Wordpress' bắt đầu bởi seolagi, 11/9/20.

  1. seolagi

    seolagi

    Moderator

    Thành viên BQT

    Tham gia ngày:
    16/4/14
    Bài viết:
    936
    Đã được thích:
    77
    Điểm thành tích:
    28
    Thêm nút buy now (mua ngay) trên danh sách sản phẩm woocommerce wordpress như thế nào vậy các bạn, hiện tại web mình chỉ có mỗi nút thêm vào giỏ hàng, mình xem các web khác ví dụ như dưới có nút mua ngay, không biết thêm vô làm sao? web mình là web wordpres sử dụng themes flatsome phiên bản Version 3.12.2 của Flatsome.

    Bạn nào biết giúp mình với.

    them-nut-mua-ngay-tren-themems-flatsome.jpg
     
    Cảm ơn đã xem bài:

    Thêm nút buy now (mua ngay) trên danh sách sản phẩm woocommerce wordpress như thế nào

  2. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,604
    Đã được thích:
    1,129
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Demo:

    nut-mua-ngay-trong-danh-sach-san-pham.jpg

    Bạn sử dụng themes Flatsoame đó thì vào: /wp-content/themes/flatsome/inc/woocommerce/structure-wc-product-box.php mở file đó lên.

    Thay toàn bộ code trang hàm function flatsome_woocommerce_loop_add_to_cart_link( $link, $product, $args )

    Thành code sau:
    PHP:
    function flatsome_woocommerce_loop_add_to_cart_link$link$product$args ) {

        if ( ! 
    doing_action'flatsome_product_box_actions' ) && ! doing_action'flatsome_product_box_after' ) ) {
            return 
    $link;
        }

        switch ( 
    get_theme_mod'add_to_cart_icon''disabled' ) ) {
            case 
    'show':
                
    $insert '<div class="cart-icon tooltip is-small" title="' esc_html$product->add_to_cart_text() ) . '"><strong>+</strong></div>';
                
    $link   preg_replace'/(<a.*?>).*?(<\/a>)/''$1' $insert '$2'$link );
                break;
            case 
    'button':
                
    $link '<div class="add-to-cart-button cs-addtocartbutton">' $link '<a href="/cart/?add-to-cart='.$product->get_id().'" data-product_id="'.$product->get_id().'" data-quantity="1" class="qn_btn cs-product-buynow">Mua ngay</a></div>';
                break;
            default:
                return 
    $link;
        }

        return 
    $link;
    }
    Add thêm css sau vào Advanced -> Cusom CSS
    HTML:
    .add-to-cart-button
    {
      margin-top: 15px;
    }
    .add-to-cart-button .add_to_cart_button
    {
      margin-top: 0px;
    }
    .add-to-cart-button .cs-buynow
    {
      background-color: orange;
      margin-top: 0px;
      padding: 6px 16px;
      vertical-align: -2px;
      margin-right: 10px;
      border-radius: 5px;
      color: white;
    }
    Các themes khác.
    PHP:
    echo '<a class="cs-buynow" href="/cart/?add-to-cart='.$post->ID.'">Mua ngay</a>';
    Tùy biến số lượng add vào:
    PHP:
    <a href="/cart/?quick_buy=2&add-to-cart='.$product->get_id().'" class="qn_btn">Mua ngay</a>
     
    Chỉnh sửa cuối: 28/5/22
  3. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,604
    Đã được thích:
    1,129
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Demo:

    nut-mua-ngay-trong-wordpress.jpg

    Muốn tạo nút mua ngay trong chi tiết sản phẩm bạn add code sau vào Function.php của themes nhé:

    PHP:
    add_action('woocommerce_after_add_to_cart_button','cs_quickbuy_after_addtocart_button');
    function cs_quickbuy_after_addtocart_button(){
        global $product;
        ?>
        <button type="button" class="button buy_now_button">
            <?php _e('Mua ngay''cstp'); ?>
        </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('cs-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_cart_url(); //or wc_get_cart_url()
        
    }
        return 
    $redirect_url;
    }
     
  4. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,604
    Đã được thích:
    1,129
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nếu bạn muốn thêm số lượng vào chỗ danh sách sản phẩm thì bạn sử dụng code sau add vào function.php của themes:

    Trường hợp 1:

    them-so-luong-sp.jpg
    Nếu bạn có sử dụng nút mua ngaythêm vào giỏ hàng ở trên cho danh sách sản phẩm thì gắn code sau:
    PHP:
    //tạo nút số lượng sản phẩm ở danh sách sản phẩm, category product qty
    function itseovn_custom_quantity_field_archive()
    {
      global 
    $product;
      if (
    $product->is_type('simple')) {
        echo 
    '<div class="itseovn-custom--qty_wrap">';
        echo 
    '<div class="itseovn-qtv--wrap">';
        
    woocommerce_quantity_input(array('min_value' => 1'max_value' => $product->backorders_allowed() ? '' $product->get_stock_quantity()));
        echo 
    '</div>';
       
    // woocommerce_template_loop_add_to_cart();
        
    echo '</div>';
      }
    }
    add_action('woocommerce_after_shop_loop_item''itseovn_custom_quantity_field_archive'159);

    function 
    itseovn_custom_add_to_cart_quantity_handler()
    {
      
    wc_enqueue_js('
        jQuery( "body" ).on( "click", ".quantity input", function() {
          return false;
        });
        jQuery( "body" ).on( "change input", ".quantity .qty", function() {
          var add_to_cart_button = jQuery( this ).parents( ".product" ).find( ".add_to_cart_button" );
          add_to_cart_button.attr( "data-quantity", jQuery( this ).val() );
          add_to_cart_button.attr( "href", "?add-to-cart=" + add_to_cart_button.attr( "data-product_id" ) + "&quantity=" + jQuery( this ).val() );
          var add_cs_product_buynow = jQuery( this ).parents( ".product" ).find( ".cs-product-buynow" );
          add_cs_product_buynow.attr( "data-quantity", jQuery( this ).val() );
          add_cs_product_buynow.attr( "href", "/cart/?add-to-cart=" + add_cs_product_buynow.attr( "data-product_id" ) + "&quantity=" + jQuery( this ).val() );
        });
      '
    );
    }
    add_action('init''itseovn_custom_add_to_cart_quantity_handler');
    Trường hợp 2:
    them-so-luong-sp-vao-danh-sach-category-product.jpg
    Nếu web bạn chỉ có nút thêm vào giỏ hàng không có nút mua ngay ở trên vào danh sách sản phẩm:
    PHP:
    //tạo nút số lượng sản phẩm ở danh sách sản phẩm, category product qty
    function itseovn_custom_quantity_field_archive()
    {
      global 
    $product;
      if (
    $product->is_type('simple')) {
        echo 
    '<div class="itseovn-custom--qty_wrap">';
        echo 
    '<div class="itseovn-qtv--wrap">';
        
    woocommerce_quantity_input(array('min_value' => 1'max_value' => $product->backorders_allowed() ? '' $product->get_stock_quantity()));
        echo 
    '</div>';
       
    // woocommerce_template_loop_add_to_cart();
        
    echo '</div>';
      }
    }
    add_action('woocommerce_after_shop_loop_item''itseovn_custom_quantity_field_archive'159);

    function 
    itseovn_custom_add_to_cart_quantity_handler()
    {
      
    wc_enqueue_js('
        jQuery( "body" ).on( "click", ".quantity input", function() {
          return false;
        });
        jQuery( "body" ).on( "change input", ".quantity .qty", function() {
          var add_to_cart_button = jQuery( this ).parents( ".product" ).find( ".add_to_cart_button" );
          add_to_cart_button.attr( "data-quantity", jQuery( this ).val() );
         add_to_cart_button.attr( "href", "?add-to-cart=" + add_to_cart_button.attr( "data-product_id" ) + "&quantity=" + jQuery( this ).val() );
        });
      '
    );
    }
    add_action('init''itseovn_custom_add_to_cart_quantity_handler');
    HTML CSS bạn muốn đẹp xấu trên dưới thì tự tùy chỉnh lại theo ý nhé.
     
    Chỉnh sửa cuối: 28/5/22


Like và Share ủng hộ ITSEOVN