Change Woocommerce variable.php from table to div - php

Question

I am currently customizing (or trying) the yourtheme/woocommerce/single-product/add-to-cart/variable.php in my theme however even though I've tried I can't seem to get rid of the table in the woocommerce code and replace it by divs and dropdown lists. I would like it to look like the sections below:
<!-- Product Section -->
<section>
<div class="container my-5 px-5 pt-4 bg-light">
<div class="row no-gutters">
<div class="col-md-5">
<img src="<?php bloginfo('template_directory'); ?>/assets/images/best-seller.jpg" class="img-fluid w-75 m-auto d-block"
alt="Best Seller">
</div>
<div class="col-md-7 pr-md-5">
<h1 class="main-heading my-4">BLACK MATTE JAR</h1>
<form>
<div class="form-row">
<div class="form-group col-md-7">
<label for="inputSize">Size</label>
<select id="inputSize" class="form-control">
<option selected>Big - 14 oz</option>
<option>Small - 10 oz</option>
</select>
</div>
<div class="form-group col-md-4 offset-md-1">
<label for="inputQuantity">Quantity</label>
<select id="inputQuantity" class="form-control">
<option selected>1 unit</option>
<option>2 unit</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-7">
<label for="inputFragrance">Fragrance</label>
<select id="inputFragrance" class="form-control">
<option selected><img src="<?php bloginfo('template_directory'); ?>/assets/images/icon-1.png" class="d-inline w-25">Peace
of mind</option>
<option>Refreshing</option>
</select>
</div>
<div class="form-group col-md-4 offset-md-1 mt-auto">
<div class="product-price pb-3">
<h5>Price <span class="float-right">25$</span></h5>
</div>
</div>
</div>
<button type="submit" class="btn btn-lg px-5 my-4">ADD TO CART</button>
</form>
</div>
</div>
</div>
</section>
So when I started all this, I managed to get all my product variations with the code below, however I couldn't figure out how to manage the woocommerce hooks and how to get the proper variation price when the user changed the dropdown list (so the code below was not using hooks at all)
`<div class="col-md-7 pr-md-5">
<h1 class="main-heading my-4"><?php the_title(); ?></h1>
<?php
/*** ADD TO CART DYNAMIC */
$attribute_keys = array_keys( $attributes );
$variations_json = wp_json_encode( $available_variations );
$variations_attr = function_exists( 'wc_esc_json' ) ? wc_esc_json( $variations_json ) : _wp_specialchars( $variations_json, ENT_QUOTES, 'UTF-8', true );
do_action( 'woocommerce_before_add_to_cart_form' ); ?>
<form class="variations_form cart" action="<?php echo esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->get_id() ); ?>" data-product_variations="<?php echo $variations_attr; // WPCS: XSS ok. ?>">
<div class="form-row">
<div class="form-group col-md-7">
<label for="inputSize">Size</label>
<select id="inputSize" class="form-control">
<?php
$product = wc_get_product( get_the_id() );
$size = $product->get_attribute('size');
$size_array = print_r ($size , TRUE);
$size_text = explode ('|', $size_array);
$aux_size = 0;
foreach ($size_text as $s_txt){
if ($aux ==0) {
?><option selected><?php echo $s_txt ?></option>
<?php
} else {
?><option><?php echo $s_txt ?></option>
<?php
}
}
?>
</select>
</div>
<div class="form-group col-md-4 offset-md-1">
<label for="inputQuantity">Quantity</label>
<select id="inputQuantity" class="form-control">
<option selected>1 Unit</option>
<option>2 Units</option>
<option>3 Units</option>
<option>4 Units</option>
<option>5 Units</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-7">
<label for="inputFragrance">Fragrance</label>
<select id="inputFragrance" class="form-control">
<?php
$fragrance = $product->get_attribute('fragrance');
$fragrance_array = print_r ($fragrance , TRUE);
$fragrance_text = explode ('|', $fragrance_array);
$aux_size = 0;
foreach ($fragrance_text as $f_txt){
if ($aux ==0) {
?><option selected><?php echo $f_txt ?></option>
<?php
} else {
?><option><?php echo $f_txt ?></option>
<?php
}
}
?>
</select>
</div>
<div class="form-group col-md-4 offset-md-1 mt-auto">
<div class="product-price pb-3">
<h5>Price <span class="float-right">25$</span></h5>
</div>
</div>
</div>
<button onclick="Add_to_cart(<?php $product?>)" type="submit" class="btn btn-lg px-5 my-4">ADD TO CART</button>`
Then I discovered the variable.php, so below is what I can't make it:
1 - can't seem to give the same look and feel as before (refer to first code shown in this post.
2 - When I replace in the below code the and by div's the first div on the first iteration gives me $attribute_name = null.
<?php foreach ( $attributes as $attribute_name => $options ) : ?>
<tr>
<td class="label"><label for="<?php echo esc_attr( sanitize_title( $attribute_name ) ); ?>"><?php echo wc_attribute_label( $attribute_name ); // WPCS: XSS ok. ?></label></td>
<td class="value">
3 - I can't seem to fetch the variation price upon user change the product attributes.
Did any of you managed to achieve this? If so could you share your code? I really hope this thread is cleaner and clearer. I've added till where I've got in the code below.
<div class="col-md-7 pr-md-5">
<h1 class="main-heading my-4"><?php the_title(); ?></h1>
<?php
/*** ADD TO CART DYNAMIC */
$available_variations = $product->get_available_variations();
$attributes = $product->get_variation_attributes();
$attribute_keys = array_keys( $attributes );
$variations_json = wp_json_encode( $available_variations );
$variations_attr = function_exists( 'wc_esc_json' ) ? wc_esc_json( $variations_json ) : _wp_specialchars( $variations_json, ENT_QUOTES, 'UTF-8', true );
do_action( 'woocommerce_before_add_to_cart_form' ); ?>
<form class="variations_form cart" action="<?php echo esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->get_id() ); ?>" data-product_variations="<?php echo $variations_attr; // WPCS: XSS ok. ?>">
<?php do_action( 'woocommerce_before_variations_form' );
?>
<?php if ( empty( $available_variations ) && false !== $available_variations ) : ?>
<p class="stock out-of-stock"><?php echo esc_html( apply_filters( 'woocommerce_out_of_stock_message', __( 'This product is currently out of stock and unavailable.', 'woocommerce' ) ) ); ?></p>
<?php else : ?>
<table class="variations" cellspacing="0">
<tbody>
<?php foreach ( $attributes as $attribute_name => $options ) : ?>
<tr>
<td class="label"><label for="<?php echo esc_attr( sanitize_title( $attribute_name ) ); ?>"><?php echo wc_attribute_label( $attribute_name ); // WPCS: XSS ok. ?></label></td>
<td class="value">
<?php
wc_dropdown_variation_attribute_options(
array(
'options' => $options,
'attribute' => $attribute_name,
'product' => $product,
)
);
?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<div class="single_variation_wrap">
<?php
/**
* Hook: woocommerce_before_single_variation.
*/
do_action( 'woocommerce_before_single_variation' );
/**
* Hook: woocommerce_single_variation. 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' );
/**
* Hook: woocommerce_after_single_variation.
*/
do_action( 'woocommerce_after_single_variation' );
?>
</div>
<?php endif; ?>
Ive been trying to change it for days without any success I return back to the original code most of the time this is the reason why I made my first post here as I cannot add the price into this code, nor turn it as per my html design.
Sorry for the simple question but I can't find anyone online that have achieved this before.

Answer 1

I've managed to do it with the following code:
<?php endforeach; ?>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="">Quantity</label>
<div class="single_variation_wrap">
<?php
/**
* Hook: woocommerce_before_single_variation.
*/
do_action( 'woocommerce_before_single_variation' );
/**
* Hook: woocommerce_single_variation. 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' );
/**
* Hook: woocommerce_after_single_variation.
*/
do_action( 'woocommerce_after_single_variation' );
?>
</div>
</div>
<div class="form-group col-md-6 mt-6">
<div class="product-price pb-3">
<h5 >Price <?php echo $product->get_price_html(); ?></h5>
</div>
</div>
</div>
<?php endif; ?>
<?php do_action( 'woocommerce_after_variations_form' ); ?>
</form>
I've converted the tds into div's in an easy manner that is still identifiable by woocommerce. Furthermore I've managed to fetch the price as shown in the code.
Now I am only having one issue which is to force the user to stay in my custom page if no selection is made.
Hope someone can suport me