How to Create a Custom Single Product Template in WooCommerce with Elementor

Updated: January 15, 2022

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
  • Upsells

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 to open the Theme Builder screen. Click the plus icon on the Single Product tab on the left panel.

On the appearing Elementor templates library window, 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.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating on WordPress with Elementor.


How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.