SazKit – Product Gallery for WooCommerce

SazKit – Product Gallery for WooCommerce swaps the default WooCommerce single-product image gallery (FlexSlider + zoom) for a clean Swiper slider.

Features:

• Main slider with arrow and dot navigation, fade transition, and adaptive height.

• Optional synced thumbnail navigation slider below the main image.

• Full-screen lightbox with keyboard navigation, focus trapping, and click-to-magnify.

• Hover zoom (inner magnify) on the main image for desktop pointers.

• Configurable gallery height — a fixed pixel height (default 550px) that scales images down and centers them, or auto height that fits each image.

• Image fit for fixed-height mode — Contain (show the whole image) or Cover (fill and crop edge-to-edge).

• Optional forced gallery width on desktop (a customizable percentage) to override theme/page-builder layout conflicts.

• Configurable thumbnail count (1–10 visible at once).

• Toggle arrows and dots independently on the main slider.

• Optional arrows on the thumbnail slider.

• Autoplay for the main slider with a configurable interval (pauses on hover/focus).

• Tabbed settings screen: General and Style.

• Style tab: pick the arrow color and dot color with the native color picker.

• Variation support — the main image updates when a variation with its own image is selected.

• RTL aware.

• Uses your site’s existing Swiper assets if a theme or another plugin already registers them; otherwise it loads its own bundled copy.

• HPOS (High-Performance Order Storage) compatible.

• Developer friendly: filter hooks for the image IDs, image sizes, and Swiper arguments.

Filter hooks

• sazkit_settings — filter merged plugin settings at runtime.

• sazkit_gallery_image_ids — filter the attachment IDs used in the gallery.

• sazkit_main_image_size / sazkit_thumb_image_size — filter the registered image sizes.

• sazkit_swiper_main_args / sazkit_swiper_thumbs_args — filter the Swiper configuration.

• sazkit_swiper_handles — override the detected Swiper script/style handles.

• sazkit_zoom_level — filter the hover-zoom magnification factor (default 2.0 ).

• sazkit_slide_badges — filter to add badge overlays (e.g. Sale/New ribbons) to a gallery slide.

• sazkit_before_main_slides / sazkit_after_main_slides — actions for add-ons to inject extra.sazkit-slide elements (e.g. video) into the main slider.

• sazkit_before_thumb_slides / sazkit_after_thumb_slides — matching actions for the thumbnail slider, to keep both sliders’ indexes in sync.

• sazkit_gallery_wrapper_classes — filter to add extra classes to the gallery wrapper (e.g. add-on layout classes).

• sazkit_disable_main_slider — filter to skip Swiper initialization entirely, for add-ons rendering their own layout (e.g. a grid).

• sazkit_main_image_attrs / sazkit_thumb_image_attrs — filter the <img> attributes per slide (e.g. lazy-loading control).

-

g. to wrap it in a <picture> element for WebP/AVIF).

g. a shortcode or block).

-

sazkit_settings_nav_tabs — action to add extra tab links to the settings page’s nav (so an add-on doesn’t need its own separate admin menu item).

• sazkit_settings_panels — action to render extra tab panel(s) inside the settings card, after the built-in General/Style tabs’ own <form> closes. Forms can’t nest, so add-on panels needing to save fields must wrap themselves in their own <form> with their own save button — the built-in Cancel/Save changes footer only submits the General/Style tab and hides itself automatically while a non-native tab is active. Panels should use the same.sazkit-tab-panel / #sazkit-tab-{slug} markup convention as the built-in tabs so the shared tab-switching JS shows/hides them correctly.

The gallery wrapper also fires two jQuery events add-ons can listen for: sazkit:zoom (hover zoom activated on a slide) and sazkit:lightbox-open (the lightbox opened for a slide), both passed the attachment ID.

Third-Party Libraries

10) by Vladimir Kharlampidi, licensed under the MIT license. com.