WooCommerce：拆分商品主图与图库并设置不同显示效果

Hey there, nice work getting the main product image and gallery split up already! Let’s get that main image static and the thumbnail gallery working as a regular slider—here are two solid approaches, code-first or plugin-based, depending on your preference:

1. Code-Based Solution (No Extra Plugins) #

We’ll tweak the main image output to remove any slider wrapping, then ensure the thumbnail gallery loads with a functional slider.

Step 1: Make the Main Product Image Static #

Replace WooCommerce’s default main image output with a simple static image (no slider markup):

// Override main product image to be static (no slider)
function custom_static_single_product_image() {
    global $product;

    $image_id = $product->get_image_id();
    if ( !$image_id ) return;

    $image_url = wp_get_attachment_image_url( $image_id, 'woocommerce_single' );
    $image_alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true ) ?: $product->get_title();

    echo '<div class="woocommerce-product-gallery__image static-main-image">';
    echo '<img src="' . esc_url( $image_url ) . '" alt="' . esc_attr( $image_alt ) . '" class="wp-post-image" />';
    echo '</div>';
}
// Remove default image action and add our custom static version
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
add_action( 'woocommerce_before_single_product_summary', 'custom_static_single_product_image', 20 );

Step 2: Add Slider Functionality to the Thumbnail Gallery #

We’ll rebuild the thumbnail gallery with Flexslider (WooCommerce’s default slider library) markup, then enqueue the necessary scripts to make it work:

// Output thumbnail gallery with slider-ready markup
function custom_slider_product_thumbnails() {
    global $product;

    $attachment_ids = $product->get_gallery_image_ids();
    if ( empty( $attachment_ids ) || !$product->get_image_id() ) return;

    echo '<div class="woocommerce-product-gallery thumbnail-slider" data-columns="4">';
    echo '<div class="flex-viewport">';
    echo '<ul class="slides">';

    foreach ( $attachment_ids as $attachment_id ) {
        $thumb_url = wp_get_attachment_image_url( $attachment_id, 'woocommerce_thumbnail' );
        $full_url = wp_get_attachment_image_url( $attachment_id, 'woocommerce_single' );
        $image_alt = get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ) ?: $product->get_title();

        echo '<li data-thumb="' . esc_url( $thumb_url ) . '">';
        echo '<a href="' . esc_url( $full_url ) . '" class="woocommerce-product-gallery__trigger">';
        echo '<img src="' . esc_url( $thumb_url ) . '" alt="' . esc_attr( $image_alt ) . '" />';
        echo '</a>';
        echo '</li>';
    }

    echo '</ul></div>';
    echo '<ol class="flex-control-nav flex-control-thumbs">';
    foreach ( $attachment_ids as $attachment_id ) {
        $thumb_url = wp_get_attachment_image_url( $attachment_id, 'woocommerce_thumbnail' );
        echo '<li><img src="' . esc_url( $thumb_url ) . '" /></li>';
    }
    echo '</ol></div>';
}
// Replace your existing thumbnail action with this custom slider version
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_show_product_thumbnails', 10 );
add_action( 'woocommerce_after_single_product_summary', 'custom_slider_product_thumbnails', 10 );

Step 3: Load Slider Scripts & Initialize #

Ensure Flexslider’s CSS and JS are loaded, then initialize the slider on product pages:

// Enqueue Flexslider assets and initialize the slider
function enqueue_thumbnail_slider_assets() {
    if ( !is_product() ) return;

    // Enqueue Flexslider (most themes already include this, but add it if not)
    wp_enqueue_style( 'flexslider', get_template_directory_uri() . '/css/flexslider.css' );
    wp_enqueue_script( 'flexslider', get_template_directory_uri() . '/js/jquery.flexslider-min.js', array( 'jquery' ), '', true );

    // Initialize the slider with your preferred settings
    wp_add_inline_script( 'flexslider', '
        jQuery(document).ready(function($) {
            $(".thumbnail-slider").flexslider({
                animation: "slide",
                controlNav: "thumbnails",
                slideshow: false,
                directionNav: true,
                smoothHeight: false
            });
        });
    ' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_thumbnail_slider_assets' );

Note: Adjust the paths to flexslider.css and jquery.flexslider-min.js if your theme stores these files in a different location. If your theme already loads Flexslider, you can skip enqueuing the CSS/JS and just keep the inline initialization script.

2. Plugin-Based Solution (Quick & Low-Code) #

If you’d rather avoid custom code, try the WooCommerce Product Gallery Slider plugin. It lets you:

• Set the main product image to static (disable slider for main image)
• Enable slider functionality for the thumbnail gallery
• Customize slider speed, number of visible thumbnails, navigation buttons, and more

Once installed, head to WooCommerce > Settings > Product Gallery to configure the options—look for settings to disable the main image slider and enable the thumbnail slider.

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