WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
[closed] Adding Quantity to archive page add to cart (31 posts)

  1. rjvv
    Member
    Posted 1 year ago #

    Hi!
    I'm trying to put the Quantity form in the Products page as in the single product page.

    If I add this

    <?php
    	 		if ( ! $product->is_sold_individually() )
    	 			woocommerce_quantity_input( array( 'min_value' => 1, 'max_value' => $product->backorders_allowed() ? '' : $product->get_stock_quantity() ) );
    	 	?>

    in the loop-shop.php template just before
    <?php do_action('woocommerce_after_shop_loop_item'); ?>

    It appears but it doesn't work

    any tip?

    http://wordpress.org/extend/plugins/woocommerce/

  2. Roy Ho
    Member
    Posted 1 year ago #

    Why do you need to manually put that field there? Does it now automatically show it for you?

  3. rjvv
    Member
    Posted 1 year ago #

    It shows up and I can add quantities but when I click the add to cart button it only adds 1 product

  4. Roy Ho
    Member
    Posted 1 year ago #

    No, what I mean is without you having to manually add the code above, the quantity field should be there.

    From your post, it seemed to me you're saying there is no quantity field at all until you manually added that code.

  5. rjvv
    Member
    Posted 1 year ago #

    yeah, it only appears in the single product page, but I want it to appear in the products / archive page. It doesn't appear there in the default template.

  6. Roy Ho
    Member
    Posted 1 year ago #

    Can you send me the url to the exact page you want quantity field to appear?

  7. rjvv
    Member
    Posted 1 year ago #

  8. Roy Ho
    Member
    Posted 1 year ago #

    Ok try this leave the code you added and then turn off AJAX submit in your woocommerce settings and let me know if that works.

  9. rjvv
    Member
    Posted 1 year ago #

    it doesn't work, and if I disable the AJAX thingy it refreshes everytime you add to cart

  10. Roy Ho
    Member
    Posted 1 year ago #

    No no..I only ask you to do that to check if it is related to ajax add to cart...this is to help me analyze the issue..I am looking into this.

  11. rjvv
    Member
    Posted 1 year ago #

    ah ok, disabled again

  12. rjvv
    Member
    Posted 1 year ago #

    ah ok, disabled again

  13. rjvv
    Member
    Posted 1 year ago #

    ah ok, disabled again

  14. Roy Ho
    Member
    Posted 1 year ago #

    Ok in order to do this via ajax, it gets quite complicated so I don't know if you want to go down this road.

    If you look in the add to cart js file for simple products, ONLY the product ID is passed when you click on add to cart. That in itself is not enough. It would need to be modified to pass in quantity as well.

    And on top of that, you would need to modify the code that handles the ajax request.

    How familiar are you with PHP and JS? I won't write the code for you but I can definitely guide you in the right direction as in which file needs to be edited..etc...

  15. rjvv
    Member
    Posted 1 year ago #

    oh thank you so much, I'll take a look on those files you talk about, I'm not a PHP and JS literate but I can write some code...

    btw, I already hacked this thing in the shopo theme, maybe I can copy some function from there, will see.

    Thank you so much!

  16. Roy Ho
    Member
    Posted 1 year ago #

    Here are some reference for you:

    woocommerce-ajax.php line 181 function woocommerce_ajax_add_to_cart()
    add-to-cart.js line 4 $('.add_to_cart_button')

    So basically you're wanting to add the quantity field and use the add to cart JS to pull the quantity value and pass that to the ajax action. In the code you can see ONLY the id is passed...you need to add the quantity and then in the woocommerce_ajax_add_to_cart function, get the quantity and pass it to the class method add_to_cart..you can even see it is default to "1" which means it is currently only adding 1 quantity...so instead, you pass in the value you got from the ajax...

    That is the bulk of it...but don't forget to sanitize your values as you don't want to accept any code passed in...use absint() function to restrict it to integer values.

    Perhaps I can write a plugin for this so everyone can use it...Hmmm..

  17. rjvv
    Member
    Posted 1 year ago #

    Hmmm... will go through that you talk about. Thank you so much!
    Will come back if I need help or to share it if I get it!
    even though the plugin idea sounds really good ;)

  18. geodgeod
    Member
    Posted 1 year ago #

    Good day all -
    Did you figure out how to do this or create the plugin? Any help will be greatly greatly appreciate. Let me know and thanks!

  19. Jerome Fitzpatrick
    Member
    Posted 1 year ago #

    One should avoid touching the plugin's code wherever possible and explore the simpler solutions using the hooks in WooCommerce. I had a similar problem and I solved it by doing the following:

    remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart'); // remove that ajaxified Add To Cart button that automatically adds 1 item to the cart.
    
    add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_single_add_to_cart', 30); // replace it with the Add To Cart Button, complete with QTY field.. the same one that is used on the Single Product page.
    
    woocommerce_show_messages(); // call this WooCommerce function where you want the "X item has been added to cart" message to appear.  Note that this will also override the location of other WooCommerce messages generated by this function.

    This code may also affect other pages where the ajaxified Add To Cart button was called via the woocommerce_after_shop_loop_item action, but I assume having the QTY field can only be a benefit, really... :)

  20. bobdowne
    Member
    Posted 1 year ago #

    Where in the woocommerce-hook file is this added? I have found the corrosponding action but don't know where it is to be added ? Cheers.

  21. Jerome Fitzpatrick
    Member
    Posted 1 year ago #

    You can add it anywhere in your theme's functions.php file or I suppose a create simple plugin to make it reusable and theme independent.

    Call the woocommerce_show_messages() function where you want the "Glass Of Milk was successfully added to your cart" message to physically appear in your theme. E.g. in your header.php file under the div with ID main (assuming you have one in your theme).

  22. geodgeod
    Member
    Posted 1 year ago #

    Bobdowne (or anyone) - would you kindly post and share the code you used if you figured this out. Would be very helpful :)

  23. Jerome Fitzpatrick
    Member
    Posted 1 year ago #

    geodgeod, is the solution I offered not working? Are you using the default template that came with woocommerce?

    Just copy the first 2 lines of code above and paste them anywhere in your theme's functions.php file.

    By adding this code, the usual Buy or Add button will be replaced with a Add to Cart button and a quantity field.

    You will however notice that it won't put the "X Item has been added to your cart" message where you want it. So, you can add the woocommerce_show_messages(); line where you want the messages to appear in your theme.

    Let me know if this solution doesn't work for you.

  24. PowlaG
    Member
    Posted 1 year ago #

    Jerome Fitzpatrick > Is there anyway your solution above can take into account multiple quantities (setup by the min/max extension) ?

    This is the issue I'm having from the archive page when adding quantities.

  25. geodgeod
    Member
    Posted 1 year ago #

    Thanks Jerome. I did as you mentioned and added the code to the bottom of my functions.php file. Still no luck. The issue I may be experiencing is that I am trying to use it on a page where I am calling out categories for the cart using shortcodes like:

    [product_category category="broken homes" per_page="96" columns="4"]

    [product_category category="dancing bears" per_page="96" columns="4"]

    On a standard page. It is also housed on a ithemes builder child theme and looks something like this:

    http://300yeardisc.com/cart-shot.jpg

    Let me know what you think please. And BIG thanks for the help.

  26. pdme
    Member
    Posted 1 year ago #

    Hi all,

    Jerome's solution works for me, with the only drawback that it reloads the page after adding to cart and appends the URL with "?added-to-cart=[id#]".

    Which is less nice than the Ajax function which adds the product without reloading.

    I guess the only way to have both is to hack it the way smashingpixels suggests.

    Right?

    Thanks!

  27. pdme
    Member
    Posted 1 year ago #

    So I managed to add the quantity buttons on the product category page by hacking the code. You may want to make backups before you start tinkering, though.

    In the woocommerce teamplates folder that you copied to your theme folder, in woocommerce/loops/add-to-cart.php, add the line of HTML starting with <div class="quantity"> you find in woocommerce/single-product/add-to-cart/quantity.php.

    (Add it wherever you want, but for this example JS to work, add it right before <?php endif; ?>.)

    You should be able to see the quantity form now.

    Then, in the actual plugin folder, in assets/js/frontend/add-to-cart.min.js, add "var q=t.next().find('input[type="number"]').val();" right after "var t=e(this);".

    Then, a bit further, replace "quantity:t.attr("data-quantity")" with "quantity:q".

    That did it for me.

  28. pdme
    Member
    Posted 1 year ago #

    Only thing is, it works once and then goes back to adding only one item after clicking the same add-to-cart button.

    Anybody know why?

  29. PowlaG
    Member
    Posted 1 year ago #

    This snippet ended up working for me perfectly. Just add it to your functions.php file.

    remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart'); // remove that ajaxified Add To Cart button that automatically adds 1 item to the cart.
    
    add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_single_add_to_cart', 1); // replace it with the Add To Cart Button, complete with QTY field.. the same one that is used on the Single Product page.

    More of an elegant solution. Hoping this helps.

  30. pdme
    Member
    Posted 1 year ago #

    That is indeed a very clean and elegant solution. The only drawback is that it will reload the page after add-to-cart. Ajax avoids that.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic