The Porto Product Archive Builder allows you to create custom layouts for WooCommerce product listing pages, including the Shop page and all product archives.
You can design layouts using Elementor or WPBakery, assign them globally or per archive, and control the filter layout behavior through Porto Theme Options.
Step 1: Enable the Product Archive Builder
- Navigate to Porto > Speed Optimize Wizard > Other Minify
- Uncheck the option Product Archive in Disable Unused Template Builders
This option must be activated to create or edit custom product archive page layouts.
Step 2: Allow Your Page Builder to Edit Porto Templates
For Elementor:
- Go to Elementor > Settings in your WordPress Dashboard.
- Under the Post Types section, make sure “Porto Template” is checked.
This enables Elementor to edit templates built through Porto’s Template Builder.
For WPBakery Page Builder:
- Navigate to WPBakery Page Builder > Role Manager.
- Under the Post Types dropdown, ensure “Porto Template” is enabled.
This allows WPBakery to edit Porto Template Builder layouts.
Step 3: Create a New Archive Layout
- Go to Porto > Template Builder > Product Archive > Add New
- Enter a name for your custom layout and click Create Builder.
- Once created, the template will automatically open with your active page builder (Elementor or WPBakery).
Note: If both Elementor and WPBakery are installed, you may need to manually switch between them.
However, it’s not recommended to keep both page builders active at the same time, as this can negatively affect site performance.
Step 4: Build the Custom Product Archive Page Layout
Once the editor opens, you’ll see a Porto Studio popup that lets you import a prebuilt block.
- Import a prebuilt product archive layout from Porto Studio for a quick start, or
- Close the popup and build your layout from scratch.
When editing with Elementor or WPBakery, you’ll find a wide 10 of Porto Product Archive Elements designed for product pages, such as Type Builder Archives, Sort by, Pagination, Products Result Count, Grid / List Style, Filter Toggle, Shop Hooks, Archive Title, Archive Description.
Step 5: Set Display Conditions
After finishing your design:
- Open the Display Conditions panel.
- Choose where this layout should appear — for example:
- Shop page only
- All product category pages
- Specific categories
- Product tags
- Entire product archive set
This ensures your layout is automatically applied to the correct product archive pages.
Step 6: Save and Preview
- Click Save or Publish to apply your custom layout.
- Clear your browser cache and any active caching plugins.
- Visit a product archive page to preview your new layout in action.
