Woo Commerce Add to cart is not showing on Variable Product

Question

I am using Woo-commerce for online shopping.

I create some variable products, but when I am going view full page of product it says

Add to Cart is Hidden

I tried forcefully show the "Add to cart" button using display: block in CSS but when I click on that it gives me error

Please choose product options

Also there is no error in developer console

Can anyone know what exactly happened or where I am wrong or is it a script problem?

Answer 1

Did you set a price for your product? If not, the Add to cart button will stay hidden.

Answer 2

add_action('wp_head','add_to_cart_script');
function add_to_cart_script(){
  if(is_product()){
    wp_enqueue_script('wc-add-to-cart-variation');
  }
}

There was Jquery problem add-to-cart-variation.js was not included.

Now its working fine for me...

Answer 3

For anyone else who finds this, the wc-add-to-cart-variation script is loaded by WooCommerce in the footer. So, if it isn't loading your theme either 1. doesn't have wp_footer() (which is rare as even crap themes should have this) or 2. there is a PHP error in the theme templates and the page is not fully loading.

I would suggest checking the latter point. You can view a page's source code. In Chrome just type CTRL+U.

Scroll all the way to the bottom. The last thing you should see is:

</html>

If you don't see this the page didn't load fully, likely do to a fatal PHP error.

You can find out exactly where by enabling WP_DEBUG in your wp-config.php file.

If anything, I'd guess that your theme has some WooCommerce templates that are out of date with respect to the current WooCommerce. This post is old, but this keeps happening as WooCommerce keeps evolving and themes keep packaging templates that they don't even modify.

This issue is probably caused by an outdated single-product/add-to-cart/variable.php template. But if renaming that doesn't solve it, in a pinch you can always disable your theme's entire WooCommerce templates by renaming the WooCommerce folder in your theme to anything else. 99% of the time it will be called woocommerce, but it could be something else.

WooCommerce will now let you know which templates are out of date. This information can be found in the admin under WooCommerce>System Settings.

Another good read would be: http://develop.woothemes.com/woocommerce/2014/02/solving-common-issues-after-updating-to-woocommerce-2-1/

Answer 4

I managed to display the 'Add to cart' button as follows:

1. Locate the variable product template file in your theme directory:

   templates/single-product/add-to-cart/variable.php

2. Add this code to the end of that file:

   <script>
   $(window).load(function(){
       $(".single_variation_wrap").show();
       $(".single_add_to_cart_button").click(function(){
           if($("#pa_size").val() == ''){
               alert('Please select size');
               return false;
           }
       });
   });
   

This is what I used. Maybe you have other fields and/or classes/ids. Just play around, I hope it will work for you.