Creating custom buttons for WooCommerce product attribute

Question

In WooCommerce , I have an attribute called size .

By default, WooCommerce spits out a dropdown to showcase this. But, I'm trying to create custom buttons to showcase size .

I have the following so far:

 <?php global $post; global $product; $args = array( 'post_type' => 'product', 'posts_per_page' => 2 ); $loop = new WP_Query($args); while ( $loop->have_posts() ): $loop->the_post(); $product_id = get_the_ID(); $product = wc_get_product($product_id); $variations = $product->get_available_variations(); $variations_id = wp_list_pluck( $variations, 'variation_id' ); print_r($variations_id); foreach ($product->get_available_variations() as $variation) { foreach (wc_get_product($variation['variation_id'])->get_variation_attributes() as $attr) { echo '<pre>'; var_dump(wc_attribute_label( $attr )); echo '</pre>'; } } endwhile; wp_reset_query(); ?>

The above successfully outputs the sizes for a product, ie it outputs:

But, I can't figure out how to define on click actions for my custom buttons, can't see anything documented either. So when a user clicks my custom button and then clicks add to cart, that it adds the correct size to the cart.

I'm trying to achieve this without the use of a plugin, is it achievable?

Answer 1

you can hide the the default size dropdown and onclick of your custom button you can change the values in the hidden input.

OR

You need to need to hit API from your custom add to cart button which will take variation id with product id

If you can send me link then maybe guide you better. Please accept if it works