WooCommerce 产品变体下拉列表的自定义 HTML

Question

我想获取单个产品页面变体下拉列表的CUSTOM HTML。

我得到了一些线索here。

另一个参考Link

它的功能在这里→

woocommerce/includes/wc-template-functions.php

我希望最终的 HTML 看起来像这样 →

<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>

正确的流程是什么？ 我们必须编辑一些模板，或者我们必须使用 WooCommerce 中的一些钩子进行更改？

如果有一些钩子。有人可以指导我找到正确的钩子吗？

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;    
}

尝试使用此代码将类添加到选择框 - 您无法更改属性的 id 和其他唯一名称，它将禁用添加到购物车功能以正常工作

Answer 2

在 Themes/active-child/woocommerce/single-product/add-to-cart 创建一个文件 variable.php 并粘贴以下代码。

<?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' ); ?>