WooCommerce: always showing add-to-cart button even before variation is selected

Question

On the single product page of variable products, WooCommerce doesn't generate the Add-to-cart button until one variation gets selected. If two variations are required but only one is selected, WC still generates the button but clicking it triggers an error message asking to select all variations.

Apart from the fact that I don't understand this logic (why using a post-submit error message for the second variation and a different solution - the no-submit-button one - for the first?), is there a way to show the add-to-cart button at all times, with a post-submit error message if not all variations were selected ?

Answer 1

This should do the job:

add_action( 'woocommerce_before_add_to_cart_button', function(){
    // start output buffering
    ob_start();
} );

add_action( 'woocommerce_before_single_variation', function(){
    // end output buffering
    ob_end_clean();
    // output custom div
    echo '<div class="single_variation_wrap_custom">';
} );

Practically I've intercepted (inside the template file single-product/add-to-cart/variable.php) the HTML tag <div class="single_variation_wrap" style="display:none;"> that is affected via javascript by the choices of the user, and replaced with <div class="single_variation_wrap_custom"> that is not.

Answer 2

i also think there would be a much higher conversion rate if the add to cart button is always visible. my challenge: show A button allways. if no variation is chosen, display an error message ("please choose a variation") on click. this is how i SOLVED IT. All you need is to edit the functions.php: I use a second "fake" button for that. so first we insert that button:

function wc_custom_addtocart_button(){
    global $product;
    ?>
    <a href="#" class="btn btn-primary btn-block placeholder_button"><?php echo $product->single_add_to_cart_text(); ?></a>
    <?php
}
add_action("woocommerce_before_add_to_cart_button","wc_custom_addtocart_button");

Next we toggle the visibility of it with custom js code:

function run_js_code(){
    if (get_post_type() == "product"):
    ?>
    <script>   
    jQuery(document).ready(function($) {
        // use woocommerce events:
        $(document).on( 'found_variation', function() {
            $(".single_add_to_cart_button").show();
            $(".placeholder_button").hide();
        });
        $(".variations_form").on( 'click', '.reset_variations', function() {
            $(".single_add_to_cart_button").hide();
            $(".placeholder_button").show();
        });
        // display alert when no variation is chosen:
        $(".placeholder_button").click(function(e){
            e.preventDefault();
            alert("Please choose a product variation!");
        });
    });
    </script>
    <?php
    endif;
}
add_action( 'wp_footer', 'run_js_code' );

i then added on line of code to my css:

.single_add_to_cart_button { display: none; }

this way the whole woocommerce code keeps untouched and update safe.