Variable product add to cart in listing page

For variant products, in listing pages it only shows ‘select options’.
Once user clicks it, it takes them to product details page and there they get options to select proper variant and add to cat button.

But what if, you want your customers to select options from product listing pages like shop page, category page, archive page etc directly ?

Then you need to follow these steps –

  • In your theme, create a folder called woocommerce if you don’t already have one in there.
  • In your plugins folder, go to woocommerce > templates and copy the content-product.php file from there to the woocommerce folder we created in your theme in Step 1 above. If the template already exists in ‘woocommerce’ folder no need to replace.
  • Now open the template file and look for a code – do_action( ‘woocommerce_after_shop_loop_item’ );
  • replace the above mentioned code with following lines –
    remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_title’, 5 );
    remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 10 );
    remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 20 );
    do_action( ‘woocommerce_single_product_summary’ );

With this change add to cart button will be available in all your product listing pages – shop page, product category page, archive page.