The theme builder feature of Elementor (the pro version) allows you to create custom templates for the parts of your theme, including the single product page if you use WooCommerce. No coding skill is required to create a custom single product template with Elementor. You can use the visual editor of Elementor.
When creating a custom single product template for your WooCommerce store using Elementor, you can set where the template to be applied. Whether to the entire website, a certain product, products under a certain category, products under a certain tag, and so on. The custom single product template you create will replace the default single product template of your active theme.
How to create a custom single product template for WooCommerce with Elementor
The process of creating a custom single product template for WooCommerce in Elementor is no different from creating a custom single post template. You can either create a custom single product template from a premade template or from scratch. Elementor offers 4 premade custom single product templates you can choose from.
The following are the Elementor widgets you can use to create a custom single product template:
- WooCoomerce Breadcrumbs
- Product Title
- Product Images
- Product Price
- Add to Cart
- Product Rating
- Product Stock
- Product Meta
- Short Description
- Product Content
- Product Data Tabs
- Additional Information
- Product Related
In this article, we will show you how to create a custom single product template from a premade template.
To get started, go to Templates -> Theme Builder. Open the Single Product tab and click the Add New button to create a new single product template.
*The Single Product tab is only available if WooCommerce is installed and activated
Give your single product template a name and click the CREATE TEMPLATE button.
On the Elementor templates library, select a premade template you like and click the Insert button to import it to the Elementor front-end editor.
Once the template is loaded to the Elementor front-end editor, you can actually click the PUBLISH button to publish the template. But before doing so, you might want to edit some parts to tailor them with your business brand or your taste. To make it easy for you to learn the template structure, you can use Navigator feature.
To edit a widget, you can click the widget handle (or simply select it via Navigator) to turn the widget into an editing mode. You can then switch to the left panel to edit the widget.
Once you are done editing the template, click the PUBLISH button on the bottom side on the left panel. On the appearing dialog, click the ADD CONDITION button to set where this template you want to apply.
To apply the custom single product template to all products, you can select Products. To set the custom single product template to products under a certain category or tag, select the category/tag you want from the dropdown menu. Click SAVE & CLOSE.
Until here, you have successfully created your custom single product template. You can exit the Elementor front-end editor to switch back to the WordPress dashboard.
Elementor itself allows you to create multiple custom single product templates. You can, for instance, create two or more custom single product templates and apply each custom single product template to products under different categories or tags.