A step-by-step guide to replace the default woocommerce product grid displayed on the Elementor shop page with a custom woocommerce product table. This same guide also works for the product search, product category, product attribute and product tag archive pages.
Time required: 5 mins ⏱️
Difficulty: Beginner 😊
Universal theme builder guide
This article focuses on working with the Elementor PRO theme builder plugin. But you can use the same steps from this guide to place product tables on any other theme builder plugin as well for example Divi theme builder, Beaver Builder, Visual Composer, Oxygen, Bricks, etc.
Steps to replace product grid with table
1. Using your Elementor PRO theme builder plugin first create a template you wish to use on your product archive pages like shop, category, etc. Then use the display condition options for the template to assign it to product archive pages. Test if this template correctly appears on your product archive pages by visiting your shop page.
2. Install WooCommerce Product Table PRO on your site and create a product table that you would like to show on product archive pages. Then go to wp admin > product tables > archive override > and assign this product table to the shop page.
3. Now open the woocommerce shop page template in Elementor to edit it. You should see a screen like this:
4. Delete the product grid element section from your template.
5. Now in the elements menu search for the Text or Shortcode element. Then drag and drop it into your template at the same place where the product grid element was placed earlier.
6. In the settings of the Text element enter [wcpt_archive_table]. This special shortcode will allow the correct product table to be inserted into your template depending on the current archive page. It will print the product table you have assigned in wp admin > product tables > settings > archive override.
If you have completed the above steps, you will have the product table showing up on your Elementor shop page. But in case you have any difficulty following this guide, please contact support for a prompt resolution.