Reputation: 3174
My add to cart button only visible when a variable select other wise it seems to be hidden. Is there any way to show a message instead of hidden add to cart button ? Some thing like "Please choose an option".
not sure : may be this filter can work
woocommerce_single_variation_add_to_cart_button
Upvotes: 0
Views: 941
Reputation: 636
By default, Woocommerce only shows add to cart button once there's an active variation with price,
you'll see on there demo that Add To Cart is hidden when no variation is selected,
Now if you want to add a message when there's no active variation selected, you can hook the message on woocommerce_before_add_to_cart_button
or woocommerce_after_add_to_cart_button
e.g.
function add_to_cart_place_holder() {
global $post;
//get_product id
$product = get_product( $post->ID );
//if Product is variable add a message
if( $product->is_type( 'variable' ) ){
echo '<p class="atc_placeholder">Please choose an option</p>';
}
}
//Hook product message after Add To cart Button
add_action('woocommerce_after_add_to_cart_button', 'add_to_cart_place_holder');
Your message will appear below the Add To cart button, next thing you want is to hide this message when there's an active variation, so we need to listen the event of variation selection, you can have this code below to give you an idea, its not the best solution but it should work fine, I also use setTimeout function to get the correct css display property after woocommerce modified it,
( function($) {
// capturing even when select option is change
$('form.cart').on('change', '.variations select', function() {
//Add 300ms before checking '.single_variation_wrap' display property
setTimeout(function () {
//Show message if add to cart button is hidden
if ( !$('.single_variation_wrap').is(':visible') ) {
$('.atc_placeholder').show();
//hide the mssage when add to cart button is visible
} else {
$('.atc_placeholder').hide();
}
}, 300);
});
})(jQuery);
Upvotes: 2