Settings overview

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.

Display Settings

These settings determine how the overall gallery appears on the single product page.

Display Settings

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.
  • Position
    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.

Image Sizes

  • 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.

Carousel Settings

These settings apply to the main image display (i.e. not the thumbnails).

  • Mode
    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.
  • Autoplay?
    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.

Navigation Settings

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.

Thumbnail Settings

  • 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.
  • 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.

Bullets Settings

  • Enable Bullets?
    Choose whether to enable the bullet navigation.

Zoom Settings

WooThumbs comes with a fantastic built in zoom feature, with a variety of options:

  • Enable Hover Zoom?
  • Zoom Type
    • Inner
      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.
    • Outside
      Ouside displays the zoomed image next to the main image.
    • Follow
      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.

Fullscreen Settings

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.

Responsive Settings

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.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.