I created a custom woocommerce shop page for variable products but not working

I created the page using WP_Query and pulling in the data. However when i select an option and click on Add to Cart, I get the following message: Please choose product options by visiting International Phone: Bronze.

How come it’s not recognizing the option I am selecting?

Here is the code for it…

// Display variations dropdowns on shop page for variable products
add_filter( 'woocommerce_loop_add_to_cart_link', 'show_var_on_shop' );
function show_var_on_shop() {
	global $product;
	if( $product->is_type( 'variable' )) {
		$attribute_keys = array_keys( $product->get_attributes() );
?>
<form class="variations_form cart cust_var_form_in_shop" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->id ); ?>" data-product_variations="<?php echo htmlspecialchars( json_encode( $product->get_available_variations() ) ) ?>">
	<?php do_action( 'woocommerce_before_variations_form' ); ?>
	<?php if ( empty( $product->get_available_variations() ) && false !== $product->get_available_variations() ) : ?>
	<p class="stock out-of-stock"><?php _e( 'This product is currently out of stock and unavailable.', 'woocommerce' ); ?></p>
	<?php else : ?>
	<div class="prod-archive flex-show">
		<div class="prod-attr-parent set-rel">
			<?php foreach ( $product->get_variation_attributes() as $attribute_name => $options ) : ?>
			<div class="prod-attr flex-show set-rel">
					<div>
						<label for="<?php echo sanitize_title( $attribute_name ); ?>"><?php echo wc_attribute_label( $attribute_name ); ?></label>
					</div>
					<div>
						<?php
				$selected = isset( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ? wc_clean( urldecode( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ) : $product->get_variation_default_attribute( $attribute_name );
				wc_dropdown_variation_attribute_options( array( 'options' => $options, 'attribute' => $attribute_name, 'product' => $product, 'selected' => $selected ) );
				echo end( $attribute_keys ) === $attribute_name ? apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . __( 'Clear', 'woocommerce' ) . '</a>' ) : '';
							?>
					</div>
				</div>
			<?php endforeach;?>
		</div>
		<?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>
		<div class="single_variation_wrap">
			<?php
			/**
						 * woocommerce_before_single_variation Hook.
						 */
			do_action( 'woocommerce_before_single_variation' );
			/**
						 * woocommerce_single_variation hook. Used to output the cart button and placeholder for variation data.
						 * @since 2.4.0
						 * @hooked woocommerce_single_variation - 10 Empty div for variation data.
						 * @hooked woocommerce_single_variation_add_to_cart_button - 20 Qty and cart button.
						 */
			do_action( 'woocommerce_single_variation' );

			/**
						 * woocommerce_after_single_variation Hook.
						 */
			do_action( 'woocommerce_after_single_variation' );
			?>
		</div>
		<?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
		<?php endif; ?>
		<?php do_action( 'woocommerce_after_variations_form' ); ?>
	</div>
</form>
<?php } else {
		echo sprintf( '<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
					 esc_url( $product->add_to_cart_url() ),
					 esc_attr( isset( $quantity ) ? $quantity : 1 ),
					 esc_attr( $product->id ),
					 esc_attr( $product->get_sku() ),
					 esc_attr( isset( $class ) ? $class : 'button' ),
					 esc_html( $product->add_to_cart_text() )
					);
	}
}

The page I need help with: [log in to see the link]