A step by step guide to replace the default woocommerce product grid in Elementor shop page with a custom woocommerce product table.
Time required: 5 mins
Difficulty: Beginner
Using WooCommerce Product Table PRO you can easily replace the default product grid on Elementor woocommerce shop page with a completely custom product table as per your requirement.
This article focuses on on Elementor PRO, but you can use this guide to place WooCommerce Product Table on any page builder template for the woocommerce shop, category, attribute and tag pages. It will work equally well with Divi page builder, Beaver Builder, Visual Composer, etc.
Please follow these steps:
- Using Elementor PRO create a template with display condition to appear on Product Archive pages only. If you have a template to override all archives, not just product archives, then you need to first create a new template that only overrides Product Archives. The instructions in this tutorial are to be applied on this Product Archives template only.
- Install WCPT PRO, create a custom product table and configure your WCPT Archive Override facility (wp admin > product tables > settings > archive override) to assign this tables to the shop page.
- In Elementor, go to your product archive customization screen page.
4. Delete the ‘Archive Products’ section from your template.
5. In your Elementor panel > Elements section search for ‘Text’. The Text widget element will come up on the screen. Drag and drop it on your template, below the title (where the Archive Products element was placed earlier).
6. In the settings of the Text widget element enter [wcpt_elementor]. This special shortcode will print your product table on the page according to your settings 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.