WooCommerce Archive Page Layouts in Elementor with Spexo
This guide will walk you through the process of creating a custom product archive template using the Site Builder module in Spexo Addons.
With Spexo Addons, you can design completely custom layouts for various parts of your WordPress and WooCommerce site — including product archives, single products, headers, footers, search results, and more — all without writing any code. This ensures your store remains visually consistent and provides an engaging shopping experience.
Make sure WooCommerce plugin is installed and activated to access the product archive layout features.
For detailed information about the Site Builder module, check out the Site Builder documentation.
How to Create a Custom Product Archive Layout #
Follow these step-by-step instructions to build your custom product archive layout using the Site Builder.
1. Access Site Builder
Go to your WordPress Dashboard and navigate to:
Spexo Addons → Site Builder
2. Create a New Archive Template
- Click on the Product Archive tab.
- Then click the Create Product Archive Template button.
3. Name Your Template
A popup will appear asking you to enter a template name.
Enter something meaningful like “Shop Grid Layout” and click Create Template.
Set Display Conditions for Product Archive Template #
You can create multiple archive templates for different product listing scenarios. Display conditions ensure each layout appears exactly where it’s needed.
4. Choose Where the Template Will Display
Once the template is created, the Display Conditions popup will appear.
Choose to apply it to all product archives or set a specific target (e.g., shop, category archive), then click Save Conditions.
Note: If you are not using Spexo Addons Pro, this layout will only display as the main shop page and won’t support advanced conditional placement.
Want to learn more about how display settings work? Check out our Site Builder Display Settings documentation.
Design Your Single Product Page Layout #
After saving the display conditions, the editor will open.
5. Use Widgets to Build Your Product Archive Layout
Use widgets from the Spexo Addons – Woo Builder category to design your product archive layout. You can include elements such as:
- Product Grid / Slider / Carousel
- Taxonomy List (e.g., product categories or tags)
- Archive Title / Description
- Archive List
- Recent Posts
- (And other useful product-related widgets)
Arrange and style these widgets to match your store’s branding and layout preferences.
6. Publish Your Template
Once your layout is complete, click Publish to save and activate your custom product archive template.
Product Archive Page Layout – Example #
Design a fully customized product archive layout using Site Builder—showcasing your products in a way that matches your brand, improves user navigation, and enhances the shopping experience.
See this product archive page on the Smart Watch Elementor Website Theme for a live example of the layout in action.
How to Edit an Existing Product Archive Template #
Need to make changes to a product archive layout? Just follow these simple steps:
✓ Steps –
- Go to Spexo Addons → Site Builder and click the Product Archive tab.
- Hover over the template you want to edit, then click Edit Template.
From there, you can easily modify the layout, update styles, and republish your changes.
If you need help creating or editing your product archive layout, feel free to reach out to our support team — we’re always happy to help!
Navigation:
