Product Table design options
WooCommerce Product Table comes with a choice of pre-built templates, which quickly allow you to change the look and feel of the table. After selecting a template, you can further customize its design to match your exact brand.
You can find the design options at Products → Product Tables → Design.
Templates
First, select a template. To preview it, hover over the image of the template and click on the magnifier which appears. You can then select a template by clicking on the radio button.
Customizing the design
When you select a template, this will pre-populate all the design options below. Change these as needed to fine-tune the design.
You can change the styling of the following elements of the product tables:
- BordersChange the color and width in pixels of the outer borders of the table, the header border line, the horizontal lines between cells, the vertical lines between cells, or the line under the bottom of the table.
- Header background colorChange the background color of the header row, and all the cells in the main part of the table.
- Header background colorCustomize the color and size of the fonts used in the table header, cells, links, main buttons, inactive buttons, and quantity fields.
- SearchChange the color of the search box's background, text, and borders.
- DropdownsChange the color of the filter dropdowns' background, text, and borders.
- CheckboxesChange the border and tick color that is used for the add to cart checkboxes.
- Cell backgroundsChoose whether the cells in the table will all have the same background color, or whether the rows or columns will have alternating background colors.
- Corner styleEither inherit the styling of corners in the table from your theme, or override this by selecting square, slightly rounded or fully rounded corners.
To change the color, select from the color picker or add any hexadecimal color value (e.g. #757575). To change the size, use the up/down arrows or enter the size in pixels. Tip: If you want to add an RGB color then you can use a color convertor to get the right value.
You can add more styling using additional CSS.