更改 WooCommerce 变量产品自定义属性下拉选项无名称

Question

我正在 WooCommerce 中构建一个网站，并且我制作了一个自定义的单产品页面，因为我想设计该页面的样式。 我创建了一个子主题，在这个子主题中，文件结构如下所示：

#child-theme
|-- functions.php
|-- woocommerce.php
|-- woocommerce
|   |-- add-to-cart
|       |-- variable.php
|-- js
    |-- custom-select-script.js

我创建了一个可变产品并添加了赋予它们名称和值的属性，例如：

• 名称：

  choose a price

  和值

  25 | 50 | 75 | 100

  ，
• 名称：

  choose a card

  和值

  card1 | card2 | card 3

  。

我想获取此名称/值作为生成的下拉列表的默认值，如下所示：

<select name="choose-a-price" id="choose-a-price">
  <option value="">--Choose a Price--</option>
  <option value="kind-1">K-1</option>
  <option value="kind-2">k-2</option>
  <option value="kind-3">k-3</option>
  <option value="kind-4">k-4</option>
</select>

但我一直收到这样的信息：

<select name="choose-a-price" id="choose-a-price">
  <option value="">--Choose a option--</option>
  <option value="kind-1">K-1</option>
  <option value="kind-2">k-2</option>
  <option value="kind-3">k-3</option>
  <option value="kind-4">k-4</option>
</select> 

这是我的variable.php，通过 echo ($attribute_name)，我看到了名称属性，但不知何故没有将它们加载到下拉列表中。

这是我的variable.php模板文件：

/**
 * Variable product add to cart
 *
 * This template can be overridden by copying it to kaon-child/woocommerce/single-product/add-to-cart/variable.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see https://woo.com/document/template-structure/
 * @package WooCommerce\Templates
 * @version 6.1.0
 */

defined( 'ABSPATH' ) || exit;

global $product;

$attribute_keys  = array_keys( $attributes );
$variations_json = wp_json_encode( $available_variations );
$variations_attr = function_exists( 'wc_esc_json' ) ? wc_esc_json( $variations_json ) : _wp_specialchars( $variations_json, ENT_QUOTES, 'UTF-8', true );

do_action( 'woocommerce_before_add_to_cart_form' ); ?>

<form class="variations_form cart" action="<?php echo esc_url( apply_filters( 'woocommerce_add_to_cart_form_action', $product->get_permalink() ) ); ?>" method="post" enctype='multipart/form-data' data-product_id="<?php echo absint( $product->get_id() ); ?>" data-product_variations="<?php echo $variations_attr; // WPCS: XSS ok. ?>">
    <?php do_action( 'woocommerce_before_variations_form' ); ?>

    <?php if ( empty( $available_variations ) && false !== $available_variations ) : ?>
        <p class="stock out-of-stock"><?php echo esc_html( apply_filters( 'woocommerce_out_of_stock_message', __( 'Dit product is op dit moment niet meer beschikbaar.', 'woocommerce' ) ) ); ?></p>
    <?php else : ?>
        <table class="variations" cellspacing="0" role="presentation">
            <tbody>
            <?php foreach ( array_keys( $attributes ) as $attribute_name ) : ?>
    <tr>
        <th class="label"><label for="<?php echo esc_attr( sanitize_title( $attribute_name ) ); ?>"><?php echo wc_attribute_label( $attribute_name ); // WPCS: XSS ok. ?></label></th>
        <td class="value">
            <?php
                wc_dropdown_variation_attribute_options(
                    array(
                        'options'   => array_merge( array( '' => wc_attribute_label( $attribute_name ) ), $attributes[ $attribute_name ] ),
                        'attribute' => $attribute_name,
                        'product'   => $product,
                    )
                );
                echo ($attribute_name);
                echo end( $attribute_keys ) === $attribute_name ? wp_kses_post( apply_filters( 'woocommerce_reset_variations_link', '<a class="reset_variations" href="#">' . esc_html__( 'Clear', 'woocommerce' ) . '</a>' ) ) : '';
            ?>
        </td>
    </tr>
<?php endforeach; ?>

            </tbody>
        </table>
        <?php do_action( 'woocommerce_after_variations_table' ); ?>

        <div class="single_variation_wrap">
            <?php
                /**
                 * Hook: woocommerce_before_single_variation.
                 */
                do_action( 'woocommerce_before_single_variation' );

                /**
                 * Hook: woocommerce_single_variation. Used to output the cart button and placeholder for 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' );

                /**
                 * Hook: woocommerce_after_single_variation.
                 */
                do_action( 'woocommerce_after_single_variation' );
            ?>
        </div>
    <?php endif; ?>

    <?php do_action( 'woocommerce_after_variations_form' ); ?>
</form>

<?php
do_action( 'woocommerce_after_add_to_cart_form' );

我尝试了很多js，使用wp过滤器和大量阅读，但无法让它工作。

如何更改产品属性下拉列表？

Answer 1

首先，更改可变产品属性，例如：

• 属性名称：

  Choose a Price

  和值：

  25|50|75|100

• 属性名称：

  Choose a Card

  和值：

  Card 1|Card 2|Card 3

保存属性。

根据需要检查并重新生成您的变体。

然后添加以下代码片段：

add_filter('woocommerce_dropdown_variation_attribute_options_html','customize_attribute_dropdown_show_option_none', 100, 2 );
function customize_attribute_dropdown_show_option_none( $html, $args ){
    // Here, we define our related attribute slugs
    $attribute_slugs = array('choose-a-price', 'choose-a-card');

    if ( in_array( sanitize_title($args['attribute']), $attribute_slugs ) ) {
        $html = str_replace($args['show_option_none'], $args['attribute'], $html);
    }
    return $html;
}

代码位于子主题的functions.php 文件中（或插件中）。已测试并工作。

无需更改

variable.php

模板文件。