Product table column width & image size
WooCommerce Product Table will automatically size your columns for the best fit. There are several options to override this behaviour and control the column widths, as well as the size of product images in the table.
will automatically calculate column widths, but you can override this using the
widths option. For example, this lets you force more or less space for specific columns in the table. You need to enter a value for each column in your table – either a percentage, a pixel amount or the keyword “auto” to have the plugin calculate the width automatically.
For example, you might have 3 columns in your table – name, description and price – and you want to set the width of name to 20%, description to 50% and price to 30%. You can achieve this with the following shortcode:
[product_table columns="name,description,price" widths="20,50,30"]
If you wanted to set the width of the first column to 50px,and automatically size the other columns, then you can use:
[product_table columns="name,description,date" widths="50px,auto,auto"]
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.
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.