The best way to show a product catalog is to create a WooCommerce product table that dynamically pulls data from the product.

Instead of making users work, you bring everything into one place: prices, SKUs, stock status, and purchase options, all visible at once.

Pre-requisites #

1. TableKit Pro plugin: Obtener el complemento
2. WooCommerce: Descargar complemento

Make sure you have products added to WooCommerce before proceeding with the product table.

Step 1: Create a product table in the block editor #

To create a product table, open a new page on the Gutenberg block editor. In the editor,

1. Insert the TabelKit’s Post Table bloquear.
2. You can either import templates or build from scratch.
   1. Choose: To import a ready-made template.
   2. Start Dummy: To start with a blank canvas.

3. Once the Post Table is inserted, go to the right sidebar, under the Contenido tab, and expand the Consulta Filtrar sección.
4. Para Post Type, select Product.

Now you have all the WooCommerce product data from your table. Now you can configure and customize the product table to show the data you want to present.

Step 2: Configure Columns of the WooCommerce Product Table #

With each column in your product table, you can present different types of product info. For example, in the following table, column 1 presents the product ID, column 2 presents the Producto Título, column-3 presents Precio del producto, column 4 shows the product image, and column 5 includes the añadir a la cesta botón.

Now, let’s create a table with this product information.

To add a column in the WooCommerce product table,

1. Abre el Columna Ajustes sección bajo la pestaña Contenido.
2. Clickea en el Añadir artículo botón.
3. Para el Field, select the product info you want to show in this column. For this case, we are selecting Product ID.
4. El Etiqueta acts as the column header text. Add any label you want to show in the column heading.

Here is a process of adding columns to the products table to show specific information about a product.

Similarly, you can add other columns to show product info, including:

• Titulo del producto
• SKU del producto
• Product Prices 
• Precio regular
• Sale Price
• Imagen del producto
• Descripción del Producto
• Short Description
• Product Type
• categoria de producto 
• Stock Status
• Stock Quantity
• Add to Cart button

… and any custom field or Advanced Custom Field (ACF)

Adding Product Title to The Table #

You can show the Product title in a similar way you created a column. 

Simplemente haga clic en el Añadir artículo button → Set Titulo del producto in the Selected Field → Add a Etiqueta as column header.

For the product title, you can set a custom Character Limit y habilitar el Add Link option to link the product in the title.

Step 3: Settings of the WooCommerce Product Table #

Ajustes

• Enable Header: Turns the column heading row, like ID, Name, Title, Date, etc., on or off.
• Enable Pagination: Activates the ability to break the results into multiple pages.
• Enable Row Per Page: Displays a control that lets the user change how many items appear on each page.
• Enable Result: Shows text indicating the total number of results and which range is currently visible, e.g., Showing 1 to 10 of 50 results.
• Enable Pagination Control: Displays the page number navigation links e.g., Previous, 1, 2, 3, Next.
• Enable Search: Adds a search bar allowing users to filter the table content dynamically.
• Enable Individual Search: It adds a search field under each column header for targeted filtering of specific columns.
• Enable Export Button: Provides a button to download the table data such as CSV, PDF, Excel file, etc.
• Enable Sorting: Allows you to click the column headers to reorder the table content.
• Fixed-Width Table Cells: Applies a styling property to ensure all table cells maintain a consistent, non-dynamic width.
• Colapso fronterizo: This allows you to control whether the borders of adjacent table cells merge into a single line or remain separate.

Step 4: Product Table Pagination #

• Previous First: This button takes you immediately to the very first page of the results.
• Anterior: It helps to navigate you one page backward in the sequence of results.
• Próximo: This button navigates you one page forward in the sequence of results.
• Next Last: Enabling this button, you can immediately go to the very last page of the results.

• Row Per Page: Here, you can customize the label displayed next to the dropdown that controls the number of items per page.
• Pagination Range: This feature allows you to customize the text string that displays the visible results range,e e.g., Showing 1 to 10 of 50 results. The Content field lets you change the text of the pagination range.
• Pagination page of: It lets you customize the text string that displays the current page number versus the total page count, e.g., Page 1 of 5.

Step 5: Hide Columns #

This setting lets you select specific columns like ID, Name, Title, and Date to hide from the table display on the front end.

Step 6: Customize the WooCommerce Product Table #

Common: The Style tab provides options for common visual adjustments like Alignment, Typography, Color, Background, Border, Box Shadow, and Padding.

Header: It lets you visually style the column header row of the table. It offering controls for Alignment, Typography, Color, Background, Border, Border Radius, etc.

Column: These settings allow users to select specific columns such as ID, Name, Title, etc. from the table and apply unique styling to them, including setting the Background and text Color.

Cells: Here you get to style the main body of the table. This including Alignment, Typography, Color, Background, Border, Padding, etc., with separate options for applying styles to Even and Odd numbered rows.

Caption: To style the table caption text, here you’ll get to change color, font, alignment, background, padding, etc.

Export Button: You can style the Export button that opens the download options. The options are color, background, and border for Normal/Hover states, etc.

Export Button Dropdown: This feature offers options like Padding, Margin, Background, text Color, etc. to style the menu containing the export options.

Pagination: It manages the visual styling for the row count and navigation controls, offering options for icon/text colors, background, gap, and more.

Search: If you want to customize the appearance of the primary search input field and its container, use colors, background, border, radius, and other.

Individual Search Button: It defines the aesthetics of the magnifying glass icon/button used to initiate a search, covering its size, placement, color states Normal/Hover/Active, and more.

Individual Search Options: Controls the look and feel of the column selection dropdown menu for focused searching, styling its color, background, border, margin, etc. across different states.

Sorting: Here, you can set the design attributes for the sort arrow icon located by the column headers, adjusting its size, spatial positioning (H/V), and color on interaction.

You have successfully mastered the features and styling controls of the GutenKit Post Table block. Start building dynamic and customized Post Tables today for maximum clarity and impact.