We’ve already covered a similar customization on Business Bloomer: how to display Ajax quantity selectors on the WooCommerce Shop page. The problem there was that that only works for simple products, and only when Ajax add to cart is activated via the WooCommerce settings.
Today I’d like to experiment a little, and see what happens when we include the “add to cart template” (i.e. the one you see on the WooCommerce Single Product page) under each product on the WooCommerce Shop page.
This *should* work with all product types – especially variable products – because you will see the attribute dropdown selectors in such a case, as if you were on the single product page.
I haven’t tested this with grouped, bundle, and special product types, so feel free to share your findings in the comments below. Enjoy!
PHP Snippet: Display Add to Cart Form For Each Product @ WooCommerce Shop Page
/**
* @snippet Add Cart Form @ WooCommerce Shop
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 8
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_display_whole_add_cart_form', 1 );
function bbloomer_display_whole_add_cart_form() {
global $product;
if ( ! $product->is_purchasable() ) return;
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', 11 );
}