1. Home
  2. Documentation
  3. WooCommerce Product Table
  4. Product Table Shortcode Options
  5. Product table column widths

Product table column widths

WooCommerce Product Table will automatically size your columns for the best fit. You can override this behavior and control the column widths manually by adding the widths option directly to the shortcode.

This is a way to force more or less space for specific columns in the table. For example, some people find that the variations, quantity picker and add to cart buttons are displayed vertically in the table, on top of each other. You can force them onto one row by using the widths option to increase the size of the add to cart column.

How to force column widths to a certain size

To use the widths option, 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"]

The widths option isn’t working!

If the widths option isn’t working, then it might be that you have set the width too narrow and the contents will no longer fit in the column. Instead of allowing it to look broken, the plugin will make the width wider so that the contents fit. Try increasing the width of the affected columns.

I have multiple tables on the same page, and the column widths are different in each table

The column widths are calculated automatically based on the information about each product in the current table. If you have more than one table on a page, you can use the widths option (above) to force the column widths to be the same for each table.

My column widths change when I move from one page to the next, or use the filters

This can happen if the contents of a column contains a different number of characters for each product. The width of each column of the table is calculated based on the current products on that page of the table, so this might change when you perform a filter or go from one page to the next.

You can use the widths option (above) to force the columns to always be the same width.

Was this article helpful?

Related Articles