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: 220 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
Đánh giá bài viết

guest
0 Góp ý
Inline Feedbacks
View all comments

Bài viết liên quan

Tạo tab mới trong trang sản phẩm WooCommerce

Tạo tab mới trong trang sản phẩm WooCommerce

24 - 04 - 2022

Theo mặc định, WooCommerce chỉ hỗ trợ những tab cơ bản như mô tả, thông tin thêm, đánh giá. Vậy...

Làm thế nào để giỏ hàng tự động cập nhật khi thay đổi số lượng sản phẩm

Làm thế nào để giỏ hàng tự động cập nhật khi thay đổi số lượng sản phẩm

22 - 04 - 2022

Bạn có từng nghĩ rằng, sẽ tốt hơn nếu giỏ hàng tự động cập nhật khi thay đổi số...

Tạo nhãn mới và nổi bật cho sản phẩm WooCommerce

Tạo nhãn mới và nổi bật cho sản phẩm WooCommerce

18 - 04 - 2022

Theo mặc định, WooCommerce chỉ hiện nhãn cho sản phẩm hết hàng và đang được giảm giá. Nhưng nếu...

Xoá, đổi tên, thay đổi vị trí tính năng sắp xếp sản phẩm trong WooCommerce

Xoá, đổi tên, thay đổi vị trí tính năng sắp xếp sản phẩm trong WooCommerce

07 - 04 - 2022

Bạn có nhu cầu muốn xoá, đổi tên, thay đổi vị trí của tính năng sắp xếp trong WooCommerce....

Cách xoá dữ liệu WooCommerce sau khi gỡ cài đặt

Cách xoá dữ liệu WooCommerce sau khi gỡ cài đặt

02 - 03 - 2022

Bạn muốn loại bỏ dữ liệu WooCommerce ra khỏi trang web? Nếu bạn chỉ gỡ cài đặt plugin và...

Cách ẩn phạm vi giá cho các sản phẩm biến thể trong WooCommerce

Cách ẩn phạm vi giá cho các sản phẩm biến thể trong WooCommerce

12 - 12 - 2021

Bạn đang tìm cách ẩn phạm vi giá cho các sản phẩm biến thể trong WooCommerce? Theo mặc định, giá...

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