如何修改WooCommerce产品属性值下拉框显示Slug而非名称？

问题场景 #

在WooCommerce后台创建/编辑产品时，添加属性值的下拉框默认仅显示属性名称。由于存在大量名称相同但Slug和图片不同的属性值，无法通过名称区分，需要将下拉框选项修改为「名称 + Slug」的形式。原有的解决方案代码因DOM结构适配问题无法正常运行，以下是修复后的实现方案。

原代码失效原因 #

1. 原JS代码依赖旧版WooCommerce的DOM选择器，新版后台的属性选项卡、下拉框结构已变更
2. 仅监听选项卡点击事件，未覆盖动态添加新属性的场景
3. 单次执行标记导致后续新增的属性下拉框无法被处理

修复后的PHP代码（主题functions.php） #

// 在WooCommerce产品编辑页加载自定义JS脚本
function enqueue_attribute_slug_script( $hook ) {
    global $post;
    // 仅在产品新建/编辑页面加载脚本
    if ( in_array( $hook, ['post-new.php', 'post.php'] ) && 'product' === $post->post_type ) {
        wp_enqueue_script(
            'wc-attribute-slug-display',
            get_stylesheet_directory_uri() . '/assets/js/show_slugs.js',
            ['jquery'], // 明确依赖jQuery，保证加载顺序
            wp_get_theme()->get('Version'),
            true // 放在页面底部加载，避免DOM未就绪问题
        );
    }
}
add_action( 'admin_enqueue_scripts', 'enqueue_attribute_slug_script', 10, 1 );

修复后的JS代码（assets/js/show_slugs.js） #

(function($) {
    // 统一处理属性下拉框显示名称+Slug的核心函数
    function updateAttributeDropdowns() {
        // 匹配所有属性分类选择下拉框（包括默认和动态新增的）
        $('.attribute_taxonomy select').each(function() {
            var $select = $(this);
            // 跳过已处理过的下拉框，避免重复修改文本
            if ($select.data('slug-processed')) return;
            
            $select.find('option').not(':first').each(function() {
                var $option = $(this);
                var originalText = $option.text().trim();
                var slug = $option.val().replace('pa_', '');
                // 仅在文本未包含Slug时修改
                if (!originalText.includes('(' + slug + ')')) {
                    $option.text(originalText + ' (' + slug + ')');
                }
            });
            // 标记该下拉框已处理
            $select.data('slug-processed', true);
        });
    }

    // 页面初始加载完成后执行一次
    $(document).ready(updateAttributeDropdowns);

    // 监听属性选项卡切换，延迟执行确保DOM更新完成
    $(document).on('click', '.attribute_tab a', function() {
        setTimeout(updateAttributeDropdowns, 300);
    });

    // 监听添加新属性按钮，处理动态生成的下拉框
    $(document).on('click', '.add_attribute', function() {
        setTimeout(updateAttributeDropdowns, 500);
    });
})(jQuery);

代码说明 #

1. PHP部分：优化了脚本加载逻辑，明确依赖jQuery并放在页面底部执行，避免DOM未就绪导致的选择器失效
2. JS部分：
   • 使用通用选择器.attribute_taxonomy select适配新版WooCommerce的DOM结构
   • 新增data('slug-processed')标记，防止重复修改选项文本
   • 覆盖页面加载、属性选项卡切换、添加新属性三个场景，确保所有属性下拉框都能被处理
   • 添加延迟执行，保证动态加载的DOM元素生成后再进行处理

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