Getting started with WooThumbs

Installation

To install the plugin:

  1. Open wp-admin and navigate to Plugins > Add New > Upload.
  2. Click Choose File, and choose the file jck_woothumbs.zip from your CodeCanyon download zip.
  3. Once uploaded, click activate plugin.
  4. The plugin is now installed and activated.

Once installed you can find the options panel under  WooCommerce > WooThumbs.


Configuration

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:

Display Settings

These are just general settings for how the images should appear to the user.

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

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.

Product Settings

Each product will now have a new settings tab, where you can manipulate WooThumbs on a per-product basis.

WooThumbs product tab

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

  1. Navigate to a variable product.
  2. Click the Variations tab.
  3. Expand one of the variations.
  4. Click the link labelled Add additional images. The media gallery will popup.
    WooThumbs add additional images link
  5. Select 1 or more additional images, and then click Add to variation.
  6. 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.
    WooThumbs additional images
  7. Once you've done this for all required variations, either Update your product, or click the Save Changesbutton.

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

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:

WooThumbs bulk edit

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.

WooThumbs bulk edit field

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.

WooThumbs attachment ID


Shortcodes

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

Still need help? Contact Us Contact Us