WooCommerce首页可变产品标题随变体切换不生效问题求助

你的代码之所以在首页不生效，核心原因是开头的is_product()判断——这个条件只允许代码在单个产品详情页执行，而首页（即使你把产品页面设为首页）并不满足这个条件。下面是修改后的完整代码，我会逐一说明调整点：

add_filter( 'wp_footer','custom_product_title_script' ); 
function custom_product_title_script(){ 
    global $post; 

    // 调整触发条件：允许在产品详情页或首页执行
    if( ! ( is_product() || is_front_page() ) ) return; 

    // 针对首页获取正确的产品对象
    if( is_front_page() ){
        // 获取首页设置的页面ID（因为你把产品页设为首页）
        $front_page_id = get_option( 'page_on_front' );
        $product = wc_get_product( $front_page_id );
    } else {
        $product = wc_get_product( $post->ID );
    }

    // 仅针对可变产品
    if( ! $product->is_type( 'variable' ) ) return; 

    // 你设置的目标属性（保持不变）
    $attributes = array('pa_color'); 
    $data = array(); // 初始化数据数组，避免未定义警告

    // 遍历变体获取属性数据（逻辑保持不变）
    foreach($product->get_visible_children( ) as $variation_id ) { 
        foreach($product->get_available_variation( $variation_id )['attributes'] as $key => $value_id ){ 
            $taxonomy = str_replace( 'attribute_', '', $key ); 
            if( in_array( $taxonomy, $attributes) ){ 
                $data[ $variation_id ][$taxonomy] = get_term_by( 'slug', $value_id, $taxonomy )->name; 
            } 
        } 
    } 
    ?> 
    <script type="text/javascript"> 
    (function($){ 
        var variationsData = <?php echo json_encode($data); ?>, 
            // 适配首页的标题选择器：如果首页标题类不同，需要修改这里
            productTitle = $('.product_title').text(), 
            color = 'pa_color'; 

        // 优化标题更新函数：确保只修改当前产品的标题
        function update_the_title( productTitle, variationsData, color ){ 
            var selectedVarId = $('input.variation_id').val();
            if( selectedVarId && variationsData[selectedVarId] ){
                $('.product_title').text(productTitle + ' - ' + variationsData[selectedVarId][color]);
            } else {
                $('.product_title').text(productTitle);
            }
        } 

        // 页面加载完成后触发一次
        $(document).ready(function(){
            setTimeout(function(){ 
                update_the_title( productTitle, variationsData, color ); 
            }, 300); 
        });

        // 绑定变体选择事件：针对变体选择框而非所有select
        $('.variations select').on('change blur', function(){ 
            update_the_title( productTitle, variationsData, color ); 
        }); 
    })(jQuery); 
    </script> 
    <?php 
}

关键修改说明： #

1. 放宽触发条件：把if( ! is_product() ) return;改成if( ! ( is_product() || is_front_page() ) ) return;，让代码同时在产品详情页和首页执行。
2. 首页产品对象获取：首页环境下，通过get_option('page_on_front')拿到你设置为首页的产品页面ID，再获取对应的产品对象，避免依赖$post->ID（首页的全局$post可能不是产品本身）。
3. 事件绑定优化：把原代码的$('select').blur()改成$('.variations select').on('change blur')，避免影响页面上其他无关的下拉框，同时增加change事件（用户选择变体时更及时触发）。
4. 标题更新逻辑优化：简化了遍历逻辑，直接通过选中的变体ID匹配数据，效率更高。

额外注意事项： #

• 检查选择器：如果首页的产品标题类不是.product_title（比如有些主题用.woocommerce-loop-product__title），需要修改脚本里的$('.product_title')为对应的类名。
• 清除缓存：修改代码后，记得清除WordPress缓存、WooCommerce缓存以及浏览器缓存，确保新代码生效。
• 多产品场景：如果首页有多个可变产品，你需要进一步调整代码，给每个产品添加独立的标识（比如产品ID作为前缀），避免标题混淆。

内容的提问来源于stack exchange，提问作者Tijilal R.S