Custom HTML for WooCommerce product variation dropdown

Question

I want to get the CUSTOM HTML for Single Product Page variation Drop Down.

I got some clue here.

Another reference Link

Its Functions are located here →

woocommerce/includes/wc-template-functions.php

I want that the Final HTML to look like this →

<select class="customdropdown" name="customdropdown" id="customdropdown">
    <option value="license_one" data-1="500">License One</option>
    <option value="license_two" data-2="700">License Two</option>
    <option value="license_three" data-3="1400">License Three</option>
</select>

What is the correct process? We have to edit some template or we have to make changes by using some hooks in WooCommerce?

If there is some hook. Can someone guide me to the proper hook?

Answer 1

add_filter( 'woocommerce_dropdown_variation_attribute_options_args', 'wt_dropdown_choice' );

/**
 * Change the custom dropdown  "Choose an option" text on the front end
 */
function wt_dropdown_choice( $args ){
        if( is_product() ) {
                $args['show_option_none'] = "Add your custom text in here"; // Change your text here
                $args['class'] = 'customdropdown';
        }  
        return $args;    
}

Try this code for adding class to the select box - You cannot change the id and other unique names for attributes, it will disable the add to cart function to work properly