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

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

Một số bạn đã hỏi tôi về việc thêm tùy chọn số lượng sản phẩm WooCommerce. Do đó, hôm nay tôi sẽ chia sẻ một số đoạn mã bạn có thể thử. Hãy lưu ý rằng có những chủ đề ghi đè bố cục WooCommerce và như vậy 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 chủ đề phụ của bạn hoặc tốt hơn là sử dụng plugin Code Snippets cho nó.

Dem so luot xem bai viet WordPress - 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

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

Nhiều tùy chọn số lượng hơn

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 theo chủ đề Blocksy

Tôi 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 chủ đề 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, sẽ tốt hơn với loại trang danh sách sản phẩm 1 (xem trong Customizer >> WooCommerce >> Danh mục sản phẩm). Đây là kết quả cuối cùng.

Cach them tuy chon so luong san pham WooCommerce trong - 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

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 chủ đề Kadence

Bây giờ điều này trở nên thú vị vì mã ở trên hoạt động với chủ đề Kadence nhưng sau khi nhấp 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, vì vậy tôi sẽ sử dụng một 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 chủ đề của Kadence thì hãy sử dụng đoạn mã này tại đâ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="https://hocwordpress.vn/%s" data-quantity="https://hocwordpress.vn/%s" data-product_id="https://hocwordpress.vn/%s" data-product_sku="https://hocwordpress.vn/%s" class="https://hocwordpress.vn/%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ó một tùy chọn thêm vào giỏ hàng của Ajax.

1638346627 837 Cach them tuy chon so luong san pham WooCommerce trong - 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

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 chủ đề của Astra và Generatepress

Như tôi đã nói ở trên: bởi vì các chủ đề khác nhau, mã hoạt động cho một chủ đề sẽ không hoạt động cho một chủ đề 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 chủ đề 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.

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

Rất tiếc, 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 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 dưới đây:
1638346627 905 Cach them tuy chon so luong san pham WooCommerce trong - 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

Những 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://ift.tt/31kYCkL). Nếu bạn tình cờ làm mới trang, 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.

Phần kết

Hocwordpress hy vọng thủ thuật nhỏ này có thể giúp bạn quản lý trang WooCommerce của mình hiệu quả hơn.

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

Theo dõi fanpage để nhận những bài viết mới nhất: Hocwordpress Group

Tìm kiếm Blog này

Sieucoder.com