1. Home
  2. Documentation
  3. WooCommerce Product Table
  4. Product Table Shortcode Options
  5. Product table image options

Product table image options

Image lightbox

If you use the image column in your table, the image will open in a lightbox when someone clicks on the image.

The lightbox uses the Photoswipe library which has been included as part of WooCommerce since version 3.0. (Note: if you’re using an older version of WooCommerce, the lightbox will not work.)

The lightbox is enabled by default. If you would like to disable the lightbox feature, you can untick the option in the plugin settings page:

You can also enable or disable it for individual tables by setting the lightbox option in the shortcode:

[product_table lightbox="false"]

Can I change or restyle the image lightbox? 

The lightbox uses the Photoswipe library which comes with WooCommerce itself. Unfortunately there are no options to customize this (e.g. to change the lightbox background colour), and you could do this by adding some custom CSS. If you don’t know how to do this, we recommend that you post a job on Codeable to find a suitable WordPress developer. We have partnered with them to provide customizations for our customers.

Linking to the product page from the image column

If you would like the image to be clickable and take the user to the single product page, you need to disable the lightbox as described above. Once you’ve done this, the image column will instead link to the relevant single product page – see the links article for more details.

Image size

The image_size option controls the size of the image column if you have included this column in your product table.

The default image size is 70x70. You can use any standard image size (e.g. thumbnail, medium, large, etc), or one or two numbers to denote the width and height for the image.

You can either set the image size option globally on the plugin settings page, or add it directly to the shortcode for individual product tables.

For example, to use the medium image size:
[product_table columns="image,name,description" image_size="medium"]

For a square image 50 by 50 pixels:
[product_table columns="image,name,description" image_size="50"]

For an image 40 pixels wide by 60 pixels high:
[product_table columns="image,name,description" image_size="40x60"]

My images are the wrong size!

Image sizing is very complex in WordPress, and can have unexpected results.

A few tips:

  • Your images must be the correct proportion for your chosen image size. For example, if your images are square and you set image_size="50x40" then the images will still appear square.
  • If you’re using the built-in image sizes (e.g. thumbnail, medium or large) then you can check their sizes in Settings > Media.
  • It’s possible that the width settings (see above) may be overriding your image sizes. For example, if you have set a fixed width for the image column and a specific image size then these options may conflict.
  • If you’re really struggling to get your images the correct size in the table then you can resize the original image to the correct size.

Was this article helpful?

Related Articles