WooCommerce Variable Product notice Issue - please

I'm building an e-commerce site. I'm having some trouble with WooCommerce Variable Product.

The "Add to Cart" button works fine with simple products, but does not work with variable products. It gives a "Please choose product options…" notice.

I looked everywhere and tried several suggestions online, none of them work. So I looked into WooCommerce source file: class-wc-form-handler.php.

In the function add_to_cart_handler_variable:

function add_to_cart_handler_variable( $product_id ) {
    $adding_to_cart     = wc_get_product( $product_id );
    $variation_id       = empty( $_REQUEST['variation_id'] ) ? '' : absint( $_REQUEST['variation_id'] );
    $quantity           = empty( $_REQUEST['quantity'] ) ? 1 : wc_stock_amount( $_REQUEST['quantity'] );
    $missing_attributes = array();
    $variations         = array();
    $attributes         = $adding_to_cart->get_attributes();
    $variation          = wc_get_product( $variation_id );
...
if ( $missing_attributes ) {
        wc_add_notice( sprintf( _n( '%s is a required field', '%s are required fields', sizeof( $missing_attributes ), 'woocommerce' ), wc_format_list_of_items( $missing_attributes ) ), 'error' );
    } elseif ( empty( $variation_id ) ) {
        wc_add_notice( __( 'Please choose product options&hellip;', 'woocommerce' ), 'error' );
    } else {
        // Add to cart validation
        $passed_validation  = apply_filters( 'woocommerce_add_to_cart_validation', true, $product_id, $quantity, $variation_id, $variations );

        if ( $passed_validation && WC()->cart->add_to_cart( $product_id, $quantity, $variation_id, $variations ) !== false ) {
            wc_add_to_cart_message( $product_id );
            return true;
        }
    }
    return false;
}

The error is caught in the elseif clause.
So I tried to echo out $variation_id, $variations, and $variation. None of them has anything in it because when I echo $variation_id: it doesn't output anything.

Any suggestions?

On shop page you can't use add-to-cart button for variable products, because you need first to go on single product page to chose the options for this variable product before adding it to cart.

On variable product pages, normally you have some displayed options to chose for a variable product, before using "add to cart" button. If you don't do it, you get the error message…
So at this point:

The options are not displayed in the product page (Bad settings in your backend product page, a bug with your theme or some additional plugin):
- Check your product backend settings
- Try to switch to default wordpress theme (to see if this issue is still there)
- Try to disable most of all plugins.
the options are displayed: So chose your options first for this product, then add to cart

If this issue is related to your theme, contact the author of your theme and open a support thread or ticket…

OUPUTTING PRODUCT VARIATIONS FOR A PRODUCT ID:

To get product variations programmatically for a variable product ID:

$product = wc_get_product( $product_id );
$product_variations = $product->get_available_variations();

echo var_dump($product_variations); // Displaying the array

Then to get the first variation ID:

$product = wc_get_product( $product_id );
$product_variations = $product->get_available_variations();

$variation_product_id = $product_variations [0]['variation_id'];
echo $variation_product_id; // Displaying the variation ID

Or to get an array of all variations ID of this product ID:

$product = wc_get_product( $product_id );
$product_variations = $product->get_available_variations();

$arr_variations_id = array();
foreach ($product_variations as $variation) {
    $product_variation_id = $variation['variation_id'];
    array_push( $arr_variations_id, $product_variation_id );
}

echo var_dump($arr_variations_id); // Displaying the array of variations ID

A reference : Change "Add to Cart" button to "Go to Product" in the Shop Page