Create a 'Child Row' in your woocommerce product table

WCPT PRO’s exclusive child row facility is a great UI addition to your table. It helps keep the table neat and compact while allowing visitors to quickly access additional information. Please see preview gif:

add a child row in your woocommerce prodcut table — When the toggle button is clicked the child row is revealed with additional information about the product.

The child row UI

The child row facility lets you show additional product properties in a separate child row below the main product row in a table. This child row is hidden when the page is initially loaded and it is only revealed when the visitor clicks on the toggle button at the beginning of the parent row.

Child row content source

The content of the child row is taken from specified columns of the product table. These source columns (that you select) are hidden in the product table initially. And their content is displayed in the child row when the visitor clicks on the toggle button.

For example let’s say you have a product table with five columns. You can assign the last three columns as the child row source. Accordingly these three columns are going to be hidden initially. And the content of these columns is going to be displayed in the child row when it is revealed using the toggle button.

Assigning columns as child row source

To assign table columns as child row source, you must first give names to the columns in the editor. See example of naming columns in the editor:

Here we are naming first column ‘img’ and second column ‘item’. In the same way you need to name all your table columns.

Add child row to any woocommerce product table

Once you have named your columns you can use the following options in your shortcode to assign child row columns:

So, for example, if we have a product table with the ID 123, it’s shortcode would normally be:

[product_table id="123"]

We can assign any of this table’s columns as the child row source by modifying the shortcode like this:

[product_table id="123" laptop_child_row_columns="Name 1 | Name 2 | Name 3"]

In the above example columns with names: Name 1, Name 2 and Name 3 are going to be hidden from the initial table view and displayed inside the child row only.

To specify child row columns for tablet and phone view we can extend the shortcode like this:

[product_table id="123" laptop_child_row_columns="Name 1 | Name 2 | Name 3" tablet_child_row_columns="Name 1 | Name 2 | Name 3" phone_child_row_columns="Name 1 | Name 2 | Name 3"]

Child row column width and order

By default each cell inside the child row gets 100% width. But if you want, you can assign custom % widths to the different cells. For this you need to modify the previously mentioned shortcode option to add custom widths as well. Next to each name inside the shortcode you need to add ‘: 50%’ and replace 50% with the percentage width for that cell inside the child row.

For example:

[product_table id="123" laptop_child_row_columns="Name 1: 100% | Name 2: 50% | Name 3: 50%"]

In the above shortcode we are asking for the column with the name ‘Name 1′ to have 100% width inside the child row, while Name 2 and Name 3 columns’ cells should have only 50% width each.

Child row with freeze column and heading

The child row facility works perfectly even if the table is in horizontal overflow mode. It also works well if the heading table heading has been frozen using laptop_freeze_heading=”true”

However, the child row facility cannot work if the table left column is frozen. For example if you are using: laptop_freeze_left=”2″ to fix the left 2 columns in place.