Product table image options
Image size
The image_size option controls the size of the product image if you have included the image column in your table.
The default image size is 70x70 pixels. You can use a width × height value in pixels or any standard WordPress image size such as thumbnail, medium, large, etc.
If you specify only one number, this is used for both the width and height. You can include px after the number or omit it. So image_size="70px" is the same as image_size="70".
You can set the image size option globally in the settings page, or add it directly to the shortcode for individual product tables.
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"]
To use the medium image size:
[product_table columns="image,name,description" image_size="medium"]
My images are displaying in 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.
- The column widths 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.
- If your images are being displayed or shown in the wrong size or aspect ratio, despite ensuring the correct image settings or proportions, this can sometimes be due to your theme's image settings that override the plugin's settings and cause images in your product table to be cropped in unexpected sizes. To test for this, temporarily switch to a default WordPress theme (e.g. Twenty Seventeen) and check if the issue with images persists. If it doesn't, then browse your theme's settings for its own settings for image sizes or cropping. An example of this is the Flatsome theme, which has its own setting for custom image ratio.
The table is loading bigger images than it needs to
If you set a custom image size in the product table, then WordPress will look for a registered image size that either matches this exactly, or shares the same aspect ratio.
For example, let's say that you set the product table image size to 50x100, and your site has a registered image size of 100x200 but none that matches exactly. In this case, the aspect ratio is correct so the 100x200 image will be loaded behind the scenes, and displayed at 50x100 in the product table.
If there is no registered image size with the same aspect ratio then the image will be displayed as the correct size in the front end, but the full size image will be loaded in the background. This could slow down your product tables.
You can use any of the following methods to prevent this from happening:
- Instead of setting a custom image size in the product table, use one of the registered image sizes which are listed under Settings → Media (e.g. thumbnail or medium).
- Go to Settings → Media and edit one of your existing image sizes to match the aspect ratio of the images in the product table, and then regenerate your thumbnails to update all the existing images. (Warning: This will also change any images that use this size elsewhere on your site.)
- Register an additional image size which matches the image sizes that you want to display in the table. Again, you will then need to regenerate your thumbnails to create a version of all your existing existing images in the new size.
Image lightbox
If you use the image column in WooCommerce Product Table, the image will open in a lightbox when someone clicks on the image.
The lightbox uses the Photoswipe library which is included in WooCommerce. The lightbox is enabled by default. If you would like to disable it, untick the option in the 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 is included with WooCommerce. WooCommerce doesn't provide a way to customize the lightbox, but this can be achieved by adding additional CSS to your site.
Can I show the full product image gallery in the lightbox?
The image lightbox that comes with WooCommerce Product Table only shows the main product image. If you would like people to be able to click on the image in the table to open a lightbox containing the full image gallery, then you would need to use WooCommerce Product Table with our dedicated lightbox plugin - WooCommerce Quick View Pro.
You can use WooCommerce Quick View Pro to link the image column of the product table to a lightbox popup containing multiple images of each product (either displayed as clickable thumbnails or bullet navigation). You can also choose whether or not to show product information and add to cart buttons in the lightbox.
Here are some screenshots showing how you can display the product image gallery in a Quick View Pro lightbox.
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.
How to remove images from the table
If you don't want to display images in the table at all, then you can delete the image column from your list of table columns. Please see the article about editing columns in the table.