skip to Main Content

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?

2

Answers


  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

    Login or Signup to reply.
  2. In themes/active-child/woocommerce/single-product/add-to-cart create a file variable.php and past below code.

    <?php
    /**
     * Variable product add to cart
     *
     * @author  WooThemes
     * @package WooCommerce/Templates
     * @version 2.4.0
     */
    if ( ! defined( 'ABSPATH' ) ) {
        exit;
    }
    global $product;
    $attribute_keys = array_keys( $attributes );
    do_action( 'woocommerce_before_add_to_cart_form' ); ?>
    
    <form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->id ); ?>" data-product_variations="<?php echo esc_attr( json_encode( $available_variations ) ) ?>">
        <?php do_action( 'woocommerce_before_variations_form' ); ?>
    
        <?php if ( empty( $available_variations ) && false !== $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="variations custom_variations" cellspacing="0">
    
                    <?php foreach ( $attributes as $attribute_name => $options ) : ?>
                            <div class="custom_variation_header"><label for="<?php echo sanitize_title( $attribute_name ); ?>"><?php echo wc_attribute_label( $attribute_name ); ?></label></div>
                            <div class="value"><fieldset>
                            <?php
                            $selected = isset( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) ? wc_clean( $_REQUEST[ 'attribute_' . sanitize_title( $attribute_name ) ] ) : $product->get_variation_default_attribute( $attribute_name );
    
                            $attribute = $attribute_name;
                            $name      = 'attribute_' . sanitize_title( $attribute );
                            $id        = sanitize_title( $attribute );
                            ?>
                            <?php /*<strong><?php echo wc_attribute_label( $name ); ?></strong><br />*/ ?>
                            <?php
                            if ( empty( $options ) && ! empty( $product ) && ! empty( $attribute ) ) {
                                $attributes = $product->get_variation_attributes();
                                $options    = $attributes[ $attribute ];
                            }
    
                            //var_dump($selected  );
                                if( empty($selected) ) {
                                    $selected = $options[0];
                                }
                            //var_dump($options  );
                        if ( ! empty( $options ) ) {
                            if ( $product && taxonomy_exists( $attribute ) ) {
                                // Get terms if this is a taxonomy - ordered. We need the names too.
                                $terms = wc_get_product_terms( $product->id, $attribute, array( 'fields' => 'all' ) );
                                $i = 0;
                                foreach ( $terms as $term ) {
                                    if ( in_array( $term->slug, $options ) ) {
                                        echo '<div class="wvdrb-one-third">
                                            <input type="radio" value="' . esc_attr( $term->slug ) . '" ' . checked( sanitize_title( $selected ), $term->slug, false ) . ' id="' . esc_attr( $id ) .'_'.++$i.'" name="' . esc_attr( $name ) . '" data-attribute_name="attribute_' . esc_attr( sanitize_title( $attribute ) ) . '">
                                                 ' . apply_filters( 'woocommerce_variation_option_name', $term->name ) . '
                                            </div>';
                                    }
                                }
                            } else {
                                foreach ( $options as $key => $option ) { 
                                    //$variation_id=$available_variations[$key]['variation_id']; 
    
                                    //echo $regular_price+$sales_price;
                                    // This handles < 2.4.0 bw compatibility where text attributes were not sanitized.
    
                                    // Use attribute key to get the variation id from the $available_variations array
                                    $var_id = $available_variations[$key]['variation_id'];
                                    $variable_product1= new WC_Product_Variation( $var_id );
                                    $regular_price = $variable_product1 ->regular_price;
                                    $sales_price = $variable_product1 ->sale_price;
                                    $price  =    $regular_price + $sales_price;
    
                                    $currency = get_woocommerce_currency_symbol();
    
                                    // Then use the variation_id to get the value from _isa_woo_variation_desc @todo get new description
                                    // $var_description = get_post_meta( $var_id, '_isa_woo_variation_desc', true);
    
                                        $selected = sanitize_title( $selected ) === $selected ? checked( $selected, sanitize_title( $option ), false ) : checked( $selected, $option, false );
    
                                    echo '<div class="custom_variations_selector">
                                            <input type="radio" value="' . esc_attr( $option ) . '" ' . $selected . ' id="' . esc_attr( $id ) .'_'.++$i.'" name="' . esc_attr( $name ) . '" data-attribute_name="attribute_' . esc_attr( sanitize_title( $attribute ) ) . '"> 
    
                                            <div class="custom_option_wrap">';
                                                if( $sales_price ) {
                                                    echo '<div class="option_price discounted">';
                                                } else{
                                                    echo '<div class="option_price">';
                                                }
                                                 echo '<span class="regular">'.$currency.number_format((float)$regular_price, 2, '.', '') .'</span>'; echo ( $sales_price)?  '<span class="sales">'.$currency.number_format((float)$sales_price, 2, '.', '').' </span>': ''; echo '</div>
                                                <div class="option_name">
                                                    '.esc_html( apply_filters( 'woocommerce_variation_option_name', $option ) ) . '
                                                </div>
                                            </div>
                                        </div>
                                        ';
                                }
                            }
                        } ?>
                        </fieldset></div>
                    <?php endforeach;?>
            </div>
    
            <?php do_action( 'woocommerce_before_add_to_cart_button' ); ?>
    
            <div class="single_variation_wrap" style="display:none;">
                <?php do_action( 'woocommerce_before_single_variation' ); ?>
    
                <?php 
                /**
                 * woocommerce_single_variation hook. Used to output the cart button and placeholder or 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' ); ?>
    
                <?php 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' ); ?>
    
    </form>
    <?php do_action( 'woocommerce_after_add_to_cart_form' ); ?>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search