Changing Woo product page based on Selected variation

  • Resolved Charlie Cooper

    (@coopero1)


    4 years, 5 months ago

    Hi All,

    Really struggling on this one – I think I need to get JS involved but I’m sure how to implement it. Here goes:

    I have written PHP to display a shipping countdown – ie. ‘Recieve tomorrow if you purchase within 2 hours 5mins’ on product pages. It works great for simple products, but variations are more challenging.

    I need to pull the currently selected variation of the product and then if it’s not in stock, display:none my countdown.

    Any ideas? I’ve seen loads of code for JS but I don’t know how to make that work the way I need it to because it can’t then pass to php.

    Thanks in advance ??

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hey @coopero1,

    That’s a tricky one. When a variation is out of stock, there are some classes added via JavaScript to the HTML. What you might be able to do is write some JavaScript to look for these classes and then hide your banner when they exist.

    I would look at when the add to cart button is disabled which should cover most cases when you would want the banner to be hidden.

    
<button type="submit" class="single_add_to_cart_button button alt disabled wc-variation-is-unavailable">Add to cart</button>

    Since the page isn’t reloaded when a variation is selected, JavaScript would be a better way to handle this than putting it in the PHP.

    Cheers

    Thread Starter Charlie Cooper

    (@coopero1)

    Thanks for your response. That’s not far from what I did! We spotted a div that changes and wrote this to recalculate. Note the timeout of 0.5 secs allows the page to update.

    jQuery(function($){
	
	$( ".variations_form" ).on( "woocommerce_variation_select_change", function () {
		setTimeout(function (){
		if ( $( ".in-stock" ).length ) {
        $('div.getit').show('fast');
        } else {
        $('div.getit').hide('fast');
		}
		}, 500);
        }
	)});
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Changing Woo product page based on Selected variation’ is closed to new replies.