Display WooCommerce Product Variation in Table Instead of Drop down

Woocommerce provide lots of function to extend the functionality.

To replace drop down to table we are going to use woocommerce_variable_add_to_cart function.

Here is the code :-

function woocommerce_variable_add_to_cart() {
global $product, $post;
$variations = $product->get_available_variations();
?>
<table>
<tbody>
<?php
foreach ($variations as $key => $value) {
?>

<tr>
<td>
<b><?php echo implode(‘/’, $value[‘attributes’]);?></b>
</td>
<td>
<?php echo $value[‘price_html’];?>
</td>
<td>
<form action=”<?php echo esc_url( $product->add_to_cart_url() ); ?>” method=”post” enctype=’multipart/form-data’>
<input type=”hidden” name=”variation_id” value=”<?php echo $value[‘variation_id’]?>” />
<input type=”hidden” name=”product_id” value=”<?php echo esc_attr( $post->ID ); ?>” />
<input type=”hidden” name=”add-to-cart” value=”<?php echo esc_attr( $post->ID ); ?>” />
<?php
if(!empty($value[‘attributes’])){
foreach ($value[‘attributes’] as $attr_key => $attr_value) {
?>
<input type=”hidden” name=”<?php echo $attr_key?>” value=”<?php echo $attr_value?>”>
<?php
}
}
?>
<button type=”submit” class=”single_add_to_cart_button button alt”><?php echo apply_filters(‘single_add_to_cart_text’, __( ‘Add to cart’, ‘woocommerce’ ), $product->product_type); ?></button>
</form>
</td>
</tr>

<?php
}
?>
</tbody>
</table>
<?php
}

You have to place this code in your theme functions.php file and you will see table instead of drop down in your website product page :).

If you like it share this.