Documentation

My Vertical Thumbnails Are Cut Off At The Bottom

Issue

When using vertical sliding thumbnails in WooThumbs, the last image is cut off.

Solution

Make sure that your thumbnails are the right size. The thumbnail slider height is calculated based on the original width of your images, so it won’t account for images that are stretched.

You can use the web inspector to work out what width thumbnails you need.

  1. Firstly, resize your browser. As most themes are now responsive, we want to resize the browser to find the point at which the thumbnails are at their largest size. This is the size the thumbnails should be set to.
  2. Once you’ve found where your thumbnails are at their largest, open up the web inspector. We’ll be using the Google Chrome browser for this example. In your browser, click View > Developer > Developer Tools.
  3. A new panel will open. Click the ‘Inspect’ icon at the top left of the new panel. This will allow you to hover over elements on the page and select them.inspect icon
  4. Hover over one of your thumbnail images. You’ll see an info panel appear with your image dimensions:example of dimensions for thumbs
  5. Dimensions are always listed as width x height in pixels. You’ll want to round these figures, too. So our thumbnails should be set to 137px x 156px.
  6. Go to your WordPress admin, then WooCommerce > Settings > Products > Display.
  7. Scroll down to Product thumbnails and enter the new dimensions. Ensure Hard crop? is checked.
  8. Click Save, and then regenerate your thumbnails.

Your images should now be displayed correctly in WooThumbs!

Are you using WooThumbs for WooCommerce yet?

Start your 14-day free trial right now and get instant access to the features described in this article.

or learn more

Was this helpful?

Please let us know if this article was useful. It is the best way to ensure our documentation is as helpful as possible.

WooThumbs for WooCommerce

WooThumbs for WooCommerce

Not got the plugin yet? Get instant access right now, free for 14 days.

or learn more

Still need help?

If you haven't found what you're looking for in our documentation, please contact support.

Get Support