WooCommerce商店页面特色缩略图显示异常求助

我来帮你搞定这个问题——你遇到的核心问题是钩子触发时机导致全局$post对象被切换了，下面是具体分析和修复方案：

问题根源 #

在WooCommerce的商店页面（产品归档页），woocommerce_before_main_content钩子触发时，WordPress已经启动了产品查询循环，此时全局的$post对象已经变成了产品列表里的第一个产品，而不是商店页面本身。所以你调用的the_post_thumbnail_url()会默认读取当前$post（也就是首个产品）的缩略图，而非你在商店页面设置的特色图片。

修复方案 #

我们需要直接指定获取商店页面的特色图，不依赖当前的$post上下文：

1. 用wc_get_page_id( 'shop' )获取商店页面的ID
2. 基于这个ID判断是否存在特色图，并获取对应的图片URL

修改后的完整代码 #

function btheme_woocommerce_before_main_content() {
    // 获取商店页面的ID
    $shop_page_id = wc_get_page_id( 'shop' );
    
    // 判断商店页面是否设置了特色图
    if( has_post_thumbnail( $shop_page_id ) ): ?>
        <div class="jumbotron jumbotron-fluid shop-page-cover" style="background-image:url('<?php echo esc_url( get_the_post_thumbnail_url( $shop_page_id, 'full' ) ); ?>');">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 col-md-12 col-lg-12 text-center">
                        <h1 class=""><?php woocommerce_page_title(); ?></h1>
                        <?php $categories = get_terms( array('taxonomy' => 'product_cat') ); ?>
                        <?php foreach( $categories as $category ): ?>
                            <h4 class="category-name d-inline"><?php echo esc_html( $category->name ); ?></h4>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
    <?php endif; ?>
    <div class="container-fluid content-wrapper" id="uptheme-woocommece-wrapper">
<?php }
add_action( 'woocommerce_before_main_content', 'btheme_woocommerce_before_main_content', 10 );

额外小优化 #

我在代码里加了esc_url()和esc_html()做安全转义，这是WordPress开发的最佳实践，能避免潜在的XSS风险；另外get_the_post_thumbnail_url的第二个参数'full'可以根据你的需求换成其他图片尺寸，比如'large'或者自定义的图片尺寸。

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