Using WooCommerce Product Table with Page Builder Plugins (e.g. Divi Builder or Elementor)
WooCommerce Product Table is designed to work with any page builder plugin, such as Elementor, Beaver Builder, Divi Builder, Fusion Builder, Oxygen Builder, Bricks, Visual Composer by WP Bakery, and Thrive Architect. It has a Gutenberg block for the block editor, plus a shortcode which you can use to insert pre-built tables anywhere on your site, regardless of which page builder you use.
How to add tables to a page built using a page builder
- Create a product table in Products → Product Tables → Add New.
- The next step depends on whether you're using the Gutenberg block editor or another page builder:
- Gutenberg: Go to the page where you want to display the product table, add a 'Product Table' Gutenberg block, and select the table you created in step 1.
- Other page builders:
- Copy the shortcode from the final page of the table builder. You can also find the shortcode on your list of pre-built tables at Products → Product Tables .
- Go to the page where you want to display the product table, add a shortcode or HTML/code block, and insert the shortcode.
Shop and category pages
The table builder has an option to enable the table layout on your main shop pages. If you're using a page builder plugin, then you can only do this if you are NOT using the page builder to design your shop/category pages. (Of course, you can still use the page builder to design other pages on your site, such as your homepage, standard pages, blog posts and the single product page.)
For example, a site running the Elementor page builder might use WooCommerce Product Table as follows:
- They use Elementor to design a 'Quick Order Form' page and insert the product table shortcode into the page, as described above.
- They also wish to use the product table view on their shop and category pages. This means that they cannot design the page using Elementor, and should use the default shop and category page that comes with WooCommerce and their theme. As a result, they can create a product table and use the option to display it on the shop and category pages.
But I need to use a page builder on my shop pages!
If you need to use the page builder to design your shop/category pages, and you want to dynamically add product tables to these pages, then you will need to write some custom code to programmatically add the product table shortcode to the appropriate template. The exact code will depend on your page builder. Please note that this method is aimed at developers and if you don't know how to do it then we recommend asking your developer or posting a job on Codeable. We have partnered with them to provide customizations for our plugins.
