WooCommerce page building with Elementor
Widgets for WooCommerce Products on Elementor Pro is a paid collection of Elementor widgets for presenting WooCommerce products and building key store pages. It is designed for WooCommerce websites that need product listings, category displays, and customized layouts without writing code.
The Pro edition supports WooCommerce shop, archive, single product, cart, checkout, thank-you, and My Account pages. This makes it possible to work on more than a standard shop grid: you can use Elementor to create and edit several parts of the customer journey in one visual workflow.
Product and category layouts
Use the Products List widget to add styled WooCommerce product listings to shop pages. The Products Grid widget presents products in grid layouts, while the Categories Grid widget displays WooCommerce product categories in a dedicated grid.
These widgets pull products or categories into the page after you place them in the Elementor editor. You can configure the number of columns, choose a query type, set the order, and adjust other display options. A product widget can also be used for archive-page products, giving you another way to structure product archive layouts.
Pro store features
- Build and edit WooCommerce shop and archive pages with Elementor.
- Customize single product, cart, checkout, thank-you, and My Account pages.
- Use more than 36 Elementor widgets for supported shop and account areas.
- Apply product filters by type.
- Control product thumbnails and available visual effects.
- Adjust item presentation, excerpts, price blocks, and thumbnail display settings.
- Build WooCommerce pages without requiring individual code work.
Practical workflow
Start by preparing the WooCommerce content you want to show. The widgets require several WooCommerce products with prices and thumbnail images, and those products should be assigned to several product categories for category-based displays.
Next, open the page in Elementor and drag the required widget into place. Select whether you are displaying products or categories, then set the layout, query, order, and styling options. You can refine the appearance of product items, thumbnails, excerpts, and prices from the widget settings. Repeat the process across the store pages you want to build.
Installation and setup
- Install the paid Pro edition in your WordPress site.
- Prepare WooCommerce products with prices, thumbnail images, and product categories.
- Open the relevant page or template with Elementor.
- Drag and drop the required WooCommerce widget into the layout.
- Configure columns, query type, order, filters, and style settings.
The source notes that Elementor 3.0 must be used, as the plugin code was updated for changes in Elementor. Review this requirement before building your WooCommerce layouts.
