By default, WooCommerce displays the gallery directly with the main image on our product pages.

I wanted to create slightly more personalized sales pages, with a real “sales page” style, by dynamically displaying any WooCommerce gallery images for my product pages, and I was able to do that thanks to the method shared by Ryan Moreno of Showit Design Hub.

I’ve simply used this shortcode to display my mockup images inside canvases, but the possibilities go way beyond that!

You can use it for a hero section, an overlay, a multi-view gallery, or take full advantage of everything Showit has to offer.

Here’s the super-simple, 100% ready-to-use method: just copy and paste the code below.

1. Add this code snippet to the Code Snippets plugin on your WordPress website

How to Install It

1. Install the free Code Snippets plugin
2. Add a new snippet
3. Paste the entire code below
4. Title: Dynamic Gallery Shortcode Showit
5. Check the box “Run only on the front-end”
6. Save and activate

2. How to Insert the Shortcode Anywhere in Showit

Add a Text → Mixed block and simply type:

• {wp_shortcode: [product_mockups nr="1"]} → displays the 1st image
• {wp_shortcode: [product_mockups nr="3"]} → displays the 3rd image
• {wp_shortcode: [product_mockups nr="7"]} → displays the 7th image

IMPORTANT: Make sure to select Mixed in the Text properties.

The image automatically fills 100% of the box thanks to object-fit:cover. You can place it anywhere: box, overlay, mobile section, popup…

To display the entire gallery as a list: {wp_shortcode: [product_mockups]} (without any number).

And there you have it!

You now have full control over how your gallery images are displayed on your WooCommerce product pages with Showit.

Feel free to leave any questions in the comments and share the link to your page — I’d love to see the result!