With WooCommerce you have some shortcodes available to use anywhere in your site.
One of them is the shortcode [add_to_cart]
which allows printing the Add to Cart button for a specific product on your site.
It only shows the button though, you can’t choose the quantity of that product without going to the cart page before.
You can include the quantity field tweaking the default template.
Let’s see how.
Download “Loop Add to Cart”
add-to-cart-2.5.0.zip – Downloaded 7238 times – 1.27 KBDownload the zip above and extract it. Put the file add-to-cart.php in wp-content/themes/your-theme-name/woocommerce/loop/. This path may not exists, if it’s your case, create it and then paste the file in it.
This file will include the field in the shortcode which will show like this in Storefront:
What does it change?
The template above includes this code:
The if
prevents the quantity field to show also on the Shop page and on the product category and tag archives.
The code inside the if
prints the quantity field and makes it look better.
After it, also includes this JavaScript (printed by WooCommerce in the website footer):
This JS makes sure that when you update the quantity field, also the button is updated so when you click on it, the correct quantity is added to the cart.
Download “Loop Add to Cart”
add-to-cart-2.5.0.zip – Downloaded 7238 times – 1.27 KB
Leave a Reply