Getting started with WooThumbs
To install the plugin:
- Open wp-admin and navigate to
Plugins > Add New > Upload.
- Click Choose File, and choose the file
jck_woothumbs.zipfrom your CodeCanyon download zip.
- Once uploaded, click activate plugin.
- The plugin is now installed and activated.
Once installed you can find the options panel under
WooCommerce > WooThumbs.
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:
These are just general settings for how the images should appear to the user.
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.
- Large Image Size
Choose a size for large images. Hover zoom and fullscreen will both use the size you select here.
- 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.
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.
Each product will now have a new settings tab, where you can manipulate WooThumbs on a per-product basis.
- Disable WooThumbs?
This will disable the WooThumbs gallery for this aprticular product.
- Video URL
Enter a video URL to add a video to your product. The video will open in the fullscreen gallery. You can enter most popular video hosting site URLs here, like Vimeo or YouTube.
- Maintain Slide Index?
When checked, the slide index will be maintained upon changing images. For example, if you're viewing the second image in the slider, and change variation, the second image will be selected from the new images.
Multiple Images per Variation
Adding multiple images to your product variations is easy.
- Navigate to a variable product.
- Click the
- Expand one of the variations.
- Click the link labelled
Add additional images. The media gallery will popup.
- Select 1 or more additional images, and then click
Add to variation.
- You will now see the additional images listed in your variation tab. It's important to note that you should still add a default "featured" image to your variation.
- Once you've done this for all required variations, either
Updateyour product, or click the
Reorder the Additional Images
Once you've added your additional images, you can simply drag and drop to reorder them.
Remove an Additional Image
If you've changed your mind about an image, simply click it to remove it. You can always add it back again by clicking
Add additional images.
WooThumbs bulk allows you to add additional images to your variations in bulk. Simply navigate to
WooCommerce > Bulk Edit Images where you will see the following page:
You can search for variations by the variable product ID, change the number of variations per page, and easily navigate between pages of variations.
Once you've found the variations you want to edit, simply enter a comma separated list of image attachment IDs, and then click
Update. No spaces.
The bulk page requires that your images have already been uploaded to the WordPress media gallery. This is also where you can find the attachment ID.
Currently, WooThumbs has 1 shortcode
woothumbs-gallery. This shortcode will display the gallery of a product. It can be used like so:
[woothumbs-gallery id="99"] where 99 is the ID of your product. If you use this for variable products and require that the images change when selecting a final variation, then the shortcode contents and the variations form should be wrapped in a container with a class of