Gutenberg Block for WooCommerce Product Table
Gutenberg Block for WooCommerce Product Table is a free add-on for our WooCommerce Product Table plugin.
When you have both plugins installed on your WordPress site, it adds a 'WooCommerce Product Table' Gutenberg block which makes it easier to insert product tables. It is ideal for any website that uses the WordPress Gutenberg editor, giving you full control over your product tables without having to use shortcodes.
How to use the Gutenberg block
- First, make sure that both Gutenberg Block for WooCommerce Product Table and WooCommerce Product Table are installed on your WordPress site.
- Edit any page or post that uses the Gutenberg editor.
- Click the + icon to insert a new block. In the block selector, you can find the block titled ‘WooCommerce Product Table’ in the 'WooCommerce' section, or type it into the search box.
- This will add the Product Table block into the Gutenberg editor.
- Initially, the block lists all the products in your store, and inherits the global defaults from the WooCommerce Product Table plugin settings page. You can override any of these settings by selecting the options directly in the Gutenberg block.
Add a block for each product table that you wish to create. You can add multiple product table blocks to the same page.
Gutenberg block options
You can configure the WooCommerce Product Table block using the options shown within the block in the Gutenberg editor. There are additional block settings in the ‘Block’ tab of the Gutenberg sidebar. These appear when you select the block in the editor:
Table Columns
The 'Add column' dropdown lets you choose which columns to include in the product table. You can choose from any of the columns that are built into WooCommerce Product Table (except for custom attribute columns).
After selecting your columns, you can:
- Drag and drop to change the order of the columns in the table.
- Use the pencil icon to rename your column headers.
Products
You can use the ‘Select products’ section to choose which products to include or exclude in the table. Select from any of the options built into WooCommerce Product Table for displaying products (except for custom attribute columns).
Add to Cart Column Settings
Use these to configure the add to cart column of the table (if present):
- Add to Cart Button - Show an add to cart button, checkbox, or both. (More about this option)
- Quantities - Shows or hides the quantity boxes for each product. (More about this option)
- Variations - Choose whether variable products link to the single product page, appear as dropdowns, or appear with each variation on its own row in the table. (More about this option)
Table Controls
Use this section to choose whether to include filter dropdowns above the table. (More about this option)
Additional options
You can use this field to insert any of the additional options that come with WooCommerce Product Table.
For example, if you wish to set the number of rows per page for an individual table, instead of setting this option globally on the settings page, then you can insert the rows_per_page shortcode option. For example, you might enter rows_per_page="10" into into the 'Additional options' field for the Gutenberg block.
To use more than one additional option, enter each option on a separate line. For example:
rows_per_page="10" links="none"
FAQ
I can't select my product attributes!
The WooCommerce Product Table Gutenberg block only works with global attributes which you add under Products → Attributes and then select for specific products. It is not possible to add columns or select products based on custom attributes which you created directly on the Add/Edit Product screen.
If you want to display custom attributes in the product table then you need to use the [product_table] shortcode instead. This supports custom attribute columns and listing products with on a specific custom attribute.