Support » Plugin: WooCommerce » Archive page quantity

  • Resolved jorgearaujo25

    (@jorgearaujo25)


    I’m looking for a code that allows you to choose a quantity and add it to the cart on the product file page, I even have one that works but it is not via AJAX, so whenever I add a product the page reloads.

    current code:

    add_filter( ‘woocommerce_loop_add_to_cart_link’, ‘quantity_inputs_for_woocommerce_loop_add_to_cart_link’, 10, 2 );
    function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $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;
    }

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support Stuart Duff

    (@stuartduff)

    Automattic Happiness Engineer

    Hello,

    Thanks, I test these but when include the code,some errors appear:

    1- the related products stay with the buttons (quantity and buy) inline causing the layout to break;

    2- when adding a product directly from the shop page, even choosing a larger quantity, he always only adds 1 product at a time;

    Plugin Support Stuart Duff

    (@stuartduff)

    Automattic Happiness Engineer

    Hey @jorgearaujo25,

    Image Link: https://cloudup.com/cfv4G7F3de4

    The code below worked for me after some edits and testing.

    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' : '',
            ) ) );
    
            // Adding embeding <form> tag and the quantity field
            $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(){
        ?>
        <script type='text/javascript'>
            jQuery(function($){
                // Update quantity on 'a.button' in 'data-quantity' attribute (for ajax)
                $(".button.product_type_simple.add_to_cart_button.ajax_add_to_cart").on('click', function() { var $button = $(this); $button.attr('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;
    }

    I hope this helps!

    Hi @stuartduff,

    thank you so much for taking the time to help me! Works Great! =)

    Just in related products that still showing the button inline! With this my the layout breaks. =(

    Thanks again

    Plugin Support Stuart Duff

    (@stuartduff)

    Automattic Happiness Engineer

    Hey @jorgearaujo25,

    We can add a conditional check of is_product() to the code which will prevent the code from running on single product pages if that helps.

    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 ( is_product() )  {
            return;
        }
    
        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' : '',
            ) ) );
    
            // Adding embeding <form> tag and the quantity field
            $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(){
        ?>
        <script type='text/javascript'>
            jQuery(function($){
                // Update quantity on 'a.button' in 'data-quantity' attribute (for ajax)
                $(".button.product_type_simple.add_to_cart_button.ajax_add_to_cart").on('click', function() { var $button = $(this); $button.attr('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;
    }

    Thanks! Thanks! Thanks! Work great! =)

    Plugin Support Stuart Duff

    (@stuartduff)

    Automattic Happiness Engineer

    Hey @jorgearaujo25,

    That’s great to hear this is working for you and I’m happy I could help 🙂

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Archive page quantity’ is closed to new replies.