Custom WooCommerce Single Product Page Layout with Spexo Site Builder
This guide will walk you through creating a custom template for single product pages using the Site Builder module in Spexo Addons.
The Site Builder module in Spexo Addons allows you to design custom layouts for different parts of your website—such as single posts, archives, headers, footers, 404 error pages, and more. This flexibility gives you the power to match your site’s look and functionality with your brand’s style, without touching any code.
To create and display single product templates, make sure the WooCommerce plugin is installed and activated on your website.
For detailed information about the Site Builder module, check out the Site Builder documentation.
How to Create a Single Product Page Template with Spexo Addons #
This step-by-step guide will help you design the perfect layout for your single product pages.
1. Open Site Builder
Go to your WordPress Dashboard and navigate to Spexo Addons → Site Builder.
2. Create a Product Template
In the Site Builder interface, switch to the Single Product tab and click the Create Single Product Template button.
3. Name Your Template
Enter a name in the popup window and click Create Template to proceed.
Set Display Conditions for Single Product Page Template #
4. Once the template is created, the Display Conditions popup will appear.
You can create multiple product templates for different use cases. Display conditions ensure that each layout appears where it’s needed.
Choose whether to apply the layout to all products or specific products, then click Save Conditions.
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 from the Spexo Addons – Woo Builder category to build your product layout. Some essential widgets you might use include:
- Product Title
- Product Media (Main Image / Gallery)
- Product Media List
- Product Price
- Product Rating
- Product Stock
- Add to Cart Button
- Product Excerpt
- Product Content (Full Description)
- Product Tabs
- Product Additional Information
- Product Meta (SKU, Tags)
- Product Grid / Slider / Carousel (e.g., Related / Upsell products)
- Taxonomy List (e.g., tags, custom taxonomies)
- Archive List
- Recent Post List
Arrange and style these widgets to match your design preferences and branding.
7. Publish Your Template
Once your design is ready, click the Publish button to save and activate your Single Product Template.
Single Product Page Example (with Site Builder) #
Design custom product pages using Site Builder with widgets like title, gallery, price, add to cart, tabs, and more—fully tailored to match your store’s look and boost conversions.
View this single product page on the Furniture Shop Prebuilt Website for a live example of the layout in action.
How to Edit an Existing Single Product Page Template #
Want to update your product layout? It’s easy.
✓ Steps –
- Go to Spexo Addons → Site Builder in your WordPress Dashboard.
- Under the Single Product tab, locate your existing templates.
- Hover over the desired template and click Edit Template to make changes.
For more information on each custom layout type, please refer to the dedicated documentation pages below:
- Header
- Footer
- Post Archive
- Single Post
- Search Results Page
- 404 Page
- Product Archive
- Product Category
- Global Templates
If you need help while building or editing your Single Product Page Template, feel free to reach out to our support team. We’re happy to assist!
Navigation:
