-
Posts
-
hello
i used a code snippet from woocommerce Documentation (https://docs.woocommerce.com/document/override-loop-template-and-show-quantities-next-to-add-to-cart-buttons/) to show quantities next to add to cart buttons in a shop i’m building
but
1. once i did the details/add to cart buttons are on on top of the other instead of next to each other
2. also when adding to cart the page reloads (not Ajax any more)
is there a way to fix it?link to the shop is in the private content
EDIT: I found other code snippet here in the forum in this link: https://kriesi.at/support/topic/add-a-quantity-field-to-woocommerce-products/#post-690610
and it works much better!
it doesn’t break the buttons position and it doesn’t reload the page!
BUT
it plays well only in the ‘websitename/shop’ page
if I go to ‘websitename/product-category/category-name’ and try to change quantity to one of the products – it immediately loads the product page
is there a way to fix it? that would be perfect…for now i reverted to the first code snippet (https://docs.woocommerce.com/document/override-loop-template-and-show-quantities-next-to-add-to-cart-buttons/) which work on all pages (not just the shop page)
BUT
1. more details/add to cart buttons are on on top of the other instead of next to each other (there is a screen shot in the private content)
2. theres is absolutely un necessary cart icon next to the + / – buttons (there is a screen shot in the private content)
3. pressing ‘add to cart’ makes the page reloads (not Ajax any more)UPDATE:
..ok, i fiddled with the css a little bit and i think i solved the buttons position problem
it’s not perfect but it’s o.k ( an updated screenshot is in the private content)
(..i’m still hoping someone could help me make it look better than it is?)..but more important: ‘add to cart’ still reloads the page any chance the we can fix it?
i really hope so because the other code (in https://kriesi.at/support/topic/add-a-quantity-field-to-woocommerce-products/#post-690610) didn’t reload the page so there must be a way to do it, right?Hi,
1- Please add following code to Quick CSS
div form.cart div.quantity { width: 100%; text-align: center; } .avia_cart_buttons span { top: 83px; }2- Please refer to this post
Best regards,
YigitHi Yigit
thank you for helping me :)1. I added your code and it works great!
2. the code used in the post isn’t working – it causes ‘server 500 error’ massage to appear every time you press the ‘add to cart’ button
so i had to remove it..any chance there is another fix the the page reloading problem?
Hi,
The code from the previous thread works well on my installation but you have to do a slight modification.
// https://kriesi.at/support/topic/add-a-quantity-field-to-woocommerce-products/#post-690610
Find this line:
// For AJAX add-to-cart actions add_to_cart_button.data( "quantity", jQuery( this ).val() );.. replace it with:
// For AJAX add-to-cart actions add_to_cart_button.attr( "data-quantity", jQuery( this ).val() );The ajax functionality of the add to cart button is still working after adding the code.
Best regards,
IsmaelHi Ismael
the ajax functionality from the previous thread worked for me even before your code modification
it also works after the changes you suggested
the problem is it plays well only in the ‘websitename/shop’ page
if I go to ‘websitename/product-category/category-name’ and try to change quantity to one of the products – it immediately take me into the product page (and doesn’t update the cart)
is that the same on your installation?i have to keep the shop running so for now I reverted to the first code snippet (https://docs.woocommerce.com/document/override-loop-template-and-show-quantities-next-to-add-to-cart-buttons/) which unfortunately reloads the page but work on all pages (not just the shop page)
Hi,
Thank you for the update.
Please use the second snippet or workaround then add the following filter or script in the functions.php file.
// product quantity fix function ava_custom_script_mod(){ ?> <script> (function($){ function a() { var category = $('body').is('.tax-product_cat'); console.log(category); if(!category) return; $('li.product').each(function() { var link = $(this).find('.woocommerce-LoopProduct-link'), header = $(this).find('.inner_product_header'), quantity = $(this).find('.quantity'); quantity.insertAfter(link); header.insertAfter(link); }); } a(); })(jQuery); </script> <?php } add_action('wp_footer', 'ava_custom_script_mod');It’s not working in the category page because the quantity button is wrapped inside an anchor link.
Best regards,
IsmaelHi,
Did you remove the browser cache after adding the script? Please post the login details here so that we can test it.
Best regards,
Ismaelyes i did remove the browser cache.. still not working
I posted the login details in the private contentHi,
Thank you for the info.
We modified the code in the functions.php file. Please remove browser cache or hard refresh before checking the page. (see private field)
Best regards,
Ismaelwow! everything works perfectly
you are the best support ever, thank you so much!just one little thing – the ‘more details’ button gone
i’m not sure, is it on purpose?
but if it’s part of the solution than it’s really small price to pay
thank you very much!Hi,
Glad that it is working. The “show details” button is not displaying because of the following css modification.
a.button.show_details_button { float: left!important; margin-top: -42px!important; }Best regards,
Ismaelgreat! thank you so much!
you can close this thread..I still have some RTL/button position issues
but since it’s another topic i opened a new thread (https://kriesi.at/support/topic/woocommerce-buttons-rtl-issues/)
i hope it’s o.kHi Doron,
Glad you got it working for you! :)
If you need further assistance please let us know.
Best regards,
VictoriaHi I also have troubles with the lay-out when I add the Quantity button in the shop overview.
screenshot: https://pasteboard.co/HCamgSR.png
See link in private contentHi Yannick77,
What code did you use to add it there?
Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
Best regards,
VictoriaHI Vicoria
I’ve been playing around with the quantity buttons – I’ve used this PHP code?php add_action( 'woocommerce_before_shop_loop_item', 'beardedguy_add_quantity_input' ); function beardedguy_add_quantity_input() { global $product; $product_type = ( version_compare( WC_VERSION, '3.0', '<' ) ) ? $product->product_type : $product->get_type(); if ( 'simple' == $product_type ) { remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 ); add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_single_add_to_cart', 10 ); } else { remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_single_add_to_cart', 10 ); add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 ); } } ?>and via CSS I’m able to hide the extra “add to cart button but I really would like the quantity buttons ligned out in the center middle
ps: ok hiding the “add to cart button” hides it also from the single product page :( so I need also a solution for that
Hi,
Thanks for the update.
These css codes should center align the quantity buttons.
#top form.cart { margin-bottom: 20px; text-align: center; } #top div form.cart div.quantity, #top div form.cart button { float: none; margin: 0 3% 5px 0; display: inline-block; }Best regards,
IsmaelHi Ismael
It’s not 100% what I wanted but it will do.I had to hide the AVIA/Enfold “add to cart” & “more info” button because it was showing a double “add to cart” button – also the quantity selector did not work with the Avia add to cart button – the quantity stayed at “1” alltough I selected more items…
Hi,
I would like to check it again but I got temporarily locked out of the site due to Wordfence. Would you mind providing a screenshot?
Best regards,
IsmaelHi,
I’m sorry due to restoring a back-up the user disapeared.
In fact I just would like to have the quantity field added above the Enfold “ad to cart” & “more info” button” in the shop overview page. And that the customer stays on the same page when he added a product to the cart.
Hi,
You can use this code to show the quantity selectors above the add to cart button – you can add it to the style.css or quick css field:
#top #wrap_all div .products form.cart div.quantity { display: block; }Best regards,
PeterHi Peter,
I presume you tested it with the “standard woocommerce” buttons. I removed the PHP and CSS Styling showing the quantity and add to cart button. Now it shows the ENFOLD lay-out which I want. (see link in private content)
In these Enfold product boxes I would like to have the quantity selector – in the middle below the price and above the “add to cart” & “more details” buttons.
Sorry for the confusion.
- You must be logged in to reply to this topic.