如何修改WooCommerce产品录入表单页预加载属性及值下拉列表？

一、直接预渲染属性下拉框选项（PHP 方法） #

WooCommerce 默认通过 Ajax 懒加载属性列表，我们可以在页面加载时直接把属性渲染到下拉框里，避免等待。在你的自定义插件中添加以下代码：

add_action( 'admin_footer-post.php', 'preload_product_attributes_dropdown' );
add_action( 'admin_footer-post-new.php', 'preload_product_attributes_dropdown' );

function preload_product_attributes_dropdown() {
    // 仅在产品编辑页执行
    global $post_type;
    if ( 'product' !== $post_type ) return;

    // 获取所有产品属性分类
    $attribute_taxonomies = wc_get_attribute_taxonomies();
    if ( empty( $attribute_taxonomies ) ) return;

    ?>
    <script>
        jQuery(document).ready(function($) {
            // 定位到"添加现有属性"的下拉框
            var $attributeSelect = $('#attribute_taxonomy');
            
            // 如果下拉框还没选项，就预填充
            if ($attributeSelect.find('option').length <= 1) { // 默认只有一个"选择属性"选项
                var options = '<option value="">选择属性</option>';
                <?php foreach ( $attribute_taxonomies as $tax ) : ?>
                    options += '<option value="<?php echo esc_attr( wc_attribute_taxonomy_name( $tax->attribute_name ) ); ?>"><?php echo esc_html( $tax->attribute_label ); ?></option>';
                <?php endforeach; ?>
                $attributeSelect.html(options);
            }
        });
    </script>
    <?php
}

这段代码会在产品编辑页加载完成后，检查属性下拉框是否为空，直接把所有属性渲染进去，无需等待聚焦触发 Ajax。

二、预加载属性选项值（JS + PHP 方法） #

解决属性加载后，选择属性时仍需加载值的问题，我们可以提前把所有属性的选项值传到前端，当下拉框切换时直接用本地数据填充：

add_action( 'admin_enqueue_scripts', 'preload_attribute_terms_script' );

function preload_attribute_terms_script( $hook ) {
    // 仅在产品编辑页加载脚本
    if ( 'post.php' !== $hook && 'post-new.php' !== $hook ) return;
    global $post_type;
    if ( 'product' !== $post_type ) return;

    // 获取所有属性及其选项值
    $attribute_terms = array();
    $attribute_taxonomies = wc_get_attribute_taxonomies();
    foreach ( $attribute_taxonomies as $tax ) {
        $taxonomy = wc_attribute_taxonomy_name( $tax->attribute_name );
        $terms = get_terms( array(
            'taxonomy' => $taxonomy,
            'hide_empty' => false, // 加载所有值，不管是否关联产品
        ) );
        $attribute_terms[$taxonomy] = wp_list_pluck( $terms, 'name', 'slug' );
    }

    // 将属性值传到前端JS
    wp_enqueue_script( 'preload-attribute-terms', '', array( 'jquery', 'woocommerce_admin' ), '', true );
    wp_localize_script( 'preload-attribute-terms', 'preloadedAttributeTerms', $attribute_terms );
}

接着添加JS代码（可放在上面的preload_product_attributes_dropdown函数中，或单独的脚本文件）：

jQuery(document).ready(function($) {
    // 监听属性下拉框的切换事件
    $('#attribute_taxonomy').on('change', function() {
        var taxonomy = $(this).val();
        if ( ! taxonomy || ! preloadedAttributeTerms[taxonomy] ) return;

        // 定位到属性值的下拉框（选择属性后才会生成）
        var $termsSelect = $(this).closest('.add_attribute').find('.select2');
        
        // 如果还没加载值，就用预加载的数据填充
        if ( $termsSelect.length && $termsSelect.find('option').length <= 1 ) {
            var options = '<option value="">选择值</option>';
            $.each( preloadedAttributeTerms[taxonomy], function( slug, name ) {
                options += '<option value="' + slug + '">' + name + '</option>';
            });
            $termsSelect.html(options).trigger('change');
        }
    });

    // 如果页面加载时已经选中了属性（编辑现有产品时），直接填充值
    var currentTaxonomy = $('#attribute_taxonomy').val();
    if ( currentTaxonomy ) {
        $('#attribute_taxonomy').trigger('change');
    }
});

三、禁用默认的Ajax加载逻辑（可选） #

为避免默认Ajax请求和预加载逻辑冲突，可禁用WooCommerce默认的属性加载行为：

jQuery(document).ready(function($) {
    // 阻止默认的属性下拉框Ajax加载
    $(document).off('focus', '#attribute_taxonomy');
    
    // 阻止默认的属性值Ajax加载
    $(document).off('change', '#attribute_taxonomy');
});

将这段代码加到之前的脚本中即可，确保自定义逻辑完全接管。

注意事项 #

• 你的站点仅3个属性，这种预加载方式不会影响页面性能，反而能提升后台操作流畅度。
• 代码建议放到自定义插件中，避免主题更新导致代码丢失。
• 测试前请清空后台缓存，确保新代码生效。

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