To install WooCommerce Dynamic Gallery:
- Purchase Download the WooCommerce Dynamic Gallery plugin PRO Version or Lite Version
- Upload the woocommerce-dynamic-gallery plugin zip folder to your /wp-content/plugins/ directory
- Activate ‘WooCommerce Dynamic Gallery’ from the Plugins menu within WordPress
- Gallery shows Variation images when options selected on product page. When user selects an option on product page – that options image auto shows in the gallery.
- Fully responsive gallery – even the image zoom – select responsive or set traditional fixed wide in pixels.
- Auto adds the gallery to every product page when installed. All images are auto added to each products page gallery with featured image the first image in the gallery.
- Deactivate the gallery on any single product page > defaults to the WooCommerce product image settings.
- Comprehensive and easy to use set of editing tools allows you to customize the gallery to suite your theme.
- Images scaled to perfect size within the Gallery frame – never distorted no matter what size or shape the images are.
- Lazy-Load feature means the gallery loads quickly with the first image ready for viewing.
- Search Engine friendly images. Alt text visible to search engines in the thumbnails.
- 4 Fabulous transition effects to choose from.
The WooCommerce admin panel can be found from your wp-admin dashboard by going to WooCommerce > Settings > Dynamic Gallery tab. See the image below.
1. WooCommerce – Got to the WooCommerce setting on the sidebar of your w–admin dashboard. if you don’t see it there – it means you do not have WooCommerce installed and the gallery will not work without it. You can download WooCommerce here for FREE.
2. Settings – Click on the settings link that shows in the pop out when you put your mouse over WooCommerce. This takes you to the WooCommerce store settings.
3. Dynamic Gallery tab – Click on the Dynamic Gallery tab to open the Gallery admin panel.
4. Gallery Sub Nab bar – The Gallery settings are contained in sections under the sub Nav menu
Live Preview allows you to check how your gallery Custom settings are looking without leaving the admin page. Remember you must Click ‘Save Changes’ before you will see them in the Live Preview window.
See info-graphic below of the Preview settings and below the image in the Legend there is a detailed explanation of each setting plus hints and tips on setting up this feature.
1. Preview – This info-graphic shows ‘Preview’ at the top of the Dynamic Gallery tab – its not – its at the bottom of the admin page – we wanted you to know you are still on the same admin page.
2. Click here to preview gallery
Click this link to open the Gallery Preview pop up.
3. Dynamic Gallery Preview pop – up
This is the pop-up window that you will see to check how your customized setting are looking.
Notes about the info-graphic image.
* See the Gallery shows full wide of the pop-up. This is because we had this demo gallery set at Wide 100% (responsive) so it shows the full wide of the pop-up window. If we had the wide set at 300px that is what it would show at.
** The images in the Preview gallery are for demonstration purposes only and are loaded from the plugin. They are not images from your site.
Customizing The Gallery
The WooCommerce Dynamic gallery allows you to easily customize your Gallery to suite your theme – perfectly. Below we’ll go through how to use every setting on the admin panel.
Gallery, Timing and Effects
The first part of the admin dashboard allows you to customize the way the size and style of the gallery. See info-graphic below and each items detailed description and instructs / tips under the image in the Image legend.
1. Gallery tab – This is where you customize the Gallery image Frame and the gallery ‘event’ timing and transition effects.
2. Preview – Live preview of your settings.
3. Gallery Dimensions – set the dimensions of your Gallery on the products pages.
4. Gallery Width
To make the gallery Responsive enter 100 and select % from the drop down. That is all you have to do. The Gallery width will always be 100% of the themes product image container. If your theme is not responsive, set the wide of the gallery in pixels. The wide should be the same as the wide set in your theme.
- If you don’t know the image container wide on your themes single product page and you don’t know how to find it you’ll soon get it with a bit of trial and error. Set a wide px – say 300 > go to the bottom of the Gallery admin panel > click Save >. Open a product page in another widow and see how that gallery wide fits on your products page. If its not perfect click back to the gallery admin panel and adjust it.
5. Gallery Height
Always set in px and is the height of the image frame. If you are using responsive the Gallery auto resizing the gallery height and images in proportion to the wide. The number you set here is the reference point for the proportional resize up or down.
6. Special Effects – set special effects that apply to the images in your gallery.
7. Auto Start
Select ‘True’ and every gallery slideshow auto starts when the page is opened. Selecting ‘False’ and the user must manually start the slideshow.
8. Time between transitions
This is the time that the actual image spends in the Gallery frame after the Transition effect has completed. This time also controls how long the Caption text will display for. That is if you are using caption text it will show for the period of time between image transitions.
- Important ! The time you set here determines how long any caption text set on images shows for.
9. Slide Transition Effect
Select a transition effect from the drop down. The options are.
- Fade – each image fades out as the next fades in.
- Slide Horizontal (always right to left)
- Slide Vertical (always top to bottom or ‘roll down’)
- Resize – A dramatic effect.
10. Transition effect speed
Set this in seconds from the drop down. The range is minimum 1 second , maximum of 10 seconds. Use the transition speed effect to enhance the transit effect. For example Fade looks great witha 4 second transition speed.
Important things to know about this setting.
- The time set here controls the speed of the Lazy Load Scroll bar if you have that feature activated.
- Users cannot select another image by clicking on a thumbnail or using the ‘Next’ , ‘Previous’ arrows on the gallery image while the transition effect is in progress.
- Transition effect does not show on the first image that is loaded when the page loads > only the second and all subsequent images.
- The total time an image will take to move through the gallery is the Time between Transition (TBT) + Transition effect speed (TES) = Total Time in Gallery (TTG). Example if you set a TBT of 8 and a TES of 4 the TTG is 12 seconds which is possibly a bit long to hold peoples attention. Although if you have great images this would not be a problem.
11. Single Image Transition
If you do not want the image transition effect to apply when there is only 1 image in the gallery then check this box. This setting applies when there is only 1 image in the gallery or when there is only 1 image for a variation.
12. Gallery Style – Set the style of the gallery container.
13. Image background color
Using the beautiful built in colour picker you can set the gallery images background colour. This feature allows you to seamlessly blend the gallery into your product page background – if you know the hex colour enter it into the box or if not use the colour wheel to set it.
- Make the gallery background colour transparent by typing transparent into the colour selector hex code box.
- Setting the background colour and the gallery border colour to transparent creates a seamless effect – if you use transparent .png product images it gives the optical illusion that the images are just appearing on the page and there is not gallery, just magic.
14. Border Colour
Important! This sets the border colour for not only the Gallery image frame but the Nav bar (ZOOM | START STOP SLIDESHOW) and the thumbnails. Enter a hex colour or use the built in colour picker (same as the Background colour picker shown in the image.)
14. Save Changes – Always remember to save your changes.
12. Gallery Pop-up
This is the tool that is used for the Zoom image function on the gallery. In the Lite Version this is auto set as ‘Fancybox’ as “Fancybox’ is the default pop-up tool of WooCommerce. In the Pro Version there are 3 options.
- ‘Fancybox’ which is the default used on install (the same as the Lite Version.)
- ‘Lightbox’ As we have discovered some bespoke themes remove the Facybox tool. If you are using a bespoke theme and the gallery Zoom image funtion does not work change this setting to ‘Lightbox’, otherwise don’t change it from the default ‘Fancybox’ setting.
- ‘Deactivate’ Choose this setting if you do not want the image in the Gallery to pop-up (zoom) when clicked. Note activating this setting also removes ‘Zoom’ from the Nav Bar if you have the nav bar feature selected.
Whilst you add caption text from the image editor on each product this is where you set how that caption text will display. Things to know about how caption text works.
- Caption text is set by adding it to each image from the WordPress gallery manager – see the section on managing images further down.
- The caption text shows after the image transition effect has finished. The time that the caption shows is auto set by the ‘Time between transitions‘ setting in the gallery section above.
- The Caption text slides in and out from the bottom of the gallery frame.
See info-graphic below of the caption text settings and below the image in the Legend there is a detailed explanation of each setting plus hints and tips on getting the most out of this great feature.
1. Caption Text – This info-graphic shows caption text at the top of the Dynamic gallery tab – its not – its under the gallery settings – but we wanted you to know you are still on the same admin page.
2. Font – Use the Font selector to choose the font you want the caption text to show in. There are 17 web standard fonts to choose from.
3. Font Size – Select the font size in px from the drop down
4. Font Style – Select the Font style you want the text to show in > Normal > Bold > Italic > Bold/Italic
5. Colour – Select a font colour – enter a hex number or use the built in colour picker wheel to select a colour.
6. Background colour – Select a caption text background colour again by either entering a hex colour or using the built in colour picker.
Note: In the image the red highlight around the caption text is not part of the gallery – is there to highlight the caption text.
Gallery Nav bar
The Gallery Nav bar is the visual gallery controls. The Gallery uses as text Nav instead of the traditional buttons and arrows because the LARGE TEXT as nav is much easier to use in mobile devices than trying to tap a small button or arrow.
See info-graphic below of the Nav bar settings and below the image in the Legend there is a detailed explanation of each setting plus hints and tips on setting this important part of the gallery up.
1. Nav Bar– This info-graphic shows Nav Bar at the top of the Dynamic Gallery tab – its not – its under the Gallery and Caption Text settings – but we wanted you to know you are still on the same admin page.
2. Control – Check this box to enable the Nav Bar – Un check and it does not show.
Note: When unchecked the gallery show a stop start icon in the middle of the gallery on Mouse over – The Galley always shows > ‘Next’ and ‘Previous’ arrow icons on the left and right of the image on mouse over even when the nav bar is selected. So no need to worry if you do not want the nav bar then users will still be able to operate the gallery.
3. Font – Use the Font selector to choose the font you want the Nav Bar text to show in. There are 17 web standard fonts to choose from.
4. Font Size – Select the font size in px from the drop down
5. Font Style – Select the Font style you want the text to show in > Normal > Bold > Italic > Bold/Italic
6. Background colour – Select the Nav background colour by either entering a hex colour or using the built in colour picker.
7. Text – Select the colour for the Nav Bar text – enter a hex number or use the built in colour picker wheel to select a colour.
8. Container Height – Enter the Height of the Nav bar in px. This is the Container that the ZOOM | START SLIDESHOW sit inside.
Note: The border colour of the Nav bar container and centre divider are set by the Border Colour Setting in the Gallery section.
Lazy Load Scroll Bar.
What is lazy load?
With the Lazy Load feature images are only loaded when they are called either automatically by the gallery or by a user selecting the image. This means images are only loaded when required rather then all images having to load before the gallery will show any images. This increases the loading speed of all pages and saves your server bandwidth as images that are never shown in the gallery are never loaded. Its the reason why a Gallery with 20 images loads just just as quickly as a gallery with only 1 image – that is of course providing the first images being loaded is the same size file.
WooCommerce Dynamic gallery has a visual Lazy Load Scroll bar that is timed to scroll across the bottom of the Gallery during the time set for the image transition effect in the gallery settings section. This can be a very good visual indication to the visitor that the transition is happening and how much longer it has to go before the next image arrives.
See info-graphic below of the Lazy-load scroll bar settings and below the image in the Legend there is a detailed explanation of each setting plus hints and tips on setting up this feature.
1. Lazy-load scroll – This info-graphic shows Lazy-load scroll at the top of the Dynamic Gallery tab – its not – its under the Gallery > Caption Text > Nav bar settings – but we wanted you to know you are still on the same admin page.
2. Control – Check the box to enable the visual Lazy-load scroll bar. Unchecked is deactivated – That is only the visual scroll bar that is deactivated – NOT the Lazy-load feature.
3. Colour – Enter a hex number or use the colour picker to set the colour of the Lazy-load scroll bar.
Note: The lazy-load scroll bar is timed to sync with the Transition speed effect.
You can choose to show thumbnails images under the Gallery or don’t show them. Where ever possible you should always show the thumbnails as the provide these important features and Functionality.
- Search Engine Optimization. – Having at least one image on your products page that has the focus keyword in the image Alt text is a very important SEO element. Search engine spiders can read the image Alt text from the image thumbnail because it is part of the page content.
- Gallery navigation – the thumbnails provide a great visual way for users to scroll through the gallery. The current image thumbnail is always highlighted, but the user can load any image to the Gallery by clicking on the thumbnail.
- Auto Scaled – like the Gallery images, the thumbnails are auto scaled from the center of the container that you set. See Image Scaling.
- Scroll on Hover – The Thumbnail images scroll left or right on mouse hover to allow the user to quickly scan through the Gallery images.
- Current Image Thumbnail – Thumbnails auto scroll as images move through the Gallery. The current image thumbnail is highlighted.
See info-graphic below of the Gallery Image Thumbnail settings and below the image in the Legend there is a detailed explanation of each setting plus hints and tips on setting up this feature.
1. Image Thumbnails – This info-graphic shows Image Thumbnails at the top of the Dynamic Gallery tab – its not – its under the Gallery > Caption Text > Nav bar > Lazy-load scroll bar settings – but we wanted you to know you are still on the same admin page.
2. Show Thumbnails – Check this box to enable Gallery Thumbnails. Un-check to disable Thumbnails.
3. Single Image Thumbnails – Check this box if you do not want the image thumbnail to show when there is only 1 image in the gallery.
4. Thumbnail width – Set the wide of each thumbnail in px. See Important! note below.
5. Thumbnail height – Set the height of the Gallery Thumbnails in px. See Important! note below.
6. Thumbnail spacing – Set the padding between each image in px.
*Place your list items here
**If you do not want the Thumbnails to show disable the feature – DO NOT set thumbnail wide and tall to ‘0’ to try and hide them as the will cause a < ‘not divisible by ‘0’> error message to show on your product pages where the Gallery should be.
With WooCommerce Dynamic Gallery you do not need to worry about the dimensions of your images – The gallery auto scales every image to show it perfectly inside the Gallery container and the thumbnail container – every time – without distortion. Every image is scaled from the centre of the container and shows perfectly in proportion. Even the image thumbnails are scaled.
The info-graphic below shows you how this works.
1. Gallery Dimensions – The first image show you the gallery dimensions – width 100% (responsive) and height set at 300px. The image that is loaded to the Gallery is 520px wide by 410px high. Notice in the thumbnails that the image is also scaled perfectly in the thumbnail container that is set 100px by 100px.
2. Image original size – This is the same image as in item 1 above dimensions 520px x 410px
3. Image @ Half original size – We reduced the main image to half its size 260px by 205px – See how it is smaller than the gallery frame in both aspects and the whole image shows centered in the gallery frame.
4. Image @ 25% of the original – We then reduced the image by half again to 130px by 103px – again it shows true in the centre of the gallery.
Product Image Tips
With your store built the number one most important thing you can do toward ensuring that you sell lots of products is have great images. A good picture is worth a 1,00o words.
WooCommerce Dynamic gallery is the perfect tool for displaying your images. Here are some tips and hints on how create a professional image display across your entire store.
- First and foremost is reduce the image file size. Ideally each image should be less than 50KB in size with a maximum of 100KB. The smaller the file size of each image the faster they load.
- Resize your images to a max wide of 600 to 700 px. The normal pc screen is 1200px by 800px and keeping images at 600px to 700px wide ensures the image shows nicely on screen and it helps to keep the file size down.
- Create your product images in transparent .png format. Unless you are able to do professional product photo shots the best way to present your product images is to etch them and convert to a transparent .png format. Doing this means that all images on your site will have the same background – the background you set in the gallery and they look very professional.
- To create etched transparent .png images optimized for the web you will need a program like photoshop. If you don’t have that program don’t rush out and buy it and learn how to use it, instead outsource the task, you’ll be amazed how inexpensive it is to pay someone else to do this relatively simple task is. Go to somewhere like freelancer.com, mechanicalturk.com or odesk.com and post the task. You’ll find dozens of contractors who will convert your images to etched transparent web optimized .png format for very little money.
- Do not load images to the gallery straight from your camera. Normally these images will be 2000+px wide by 1000+ px tall and over 2MB in size. The average computer screen is 1200px by 800px. Firstly the Gallery won’t be able to show the first image on page load until it is loaded. You know how long 2MB takes to load. Secondly when a user click the Zoom it will open twice as large as their screen. Thirdly – the images will never load in a mobile device.
Adding Images (*Video)
WooCommerce Dynamic Gallery single product page Gallery Image Manager meta can be found on any single product page edit screen. You use this to add images to the gallery.
1. Images must be uploaded to the product page for the Gallery to be able to show them. The Gallery by default will show a Featured image from the WordPress Media Library, but it cannot show multiple images from the WordPress Media library, Only Images that have been uploaded to the product.
2. Do not insert images into the WordPress Gallery, see the info graphic below.
Updated since WordPress v3.5
Prior to WordPress v3.5 WooCommerce Dynamic gallery used the WordPress Image manager pop-up. v3.5 dramatically changed the pop up screen design and it is not as user friendly for managing product variation images in our opinion.
Therefore we have retained the old WordPress image manger pop up for the Dynamic gallery plugin. For uploading images to the Dynamic gallery you can use either
- The new WordPress ‘Add Media’ image uploader.
- The Dynamic Gallery image manager.
We recommend you use the Dynamic Gallery image manager because it is easier, faster and more intuitive when it comes to assigning product images to product variations and managing them. See it in action here.
See info-graphic below of the Gallery manager meta box and Gallery manager pop-up and below the image in the Legend there is a detailed explanation of each setting plus hints and tips on using this feature.
1. Activate / Deactivate Gallery – Checked and the gallery is activated for the product – unchecked and the gallery is deactivated and the default WooCommerce Product image shows.
2. Show Product Variation images – Checked is activated and unchecked is deactivated – See Product variation images section for more details on this feature.
3. Add Images – Click this icon to open the media gallery image uploader.
4. Gallery Image Thumbnails – See what images are in the Gallery at a glance. Click and image to open the Gallery image manager pop-up.
5. Gallery Image Manager pop-up – This is the pop-up screen that opens when you click any thumbnail.
6. Show Image – Click the Show link to open an image edit screen.
7. Set Image Gallery Order – Set the order that images show in the Gallery by placing a number in this box. The featured image will always show first in the Gallery. You can set the order of the rest by placing numbers in these boxes. ‘Note: ‘0’ will always show before ‘1’ and empty like the images is = to ‘0’. So in the example the featured image will always some first the the empties then 1 , 2, 3, 4
8. Save All Changes – You must always click the ‘Save all Changes’ button for your changes to take effect.
You edit images from the Gallery pop up widow. See info-graphic below of the Gallery manager pop-up and below the image in the Legend there is a detailed explanation of each setting plus hints and tips on using this feature.
1. Click Show to open Image editor.
When you click the Show link on any image you’ll see the edit image pane appear and the link changes from show to “Hide’.
2. Image Thumbnail
You will be familiar with this as it is the WordPress image manager. Its fully functional so you can use the image editor.
3. Adding Alternate Text
This is where you add the Alternate text that is important for SEO. The Alt text should always contain the page focus Keyword phrase. This is an important SEO element. You only need it in one image in the Gallery. Remember that it adds to your pages Keyword density, so don’t go crazy with enter it on every widget.
4. Adding Caption Text
This is where you add the caption text that will show on this image.
5. Excluding Images
Check this box to exclude this image from the Gallery.
This is not important as the Gallery ignores it but as best practice always select ‘Show at Full size’
7. Insert Image Into Post
You can insert a gallery image into the Product Description as well as show it in the Gallery. To do that Click this button. Note: Any changes made before clicking this button will not be changed if you have not saved them. Use as featured Image. If you see this link you will know that this is not the featured image. Clicking it pleases the featured image with this image.
Click this link to delete the image from the gallery.
9. Save all Changes
Product Variation Images
WooCommerce Dynamic Gallery completely revolutionizes Variation images and now makes them a really useful tool in making sales.
To activate Product image variations you must first activate the feature on your Dynamic Gallery admin panel under the gallery section.
Then on your product page you must have Product variations set for that product. For help in learning how to configure Attributes and then set Product variations please consult the WooCommerce Wiki.
and once you have attributes set you can then configure Product Variations for each product.
Now that you have set the product type to ‘Variable’, Selected some Attributes – and created some product Variations you are ready for to add some images for each variation.
Using the Gallery uploader (WordPress gallery uploader) upload the images you want to use for each variation and save your work. After you ‘Save’ you will see that the variations you have set for this product are now shown on each image edit section. Assign each image to the variations that apply and ‘Save all Changes’. It looks like this.
1. Open the gallery image manager by clicking on any image in the WooCommerce Dynamic Gallery Meta image manager. When the pop-up opens – if you don’t see all of your images click on the Gallery (#) at the top.
2. Click the Show link on any images row and you’ll see the image edit screen for that image open.
3. Image details. File name, File type, Upload date, Dimensions.
4. Alternative Text – Enter SEO keywords here for Search engine visibility.
5. Caption Text – this is where you enter the caption text that will show when the image is the current image in the Gallery.
6. Exclude Image – Check this box if you only want the variation image to show in the gallery when it is selected as an option by the user. Note if this is not a variation image checking this box will completely exclude the image from the Gallery. This is useful feature if you want to insert an image into the product description but don’t want it to show in the Gallery.
7. Variations – Assigning this image to a variation is as simple as checking the box next to the applicable variation.
8. If this image is of a Large > Green > Short Sleeve T Shirt then they are the variations you will check. If a user on the front end checks any or all of those options on the front end this image will show in the gallery along with any other images that have been assigned to that variation. Eg along with all the Large T shirts.
9. Use as Featured Image – Set the products feature image from the Gallery pop-up image manager.
10. Delete – Delete any image from the gallery image pop-up manager.
10. ‘Save All Changes’ – You must always save all changes before closing the pop-up for image edits and configs to take effect.
That is it – your variation images will now show in the gallery when and as a user selects them.