In a recent Business Bloomer Club discussion, WooCommerce experts brainstormed on building a custom product archive in Elementor for a page showcasing selected products, such as “On Sale” items or products that start with a specific phrase like “Hello.”
Though Elementor offers powerful customization options, it lacks native capabilities to filter archives with precise conditions, pushing members to explore creative workarounds and plugins to achieve desired results.
Elementor’s Built-In Limitations and Solutions
Using JetEngine for Advanced Product Listings
One common suggestion was using JetEngine for advanced product filtering and listing. JetEngine, part of the Crocoblock suite, enables users to create custom product listings and add listing grids. By applying specific queries, you can restrict which products appear, such as filtering by those on sale or matching certain keywords in product titles. JetEngine’s integration with Elementor provides a seamless experience, though it does require additional setup beyond Elementor’s native tools.
Alternative Plugins and Custom Shortcodes
Another option discussed was using shortcodes to create a custom product display. For WooCommerce stores needing unique filtering, shortcodes can serve as quick solutions for displaying specific product selections on any Elementor page. Shortcodes also allow for dynamic and conditional display of WooCommerce products, including sales items or products with custom tags.
For instance, using the [products] shortcode with WooCommerce, you can limit products to those on sale or filter based on specific categories:
[[products on_sale="true"]]
You can place this shortcode directly within Elementor’s text or shortcode widgets, achieving a custom product display without extensive setup. However, this approach may lack the refined layout control and user experience of dedicated plugins like JetEngine or FacetWP.
Custom Templates and Programmatic Solutions
In cases involving thousands of products, custom templates or programmatic solutions are often necessary. Some members, like Rodolfo, found that assigning products to a category programmatically provided a more scalable solution, especially for extensive inventories. By defining products in a specific category (e.g., “Hello Products”), you can dynamically populate an Elementor archive page and pair it with advanced filters like Jet Smart Filters to manage sidebar filtering more precisely.
FacetWP for Enhanced Product Layouts
For those open to using additional plugins, FacetWP was also suggested as a robust option for filtering products on archive pages. Though FacetWP is primarily known for faceted search and filtering, it integrates with Elementor to create customizable, user-friendly layouts. FacetWP’s layout flexibility, combined with powerful filtering, makes it ideal for WooCommerce stores handling various product categories or complex sorting needs.
Step-by-Step: Setting Up Custom Product Archives in Elementor
- Install and Configure Required Plugins: Start with Elementor Pro and, if needed, JetEngine or FacetWP. Both plugins offer added flexibility for product display and filtering.
- Create a Product Archive Template in Elementor: Go to Templates > Theme Builder > Archive and create a new archive template. Customize the layout using Elementor widgets and blocks to suit your product display needs.
- Add Conditional Filters with JetEngine or FacetWP: Use JetEngine’s query builder or FacetWP’s filters to specify products based on desired criteria (e.g., “On Sale” or titles starting with “Hello”). Configure each plugin to display the correct set of products dynamically.
- Embed Shortcodes for Specific Product Listings (optional): If you prefer minimal plugin setup, use WooCommerce shortcodes within Elementor’s widgets. For example, to display only on-sale products, insert
[products on_sale="true"]in the shortcode widget. - Test with Jet Smart Filters or Custom Templates for Large Inventories: For extensive product databases, consider applying custom categories programmatically to group specific products. Then, configure Jet Smart Filters or Elementor’s native tools to display the products within your custom category.
Conclusion
The Business Bloomer Club members’ collective insights highlight several effective approaches for creating tailored product archives in Elementor, depending on store requirements and the complexity of the WooCommerce catalog. Plugins like JetEngine and FacetWP stand out as robust solutions, especially for larger stores or more refined filtering needs.
Alternatively, using WooCommerce shortcodes or custom templates provides flexibility for stores with simpler display requirements. For WooCommerce store owners, these methods not only enhance the user experience but also support effective product management, making it easier to spotlight special items or unique product groups dynamically.
In all, these methods equip WooCommerce users with the tools to achieve precise, personalized product displays, meeting customer needs and ensuring an engaging shopping experience.
