Style a product table
WooCommerce / Product Table
Pick a colour template, set how wide the table is, and choose which columns stay visible on smaller screens. A shortcode or block value overrides WooCommerce → Product Table → Table Defaults.
Colour templates
Set design to one of these. Default follows a blue accent close to a standard WordPress admin colour. The others swap the accent, borders, and row highlight.
| Template | Look |
|---|---|
default | Light table, blue accent. |
modern | Blue accent, softer borders. |
classic | Neutral grey, darker borders. |
minimal | Near-white, light borders. |
dark | Dark background, light text, blue accent. |
green | Green accent on a light green tint. |
purple | Purple accent. |
red | Red accent. |
[yh_wc_product_table design="dark" columns="image,name,price,buy"]The template writes these variables on the table container: --yh-wcpt-primary, --yh-wcpt-secondary, --yh-wcpt-text, --yh-wcpt-border, and --yh-wcpt-highlight. They are an inline style, so a later stylesheet rule has to use !important to replace them, or you should style the cells directly.
Width
width | Layout |
|---|---|
normal | Default. Uses the theme wide alignment, in line with the WooCommerce product grid. |
wide | Same alignment as normal. The container class is width-wide if you want your own CSS to treat it differently. |
full | Breaks out to the viewport width, with side padding. The scrollbar is offset so the table does not spill sideways. |
width="full" already breaks out of a normal content column. If a parent still clips it, that parent is using overflow: hidden or a transform. Move the table out of that section, or set the width back to normal.
Columns on smaller screens
responsive_visibility hides a column below a width. The value is column:device, comma-separated. The device is the smallest screen that still shows the column.
| Value | Hidden below |
|---|---|
desktop | 1024px. Hidden on tablets and phones. |
tablet | 768px. Hidden on phones, still visible on tablet and desktop. |
[yh_wc_product_table columns="image,name,sku,stock,price,buy" responsive_visibility="sku:desktop,stock:tablet"]Phones at 782px and below turn the table into stacked cards. DataTables’ own column collapsing is off at that size, so use responsive_visibility rather than expecting columns to fold into a child row.
column_priority sets the DataTables collapse order on screens that still use that behaviour. Lower numbers stay visible longer. Use 1 to 10, for example column_priority="name:1,price:2,sku:6".
Header and extra classes
| Attribute | Default | Notes |
|---|---|---|
sticky_header | false | Keep the heading row visible while the table scrolls. |
hide_header | false | Remove the heading row. |
custom_class | Empty | Extra class on the table, for your own CSS. |
Common mistakes
Full width is still clipped
width="full" sets the container to the viewport width. A parent with overflow: hidden, or a transformed element, can still clip it.
Fix: Place the table outside that section, or use width="normal". width="wide" will not go wider than normal unless you add CSS for .width-wide.
A column you hid on desktop is still on the phone
desktop hides the column under 1024px. tablet only hides it under 768px. There is no phone-only value.
Fix: Use sku:desktop to drop SKU on both tablet and phone. Use stock:tablet when it should remain on a tablet.
Custom colours snap back to the template
The design template sets the colour variables in an inline style on the container. A normal stylesheet loses to inline styles.
Fix: Add !important when you override those variables, or target the cells and buttons directly. custom_class gives you a hook that does not fight the template.