Product table column widths
WooCommerce Product Table automatically sizes the columns for the best fit. You can override this behavior and control the column widths manually.
This is a way to force more or less space for specific columns in the table. For example, you can use this to increase the width of the Buy column if you have lots of variations or product options.
How to force column widths to a certain size
- Go to Products → Product Tables and click to edit an existing table.
- Click the pencil icon for the column that you wish to edit the width of.
- Enable the 'Advanced' toggle.
- Set the width as follows:
- % - Enter the percentage of the table width that the column should take up. If you enter this for all columns then the total must be 100.
- px - Enter the number of pixels wide that the column should be. If you enter this for all columns then the total must be the same or less than the total available space. Generally, we recommend using the percentage option because it gives more reliable results on different screen sizes.
Common problems
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 I want them all to line up
The column widths are calculated for each table individually. If you have more than one table on a page, you can use the Widths options to force the widths to be the same for each table by giving each table the same Widths value.
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. Use the Widths options to force the columns to always be the same width.