求助：移除WooCommerce滑块，显示可变产品图片（现有方案仅支持简单产品）

针对你使用「WooCommerce Additional Variation Images」和「Product Variation Swatches for WooCommerce (Pro)」时，需要移除可变产品图片滑块、直接显示所有图片的需求，以下是几种可行方案：

方案一：用CSS强制显示所有图片（最简单快速） #

直接通过CSS隐藏滑块控件并调整图片布局，适配两款插件的图片容器：

/* 隐藏WooCommerce默认滑块的导航和控制按钮 */
.woocommerce-product-gallery .flex-control-nav,
.woocommerce-product-gallery .flex-direction-nav {
    display: none !important;
}

/* 取消默认滑块的溢出隐藏，强制显示所有图片 */
.woocommerce-product-gallery__wrapper {
    display: flex !important;
    flex-wrap: wrap;
    overflow: visible !important;
}

/* 自定义单张图片宽度，这里设置为4张一行，可按需调整 */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
    width: 25% !important;
    float: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 适配WooCommerce Additional Variation Images的额外图片容器 */
.woo-variation-gallery-wrapper .woo-variation-gallery-slider {
    display: flex !important;
    flex-wrap: wrap;
    overflow: visible !important;
}

.woo-variation-gallery-wrapper .woo-variation-gallery-slide {
    width: 25% !important;
    opacity: 1 !important;
    visibility: visible !important;
}

把这段代码添加到外观 > 自定义 > 额外CSS中即可生效，无需修改主题核心文件。

方案二：通过PHP禁用滑块脚本（更彻底） #

如果CSS方案有兼容性问题，可通过代码禁用WooCommerce的flexslider脚本，同时调整图片输出结构：

// 针对可变产品禁用flexslider相关脚本
add_action( 'wp_enqueue_scripts', 'disable_flexslider_for_variable_products', 100 );
function disable_flexslider_for_variable_products() {
    global $product;
    if ( $product && $product->is_type( 'variable' ) ) {
        wp_dequeue_script( 'flexslider' );
        wp_dequeue_script( 'woocommerce-flexslider' );
        wp_deregister_script( 'flexslider' );
    }
}

// 调整可变产品图片的HTML类，移除滑块相关样式依赖
add_filter( 'woocommerce_single_product_image_thumbnail_html', 'adjust_variable_product_image_html', 10, 2 );
function adjust_variable_product_image_html( $html, $attachment_id ) {
    global $product;
    if ( $product && $product->is_type( 'variable' ) ) {
        $html = str_replace( 'woocommerce-product-gallery__image', 'woocommerce-product-gallery__image no-slider', $html );
    }
    return $html;
}

将代码添加到主题的functions.php文件（推荐使用子主题，避免主题更新丢失代码），或创建自定义插件添加。

方案三：检查插件自带设置 #

部分版本的「WooCommerce Additional Variation Images」插件自带禁用滑块的选项：

• 进入WooCommerce > 设置 > 产品 > 变体图片
• 查找「启用滑块」类选项，取消勾选
• 若有「图片布局」选项，选择「网格」或「列表」模式即可直接显示所有图片

注意事项 #

• 修改代码前建议备份网站数据
• 若使用缓存插件，修改后需清空缓存才能看到效果
• CSS中的图片宽度可根据需求自行调整，比如33%对应3张一行

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