woocommerce-variation placeholder set to display: none

Ok so it nearly works, but the script still overrides things.
And so you get inconsistent results depending whether you are loading the whole page or just toggling the options.

I dont know much about jquery. can you post an example here of whats needed for :-

When variation is shown, show the button.
When variation is hidden, hide the button.

I’m sure it would be very helpful for others

$single_variation = jQuery( '.single_variation' );

$single_variation.on( 'show_variation', function() {
  jQuery( '.woocommerce-variation-add-to-cart' ).show();
});

$single_variation.on( 'hide_variation', function() {
  jQuery( '.woocommerce-variation-add-to-cart' ).hide();
});

Ok so I’ve tried that. The result is that the button is always shown and when default variation does exist the price quanities etc arent shown. And the description, additional fields etc that were shown as tabs are now shown in full.

Are we testing the right field ?

Ok here’s my js file
‘
/* f14a_HideAddtoCartButton */
/* if no default variation hide add to cart button */
jQuery( function( $ ) {

$single_variation = jQuery( ‘.single_variation’ );

$single_variation.on( ‘show_variation’, function() {
jQuery( ‘.woocommerce-variation-add-to-cart’ ).show();});

$single_variation.on( ‘hide_variation’, function() {
jQuery( ‘.woocommerce-variation-add-to-cart’ ).hide(); });

})
‘
It is being loaded as if I remove the load command it goes back to how it was before. But have tried changing the show/hide values and it makes no difference.

woocommerce-variation-add-to-cart is the div which contains the button.

You could hide it initially with:

$single_variation = jQuery( '.single_variation' );

$single_variation.on( 'show_variation', function() {
  jQuery( '.woocommerce-variation-add-to-cart' ).show();
});

$single_variation.on( 'hide_variation', function() {
  jQuery( '.woocommerce-variation-add-to-cart' ).hide();
});

jQuery( '.woocommerce-variation-add-to-cart' ).hide();

I think there must be a problem with my implementation. All that happens is that all jquery type activity for that area doesnt work any more.
Nothing makes any difference even an empty jQuery function in the .js file. The file is being loaded as if I remove the code from the header it goes back to how it was.

This is what I have.

* Entry in header.php
———————————

<script type=”text/javascript”>
jQuery(document).ready(function(){
jQuery(“.single_variation”).f14a_HideAddtoCartButton({
});
});
</script>

* Entry in functions.php
———————————

function my_scripts_method() {
wp_enqueue_script( ‘f14a-fp-slider’, get_template_directory_uri() . ‘/js/jcarousellite.js’, array(‘jquery’), ‘1.1’, true );
wp_enqueue_script( ‘f14a_HideAddtoCartButton’, get_template_directory_uri() . ‘/js/f14a_HideAddtoCartButton.js’, array(‘jquery’), ‘1.1’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘my_scripts_method’ );

* Contents of f14a_HideAddtoCartButton.js
———————————————————-

/* f14a_HideAddtoCartButton */
/* if no variation being shown – hide add to cart button */
jQuery( function( $ ) {

$single_variation = jQuery( ‘.single_variation’ );

$single_variation.on( ‘show_variation’, function() {
jQuery( ‘.woocommerce-variation-add-to-cart’ ).show();});

$single_variation.on( ‘hide_variation’, function() {
jQuery( ‘.woocommerce-variation-add-to-cart’ ).hide(); });

})

The code in header is not needed, its breaking the page scripts.

Thats great it works now.

Is there anything that can be done about the delay ? So obviously it runs the woocommerce script the button appears then disappears.

Not sure on that one. I would suggest you eventually style it to be shown always, as the default template does.

Many Thanks for all your help.

Hello, If I wanted to show the ‘in stock’ even before any product variation were selecting would this code be of any help to me?

Basically, google merchant centre want to see the ‘in stock’ on the product landing page. The problem with woocommerce is that this doesnt show up until a variation is selected, meaning that google merchant center throws an error.

Is there a way I can display in stock by default?