Cách thêm tùy chọn số lượng sản phẩm WooCommerce trong trang danh sách sản phẩm

Ngày đăng: 19 - 10 - 2021 Lượt xem: 47 lượt

Cách thêm tùy chọn số lượng sản phẩm WooCommerce trong các trang danh sách sản phẩm

Đã có một vài bạn hỏi mình về thêm tùy chọn số lượng sản phẩm WooCommerce. Do đó, hôm nay mình sẽ chia sẻ một số đoạn mã bạn có thể thử. Hãy chú ý mặc dù có những theme ghi đè bố cục WooCommerce và vì thế không có giải pháp nào có thể không phù hợp với bạn.

Các đoạn mã bạn sắp sử dụng sẽ chuyển đến tệp functions.php của theme phụ của bạn hoặc tốt hơn là sử dụng plugin Code Snippets cho nó.

Nó chỉ hoạt động với các sản phẩm đơn giản, không hoạt động với các sản phẩm biến đổi.

thêm tùy chọn số lượng

Cách bổ sung tùy chọn số lượng sản phẩm WooCommerce trong các trang danh sách sản phẩm của theme Blocksy

Mình sẽ cung cấp cho bạn ba đoạn mã khác nhau nhưng đoạn mã hoạt động tốt nhất cho theme Blocksy là đoạn mã bên dưới.

add_filter( 'woocommerce_loop_add_to_cart_link', 'qty_add_to_cart_selector', 10, 2 );
function qty_add_to_cart_selector( $html, $product ) {
	if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
		$html = wc_get_template_html( 'single-product/add-to-cart/simple.php' );
	}
	return $html;
}

Mặc dù vậy, nó tốt hơn hơn với loại trang danh sách sản phẩm 1 (xem trong Customizer >> WooCommerce >> Product catalog). Đây là kết quả cuối cùng.

Cách để tbổ sung tùy chọn số lượng sản phẩm WooCommerce trong các trang danh sách sản phẩm của theme Kadence

Bây giờ điều này trở nên thú vị vì đoạn mã ở trên hoạt động với theme Kadence nhưng sau khi nhấn vào nút “thêm vào giỏ hàng”, nó sẽ chuyển hướng bạn đến trang sản phẩm duy nhất.

Có thể bạn sẽ không thích giải pháp này nên mình sẽ sử dụng một đoạn mã khác. Nếu bạn muốn thêm tùy chọn số lượng sản phẩm WooCommerce trong các trang danh sách sản phẩm theme Kadence thì hãy sử dụng đoạn mã này ở đây bên dưới.

add_filter( 'woocommerce_loop_add_to_cart_link', 'qty_add_to_cart_selector', 10, 2 );
function qty_add_to_cart_selector( $html, $product ) {
    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
        // Get the necessary classes
        $class = implode( ' ', array_filter( array(
            'button',
            'product_type_' . $product->get_type(),
            $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
            $product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
        ) ) );

        // Embedding the quantity field to Ajax add to cart button
        $html = sprintf( '%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
            woocommerce_quantity_input( array(), $product, false ),
            esc_url( $product->add_to_cart_url() ),
            esc_attr( isset( $quantity ) ? $quantity : 1 ),
            esc_attr( $product->get_id() ),
            esc_attr( $product->get_sku() ),
            esc_attr( isset( $class ) ? $class : 'button' ),
            esc_html( $product->add_to_cart_text() )
        );
    }
    return $html;
}

add_action( 'wp_footer' , 'archives_quantity_fields_script' );
function archives_quantity_fields_script(){
    ?>
    <script type='text/javascript'>
        jQuery(function($){
            // Update data-quantity
            $(document.body).on('click input', 'input.qty', function() {
                $(this).parent().parent().find('a.ajax_add_to_cart').attr('data-quantity', $(this).val());
                $(".added_to_cart").remove(); // Optional: Removing other previous "view cart" buttons
            }).on('click', '.add_to_cart_button', function(){
                var button = $(this);
                setTimeout(function(){
                    button.parent().find('.quantity > input.qty').val(1); // reset quantity to 1
                }, 1000); // After 1 second

            });
        });
    </script>
    <?php
}

Kết quả cuối cùng đã hoạt động tốt và có tùy chọn thêm vào giỏ hàng của Ajax.

Làm cách nào để thêm tùy chọn số lượng sản phẩm WooCommerce trong các trang danh sách sản phẩm của theme Astra và Generatepress

Như mình đã nói ở trên: vì các theme khác nhau, do đó đoạn mã hoạt động cho một theme sẽ không hoạt động cho một cái khác. May mắn thay, nếu bạn muốn thêm tùy chọn số lượng sản phẩm WooCommerce trong các trang danh sách sản phẩm của theme Astra hoặc Generaepress, bạn có thể sử dụng cùng một đoạn mã mà tôi đã sử dụng cho Kadence ở trên.

Làm thế nào để bổ sung tùy chọn số lượng sản phẩm WooCommerce trong các trang danh sách của theme OceanWP

Thật không may, không có giải pháp nào được mô tả ở trên cũng như không hoạt động với chủ đề OceanWP. Do đó chúng ta cần sử dụng một cái khác. Vì vậy, hãy sao chép và dán đoạn mã này.

add_filter( 'woocommerce_loop_add_to_cart_link', 'qty_add_to_cart_selector', 10, 2 );
function qty_add_to_cart_selector( $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;
}

Kết quả cuối cùng sẽ được hiển thị như hình bên dưới:

Các hạn chế

Ajax thêm vào giỏ hàng không hoạt động.

Nó sẽ thêm sản phẩm vào giỏ hàng và thêm sau đó hiển thị cho bạn URL trên hộp URL (ví dụ: https://yoursite.com/shop/?add-to-cart=676). Nếu bạn tình cờ làm mới trang thì nó sẽ thêm cùng một lượng sản phẩm vào giỏ hàng. 

Điều này không xảy ra với các chủ đề khác và với các đoạn mã được hiển thị ở trên.

Lời kết

hocwordpress hi vọng với tips nho nhỏ này có thể giúp bạn quản trị trang WooCommerce hiệu quả hơn.

Nếu các bạn thấy hay có thể theo dõi chuyên mục WordPress cơ bản để biết thêm nhiều kiến thức mới nha.

Hãy follow fanpage để nhận được những bài viết mới nhất nhé : Hocwordpress Group

0 0 votes
Article Rating

guest
0 Comments
Inline Feedbacks
View all comments

Bài viết liên quan

Hợp nhất giỏ hàng WooCommerce và trang thanh toán chỉ với 4 bước đơn giản.

Hợp nhất giỏ hàng WooCommerce và trang thanh toán chỉ với 4 bước đơn giản.

29 - 09 - 2021

Làm thế nào để hợp nhất giỏ hàng WooCommerce với trang thanh toán? Một số người rất cần hợp nhất...

Hiển thị danh mục sản phẩm woocommerce

Hiển thị danh mục sản phẩm woocommerce

08 - 06 - 2021

Hiển thị danh mục sản phẩm woocommerce như thế nào? Chắc hẳn đôi khi chúng ta muốn tùy chỉnh...

Hiển thị Star Ratings bên dưới giá sản phẩm Woocommerce

Hiển thị Star Ratings bên dưới giá sản phẩm Woocommerce

05 - 06 - 2021

Cách hiển thị star rating woocommerce như thế nào ? Trở ngại lớn nhất với các website bán hàng trực...

Hiển thị ngày dự kiến ​​giao hàng trên trang Sản phẩm

Hiển thị ngày dự kiến ​​giao hàng trên trang Sản phẩm

27 - 04 - 2021

Ngày dự kiến sản phẩm woocommerce như thế nào? Vd thứ Hai trước 16:00 – đoạn mã này được in...

Thay chữ Sale thành % giảm giá trong woocommerce

Thay chữ Sale thành % giảm giá trong woocommerce

19 - 04 - 2021

Thay Sale thành % giảm giá woocommerce? Nhiều khi chúng ta không muốn hiển thị chữ SALE khi sản phẩm...

Thêm tab trong trang sản phẩm WooCommerce

Thêm tab trong trang sản phẩm WooCommerce

15 - 04 - 2021

Thông thường, trong trang sản phẩm của woocommerce sẽ có 3 tabs khác nhau giúp bạn hiển thị các...

0
Would love your thoughts, please comment.x
()
x