Thêm nút tăng giảm số lượng + – vào WooCommerce
Nâng cao trải nghiệm người dùng trên website sử dụng plugin WooCommerce bằng cách thêm số lượng cộng với nút trừ và tùy chọn số lượng trên trang cửa hàng như hình dưới đây.
Để thêm nút nhập số lượng vào WooCommerce bạn hãy mở file functions.php của chủ đề thêm lên và thêm vào code dưới đây là được. File functions.php nằm ở đâu bạn có thể xem qua bài viết này
/* Add Quantity Option to WooCommerce Shop Page */
add_filter( 'woocommerce_loop_add_to_cart_link', 'vutruso_qty_inputs_add_to_cart', 10, 2 );
function vutruso_qty_inputs_add_to_cart( $html, $product ) {
if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
$html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
$html .= woocommerce_quantity_input( array(), $product, false );
$html .= '<button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
$html .= '</form>';
}
return $html;
}
Đây là một hàm PHP bổ sung đầu vào số lượng cho nút thêm vào giỏ hàng trên vòng lặp cửa hàng của WooCommerce.
Chức năng sử dụng add_filter() chức năng WordPress để sửa hook woocommerce_loop_add_to_cart_link. Khi hook này được gọi, hàm vutruso_qty_inputs_add_to_cart() được thực thi với hai tham số: $html (đầu ra HTML cho nút thêm vào giỏ hàng) và $product (đối tượng sản phẩm hiện tại).
Đầu tiên, chức năng kiểm tra xem sản phẩm phải là sản phẩm giản đơn (không phải sản phẩm biến thể), sản phẩm có thể mua được, còn hàng và không được bán riêng lẻ. Nếu những điều kiện đáp ứng, hàm sẽ tạo một biểu mẫu HTML mới với sản phẩm add_to_cart_url() làm hành động. Bên trong biểu mẫu, nó thêm vào hook woocommerce_quantity_input() để tạo trường nhập số lượng. Cuối cùng, nó thêm một nút gửi với các sản phẩm add_to_cart_text() và đóng biểu mẫu.
Hàm trả về $html đầu ra đã sửa đổi, hiện bao gồm trường nhập số lượng và nút thêm vào giỏ hàng.
Thêm nút Cộng-Trừ số lượng vào trường số lượng
// Add Quantity Plus-Minus Button to WooCommerce Quantity Input
add_action( 'woocommerce_after_quantity_input_field', 'vutruso_display_quantity_plus' );
function vutruso_display_quantity_plus() {
echo '<button type="button" class="plus">+</button>';
}
add_action( 'woocommerce_before_quantity_input_field', 'vutruso_display_quantity_minus' );
function vutruso_display_quantity_minus() {
echo '<button type="button" class="minus">-</button>';
}
Đây là mã PHP thêm các nút cộng và trừ vào trường nhập số lượng trên các trang sản phẩm WooCommerce, trang giỏ hàng và bất kỳ nơi nào bạn có tùy chọn số lượng.
Mã này sử dụng chức năng add_action() để sửa đổi hook woocommerce_after_quantity_input_field và woocommerce_before_quantity_input_field. Các hook này được gọi tương ứng ngay trước và sau trường nhập số lượng.
Chức năng đầu tiên vutruso_display_quantity_plus() thêm nút dấu cộng sau trường nhập số lượng. Nút này có một lớp là “cộng” và loại của nó được đặt thành “button”.
Chức năng thứ hai vutruso_display_quantity_minus() thêm một nút trừ trước trường nhập số lượng. Nút có một lớp “trừ” và loại của nó được đặt thành “button”.
Code jQuery để thêm button tăng hoặc giảm với nút “+”, ” -”
/* Jquery for for Quantity Plus-Minus Button*/
add_action( 'wp_footer', 'vutruso_add_cart_quantity_plus_minus' );
function vutruso_add_cart_quantity_plus_minus() {
wc_enqueue_js( "
$(document).on( 'click', 'button.plus, button.minus', function() {
var qty = $( this ).parent( '.quantity' ).find( '.qty' );
var val = parseFloat(qty.val());
var max = parseFloat(qty.attr( 'max' ));
var min = parseFloat(qty.attr( 'min' ));
var step = parseFloat(qty.attr( 'step' ));
if ( $( this ).is( '.plus' ) ) {
if ( max && ( max <= val ) ) {
qty.val( max ).change();
} else {
qty.val( val + step ).change();
}
} else {
if ( min && ( min >= val ) ) {
qty.val( min ).change();
} else if ( val > 1 ) {
qty.val( val - step ).change();
}
}
});
" );
}
Đây là hàm PHP có thêm mã JavaScript để sửa đổi hành vi của các nút cộng và trừ được thêm vào trường nhập số lượng trên các trang sản phẩm Woo.
Đoạn mã này sử dụng add_action() để thêm vutruso_add_cart_quantity_plus_minus() chức năng vào hook wp_footer.
Sau đó, sử dụng wc_enqueue_js() để thêm code JavaScript vào trang. Mã này nằm trong một chuỗi và chứa hàm jQuery được kích hoạt khi người dùng nhấp vào nút dấu cộng hoặc dấu trừ.
Full code ở đây cho vào file functions.php là được
/* Add Quantity Option to WooCommerce Shop Page */
add_filter( 'woocommerce_loop_add_to_cart_link', 'vutruso_qty_inputs_add_to_cart', 10, 2 );
function vutruso_qty_inputs_add_to_cart( $html, $product ) {
if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
$html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
$html .= woocommerce_quantity_input( array(), $product, false );
$html .= '<button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
$html .= '</form>';
}
return $html;
}
// Add Quantity Plus-Minus Button to WooCommerce Quantity Input
add_action( 'woocommerce_after_quantity_input_field', 'vutruso_display_quantity_plus' );
function vutruso_display_quantity_plus() {
echo '<button type="button" class="plus">+</button>';
}
add_action( 'woocommerce_before_quantity_input_field', 'vutruso_display_quantity_minus' );
function vutruso_display_quantity_minus() {
echo '<button type="button" class="minus">-</button>';
}
/* Jquery for for Quantity Plus-Minus Button*/
add_action( 'wp_footer', 'vutruso_add_cart_quantity_plus_minus' );
function vutruso_add_cart_quantity_plus_minus() {
wc_enqueue_js( "
$(document).on( 'click', 'button.plus, button.minus', function() {
var qty = $( this ).parent( '.quantity' ).find( '.qty' );
var val = parseFloat(qty.val());
var max = parseFloat(qty.attr( 'max' ));
var min = parseFloat(qty.attr( 'min' ));
var step = parseFloat(qty.attr( 'step' ));
if ( $( this ).is( '.plus' ) ) {
if ( max && ( max <= val ) ) {
qty.val( max ).change();
} else {
qty.val( val + step ).change();
}
} else {
if ( min && ( min >= val ) ) {
qty.val( min ).change();
} else if ( val > 1 ) {
qty.val( val - step ).change();
}
}
});
" );
}
Nếu bạn thấy bài viết có ích hãy sao chép link và chia sẻ bài viết
Bài viết liên quan
