CODEWITHSUNDEEP
phpwordpresswoocommerce
el_M
el_M

Reputation: 159

woocommerce_quantity_input() not working on shop page woocommerce

I have a code snippet that is supposed to add a quantity dropdown to the product category and the shop page.

Here is the code:

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

    $html = sprintf( '%s%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>%s',
    '<form class="cart">',
    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() ),
    '</form>'
    );
return $html;
}

add_action( 'wp_footer' , 'archives_quantity_fields_script' );
function archives_quantity_fields_script(){
if( is_shop() || is_product_category() || is_product_tag() ): ?>
    <script type='text/javascript'>
        jQuery(function($){
            // Update quantity on 'a.button' in 'data-quantity' attribute (for ajax)
            $(".add_to_cart_button.product_type_simple").on('click', function() { var $button = $(this); $button.data('quantity', $button.parent().find('input.qty').val()); });        
            // remove old "view cart" text, only need latest one thanks!
            $(document.body).on("adding_to_cart", function() {
                $("a.added_to_cart").remove();
            });
        });
    </script>
<?php endif;
}}

The above code works as expected on the Product Category page and shows the quantity dropdown (see images).

Working on Product Category Page

Here is how it looks in the page source:

enter image description here

However, on the Shop page, the select does not show up:

enter image description here

In the source, the form is correctly being added from the code snippet, however, woocommerce_quantity_input() is not outputting even the div with the class='quantity'.

enter image description here

I must be missing something really easy, but this has been doing my head in!

Thank you in advance

Upvotes: 0

Views: 968

Answers (1)

Hamid Reza Yazdani
Hamid Reza Yazdani

Reputation: 564

You must use the woocommerce_after_shop_loop_item hook. You should also not define the wp_footer hook inside this function. woocommerce automatically performs Ajax operations.

The following code is all you need:

<?php
add_action( 'woocommerce_after_shop_loop_item', 'quantity_inputs_for_loop_ajax_add_to_cart', 11 );
function quantity_inputs_for_loop_ajax_add_to_cart() {
    global $product;

    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {

        // Remove default add to cart button
        remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );

        // 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' : '',
        ) ) );

        $html = sprintf( '%s%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>%s',
                        '<form class="cart">',
                            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() ),
                        '</form>'
        );

        echo  $html;
    }
}

Code goes in the functions.php file of your active theme/child theme. Tested and works.

Upvotes: 1

Related Questions