WooCommerce新手求助：添加自定义尺寸选择字段及联动显示设置

嘿，作为WooCommerce新手，你要的这个「标准/自定义尺寸切换显示输入框」的需求其实非常常见，我给你准备了两种可行方案，不管是想快速上手还是自己定制，都能搞定～

如果你不想碰代码，直接用插件是最省心的选择，推荐这两个：

• WooCommerce Product Add-ons（官方插件）
  这是WooCommerce官方出品的插件，操作简单，完全适配原生功能：

  1. 安装并激活插件后，进入产品编辑页面，找到「Product Add-ons」选项卡
  2. 添加一个「Dropdown」类型的字段，选项设置为「标准尺寸」和「自定义尺寸」
  3. 再添加几个「Text」输入框（比如宽度、高度、深度），然后在字段的「Visibility」设置里选择「Show if」，关联刚才的下拉框，设置为当选择「自定义尺寸」时显示
  4. 保存产品后，前端就会自动实现切换效果了

• Advanced Product Fields for WooCommerce
  这个第三方插件功能更强大，支持更多条件逻辑和字段类型，操作逻辑和官方插件类似，适合需要更多自定义选项的场景。

如果你想自己写代码来实现，下面是完整的步骤和代码示例，把这些代码加到你的主题functions.php文件里即可：

1. 添加前端选择框和隐藏的输入框 #

用WooCommerce的钩子在产品页添加字段：

add_action( 'woocommerce_before_add_to_cart_button', 'custom_size_selection_field' );
function custom_size_selection_field() {
    global $product;
    ?>
    <div class="size-selection">
        <p class="form-row form-row-wide">
            <label for="size_type"><?php esc_html_e( '尺寸类型', 'woocommerce' ); ?> <span class="required">*</span></label>
            <select id="size_type" name="size_type" class="select">
                <option value="standard"><?php esc_html_e( '标准尺寸', 'woocommerce' ); ?></option>
                <option value="custom"><?php esc_html_e( '自定义尺寸', 'woocommerce' ); ?></option>
            </select>
        </p>
        <!-- 自定义尺寸输入框，默认隐藏 -->
        <div id="custom-size-fields" style="display:none;" class="form-row form-row-wide">
            <p class="form-row form-row-half">
                <label for="custom_width"><?php esc_html_e( '宽度', 'woocommerce' ); ?> <span class="required">*</span></label>
                <input type="number" id="custom_width" name="custom_width" min="0" step="0.1" class="input-text">
            </p>
            <p class="form-row form-row-half">
                <label for="custom_height"><?php esc_html_e( '高度', 'woocommerce' ); ?> <span class="required">*</span></label>
                <input type="number" id="custom_height" name="custom_height" min="0" step="0.1" class="input-text">
            </p>
            <p class="form-row form-row-wide">
                <label for="custom_depth"><?php esc_html_e( '深度', 'woocommerce' ); ?> <span class="required">*</span></label>
                <input type="number" id="custom_depth" name="custom_depth" min="0" step="0.1" class="input-text">
            </p>
        </div>
    </div>
    <?php
}

2. 用JavaScript控制显示/隐藏 #

添加JS监听选择框的变化，切换输入框的显示状态：

add_action( 'woocommerce_after_add_to_cart_button', 'custom_size_js' );
function custom_size_js() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            // 初始检查
            if ($('#size_type').val() === 'custom') {
                $('#custom-size-fields').show();
            }
            // 监听选择变化
            $('#size_type').change(function() {
                if ($(this).val() === 'custom') {
                    $('#custom-size-fields').show();
                } else {
                    $('#custom-size-fields').hide();
                    // 隐藏时清空输入框
                    $('#custom_width, #custom_height, #custom_depth').val('');
                }
            });
        });
    </script>
    <?php
}

3. 验证并保存自定义尺寸到购物车和订单 #

确保选择自定义尺寸时输入框必填，并且把数据保存到购物车和订单中：

// 验证字段
add_filter( 'woocommerce_add_to_cart_validation', 'custom_size_validation', 10, 3 );
function custom_size_validation( $passed, $product_id, $quantity ) {
    if ( isset( $_POST['size_type'] ) && $_POST['size_type'] === 'custom' ) {
        if ( empty( $_POST['custom_width'] ) || empty( $_POST['custom_height'] ) || empty( $_POST['custom_depth'] ) ) {
            wc_add_notice( __( '请填写完整的自定义尺寸信息', 'woocommerce' ), 'error' );
            $passed = false;
        }
    }
    return $passed;
}

// 保存自定义尺寸到购物车项
add_filter( 'woocommerce_add_cart_item_data', 'save_custom_size_data', 10, 2 );
function save_custom_size_data( $cart_item_data, $product_id ) {
    if ( isset( $_POST['size_type'] ) ) {
        $cart_item_data['size_type'] = sanitize_text_field( $_POST['size_type'] );
        if ( $_POST['size_type'] === 'custom' ) {
            $cart_item_data['custom_width'] = sanitize_text_field( $_POST['custom_width'] );
            $cart_item_data['custom_height'] = sanitize_text_field( $_POST['custom_height'] );
            $cart_item_data['custom_depth'] = sanitize_text_field( $_POST['custom_depth'] );
            // 添加唯一键，确保每次选择不同尺寸都生成新的购物车项
            $cart_item_data['unique_key'] = md5( microtime().rand() );
        }
    }
    return $cart_item_data;
}

// 在购物车和结账页面显示自定义尺寸
add_filter( 'woocommerce_get_item_data', 'display_custom_size_in_cart', 10, 2 );
function display_custom_size_in_cart( $item_data, $cart_item ) {
    if ( isset( $cart_item['size_type'] ) ) {
        $item_data[] = array(
            'key'   => __( '尺寸类型', 'woocommerce' ),
            'value' => ucfirst( $cart_item['size_type'] )
        );
        if ( $cart_item['size_type'] === 'custom' ) {
            $item_data[] = array(
                'key'   => __( '自定义尺寸', 'woocommerce' ),
                'value' => sprintf( '%s × %s × %s', $cart_item['custom_width'], $cart_item['custom_height'], $cart_item['custom_depth'] )
            );
        }
    }
    return $item_data;
}

// 保存自定义尺寸到订单
add_action( 'woocommerce_checkout_create_order_line_item', 'save_custom_size_to_order', 10, 4 );
function save_custom_size_to_order( $item, $cart_item_key, $cart_item, $order ) {
    if ( isset( $cart_item['size_type'] ) ) {
        $item->add_meta_data( __( '尺寸类型', 'woocommerce' ), ucfirst( $cart_item['size_type'] ) );
        if ( $cart_item['size_type'] === 'custom' ) {
            $item->add_meta_data( __( '自定义尺寸', 'woocommerce' ), sprintf( '%s × %s × %s', $cart_item['custom_width'], $cart_item['custom_height'], $cart_item['custom_depth'] ) );
        }
    }
}

4. 可选：添加样式优化 #

可以加一点CSS让布局更美观，把这段代码加到主题的自定义CSS里：

#custom-size-fields .form-row {
    margin-right: 2%;
}
#custom-size-fields .form-row-half {
    width: 48%;
    float: left;
}
@media (max-width: 768px) {
    #custom-size-fields .form-row-half {
        width: 100%;
        float: none;
        margin-right: 0;
    }
}

这样就完成了自定义开发的全部步骤，前端会和你想要的效果一致，而且数据会完整保存到订单里。

内容的提问来源于stack exchange，提问作者Rohitashv Singhal