WooThumbs offers you a great deal of flexibility when it comes to presenting your product imagery in WooCommerce.
Once installed, navigate to
WooCommerce > WooThumbs.
Here you will find the following sections:
The dashboard offers links for getting support and managing your licence and billing. It also has an additional tool for clearing your image cache.
These settings determine how the overall gallery appears on the single product page.
These are just general settings for how the images should appear to the user.
- Gallery Width
By default, this is set to 48% as that is the most common width of the image section in WooCommerce themes. You may need to change this to 100%, or even less, depending on your theme.
Float the image display to the left, right, or not at all.
- Icon Colours
The colour of the icons that may be present over the image, for example the previous/next icons.
- Show Icons on Hover?
When enabled, icons will only be visible when the image is hovered.
- Show Icon Tooltips?
When icons are hovered, a tooltip will be displayed.
- Single Image Width (px)
The size of the main product images. For a responsive site, set this to the largest size your single image will be. Images will be regenerated automatically, but may take time to appear on the frontend.
- Single Image Crop Ratio
How should the main images be cropped? Common examples: 1:1, 4:6, 16:9. If empty, no cropping will occur. Once changed, product gallery images will be regenerated automatically, but may take time to appear on the frontend.
- Thumbnail Image Width (px)
Width of the product gallery thumbnails. This won't affect any other image sizes. Images will be regenerated automatically, but may take time to appear on the frontend.
- Thumbnail Image Crop Ratio
How should the product gallery thumbnails be cropped? Common examples: 1:1, 4:6, 16:9. If empty, no cropping will occur. Once changed, thumbnail images will be regenerated automatically, but may take time to appear on the frontend.
- Large Image Size
Choose a size for large images. Hover zoom and fullscreen will both use the size you select here.
These settings apply to the main image display (i.e. not the thumbnails).
This defines the way in which the main images transition as the user browses your product imagery. The options are Horiziontal, Vertical, and Fade.
- Transition Speed (ms)
This is the speed at which the above transition will take place.
When enabled, the slider images will automatically transition.
- Slide Duration (ms)
If you have autoplay set to true, then you can set the slide duration for each slide.
- Enable Infinite Loop?
When you get to the last image, loop back to the first.
These settings allow you to alter the way additional product images are displayed; whether you want them to slide, stack, or not show them at all - the settings are here.
General Navigation Settings
- Enable Prev/Next Arrows?
Whether to show the left and right arrow icons over the main image.
- Enable Thumbnails?
Whether to enable the thumbnail navigation.
- Thumbnails Type
If navigation was enabled, you can choose the type of navigation:
- Sliding Thumbnails
Sliding Thumbnails will show the images in a single row, and slide through them when you near the end of each row.
- Stacked Thumbnails
Stacked Thumbnails will simply stack the thumbnails into columns of your choosing.
- Sliding Thumbnails
- Enable Thumbnail Controls?
Enables left/right or down/up arrows (depending on the layout below) for the thumbnails.
- Thumbnails Position
Choose whether the thumbnails are displayed above, below, to the left, or to the right of the main image.
- Width (%)
If you chose the left or right thumbnail layout, you can set the width of the thumbnail column. This is a percentage value.
- Thumbnails Count
How many thumbnails to display in a row.
- Thumbnails Transition Speed (ms)
The speed at which the thumbnail navigation moves in milliseconds.
- Thumbnails Spacing
The space in pixels between each thumbnail.
- Enable Bullets?
Choose whether to enable the bullet navigation.
WooThumbs comes with a fantastic built in zoom feature, with a variety of options:
- Enable Hover Zoom?
- Zoom Type
Inner fills the space of your main image with the zoomed image, as long as the main image is smaller than the current size of the main image.
Ouside displays the zoomed image next to the main image.
Follow creates a magnifying glass effect and follows the cursor around the main image.
The following settings depend on which Zoom Type you selected.
Outside and Follow Zoom Settings
These settings only apply if you chose Outside or Follow as "Zoom Type".
- Lens Width
Set the width in pixels for the zoomed image lens.
- Lens Height
Set the height in pixels for the zoomed image lens.
Outside Zoom Settings
- Zoom Position
Position the zoomed image to the right or left of the main image.
- Lens Colour
As you hover over the main image, the zoomed portion will be display in this colour.
- Lens Opacity
The colour you choose above can be transparent. Choose a decimal between 0 and 1.
Follow Zoom Settings
If you chose Follow Zoom, these are the options available to you:
- Zoom Shape
The shape of the magnifier.
WooThumbs comes with a built in fullscreen options.
- Enable Fullscreen?
- Enable Click Anywhere?
When enabled, click anywhere on the main image to trigger fullscreen.
- Enable Image Title?
When enabled, the image title will be visible when viewing fullscreen.
You can change the layout of your WooThumbs imagery at a certain breakpoint.
- Enable breakpoint?
- Breakpoint (px)
The settings below will be implemented if the screen size is smaller that this pixel value.
- Width After Breakpoint (%)
The width of the images display after the breakpoint.
- Position After Breakpoint
Choose a position for the images after the breakpoint.
- Move Thumbnails Below After Breakpoint?
Choose whether to move the thumbnail navigation below the main image display after the breakpoint.
- Thumbnail Count after Breakpoint
The number of thumbnails to display in a row after the breakpoint.