Product Gallery Swiper for WooCommerce

Documentation

WordPress Developer API

Use these filters and actions to control when the gallery is displayed, reuse existing Swiper assets, customize CSS classes, or render the gallery in a custom location.

Control when the gallery is used

Disable the automatic WooCommerce integration when you want to place the gallery yourself, or override the default decision about whether a product should display a gallery.

Disable the automatic integration

wdevs_gallery_swiper_enable_default_integration

apply_filters( 'wdevs_gallery_swiper_enable_default_integration', true )

• $enabled (boolean) - Whether the plugin automatically integrates with classic WooCommerce product loops. Default: true.

Override the gallery display decision

wdevs_gallery_swiper_should_display_gallery

apply_filters( 'wdevs_gallery_swiper_should_display_gallery', $should_display )

• $should_display (boolean) - The result of the plugin's default gallery display checks.

Example

// Disable automatic placement so the gallery can be rendered elsewhere.
add_filter( 'wdevs_gallery_swiper_enable_default_integration', '__return_false' );

// Only display galleries for products in the featured category.
add_filter( 'wdevs_gallery_swiper_should_display_gallery', function( $should_display ) {
    return has_term( 'featured', 'product_cat' ) ? true : $should_display;
} );

Use Swiper from another plugin or theme

Prevent this plugin from loading its bundled Swiper assets by returning the handles of compatible Swiper assets that are already registered.

Script filter

wdevs_gallery_swiper_swiper_script_handle

apply_filters( 'wdevs_gallery_swiper_swiper_script_handle', $default_handle )

Style filter

wdevs_gallery_swiper_swiper_style_handle

apply_filters( 'wdevs_gallery_swiper_swiper_style_handle', $default_handle )

• $default_handle (string) - The plugin's default handle: wdevs-gallery-swiper-swiper.

Example

// Reuse the compatible Swiper assets registered by Elementor.
add_filter( 'wdevs_gallery_swiper_swiper_script_handle', function() {
    return 'swiper';
} );

add_filter( 'wdevs_gallery_swiper_swiper_style_handle', function() {
    return 'swiper';
} );

Add custom CSS classes

Add classes to the gallery container or to every individual slide without replacing the plugin templates.

Container classes

wdevs_gallery_swiper_container_extra_classes

apply_filters( 'wdevs_gallery_swiper_container_extra_classes', '' )

Slide classes

wdevs_gallery_swiper_slide_extra_classes

apply_filters( 'wdevs_gallery_swiper_slide_extra_classes', '' )

• $extra_classes (string) - Space-separated CSS classes. Default: an empty string.

Example

add_filter( 'wdevs_gallery_swiper_container_extra_classes', function( $classes ) {
    return trim( $classes . ' my-gallery' );
} );

add_filter( 'wdevs_gallery_swiper_slide_extra_classes', function( $classes ) {
    return trim( $classes . ' my-gallery__slide' );
} );

Render the gallery in a custom location

After disabling the automatic integration, use the start and finish actions to wrap your own product image output. Use the complete gallery action when the plugin should render everything for you.

Wrap custom product image output

wdevs_gallery_swiper_start_gallery_rendering

do_action( 'wdevs_gallery_swiper_start_gallery_rendering' )

wdevs_gallery_swiper_finish_gallery_rendering

do_action( 'wdevs_gallery_swiper_finish_gallery_rendering' )

Render the complete gallery

wdevs_gallery_swiper_render_gallery

do_action( 'wdevs_gallery_swiper_render_gallery', $include_default )

• $include_default (boolean) - Whether the default product thumbnail is included as the first slide. Default: false.

Example

add_filter( 'wdevs_gallery_swiper_enable_default_integration', '__return_false' );

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

add_action( 'woocommerce_before_shop_loop_item_title', function() {
    do_action( 'wdevs_gallery_swiper_start_gallery_rendering' );
    woocommerce_template_loop_product_thumbnail();
    do_action( 'wdevs_gallery_swiper_finish_gallery_rendering' );
}, 10 );

If no custom content is needed between the opening and closing markup, replace the three rendering calls in the example with do_action( 'wdevs_gallery_swiper_render_gallery', true ).