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

Demo:



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>


 

Demo:



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

 

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:


Nếu bạn có sử dụng nút mua ngay và thê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', 15, 9);

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:

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', 15, 9);

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é.