如何在WooCommerce分类页面添加全屏Meta Slider？适配不同分类

嘿，我来帮你解决这个问题！你的思路是对的，但有几个关键小细节没处理好，导致代码没生效，咱们一步步来修正：

先说说你原来代码的问题 #

1. 钩子名称有多余空格：你写的' storefront_before_content '前后带空格，WordPress识别钩子是严格匹配名称的，空格会导致钩子绑定失败，必须去掉空格写成'storefront_before_content'。
2. 条件标签用错了：is_category()是针对WordPress默认文章分类的，而WooCommerce的产品分类是自定义分类法product_cat，得用专门的is_product_category()来判断。

正确的实现代码（支持多分类对应多滑块） #

下面是优化后的代码，不仅能解决你的问题，还能方便后续新增分类和滑块的对应关系：

add_action( 'storefront_before_content', 'custom_category_slider_storefront' );
function custom_category_slider_storefront() {
    // 只有在产品分类页面才执行后续代码
    if ( ! is_product_category() ) {
        return;
    }

    // 定义「分类slug」和「对应滑块ID」的映射表，新增分类直接加一行就行
    $category_slider_map = array(
        'dresses' => 77,   // 连衣裙分类（slug是dresses）对应ID77的Meta Slider
        'shoes' => 88,     // 鞋子分类对应ID88的滑块
        'accessories' => 99 // 配饰分类对应ID99的滑块
    );

    // 获取当前产品分类的slug
    $current_cat_slug = get_queried_object()->slug;

    // 如果当前分类在映射表里，就输出对应的滑块
    if ( isset( $category_slider_map[$current_cat_slug] ) ) {
        echo do_shortcode( '[metaslider id="' . $category_slider_map[$current_cat_slug] . '"]' );
    }
}

让滑块全屏的CSS设置 #

Meta Slider默认可能不是全屏宽度，你需要加一段CSS来让它铺满屏幕：

.metaslider {
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

把这段代码加到Storefront主题的「外观 → 自定义 → 额外CSS」里就可以了。

几个重要的注意事项 #

• 代码要放到子主题的functions.php里，别直接改父主题的文件，不然主题更新后代码会丢失。
• 确认Meta Slider插件已经激活，并且滑块ID是正确的（你可以在Meta Slider的编辑页面顶部看到滑块ID）。
• 分类slug要和后台「产品分类」编辑页面里的slug完全一致，别写错了。

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