Adding a custom gallery shortcode to your WooCommerce store elevates the shopping experience by showcasing product images in a dynamic and organized way directly on the shop page.
Unlike native WooCommerce or Kadence Shop Kit, which do not offer built-in functionality to loop through a product’s gallery images, the Alpha Theme includes a custom solution to fill this gap.
What Is the Custom Gallery Shortcode?
This tool transforms the static product image in your product grid into an interactive slider. It displays the product’s featured image followed by all additional gallery images within product loops, such as on shop or category pages.
Key Features
- Displays All Images: Automatically pulls the featured image and any gallery images tied to a product.
- Smart Navigation Arrows: To ensure the best user experience on all devices, the navigation arrows behave intelligently:
- Desktop (Mouse): Navigation arrows appear automatically when a mouse is detected, allowing users to click through the gallery.
- Mobile (Touch): On touch devices, the arrows are hidden to prevent clutter. Users can simply swipe left or right to browse the images.
- Direct Links: Every image in the slider links directly to the product page, increasing the click-through rate.
- Fallbacks: If a product has no gallery images, it simply shows the featured image. If no images exist at all, a default placeholder preserves the layout.
How to Use the Shortcode
To implement this slider, you need to edit one of your Product Query Cards.
1. Add the Shortcode Block
Insert a Shortcode block (or a Custom HTML block) where you want the images to appear.
2. Enter the Code
Paste the following shortcode into the block:
[woo_gallery_images]Tip: Ensure you remove the standard “Product Image” block if you are using this shortcode, otherwise, the main image will appear twice.
Why Use This?
This shortcode addresses a specific limitation in the standard editing tools. By enabling customers to see multiple angles or variations of a product directly from the catalog page (without clicking through to the single product page first), you reduce friction and significantly boost the visual appeal of your store.