- How To Create A Single Product Page With WooCommerce Templates?
- How To Insert & Customize WooCommerce Single Product Page
With the help of Templately ready WooCommerce templates, you can easily create a stunning Single Product Page in Elementor for your WooCommerce products. For this, you just have to set up your shop page by using WooCommerce first. Follow these steps below to create a Single Product Page in Elementor using the ready WooCommerce templates from Templately.
How To Create A Single Product Page With WooCommerce Templates? #
Creating your single product page with WooCommerce templates from Templately is easy, but requires a little bit of preparation beforehand. It will take less than 5 minutes to set everything up for your online store website. Follow these steps below to create a single product page for your WordPress WooCommerce website.
Step 1: Add Your WooCommerce Products To Set Up Your Store #
First, you must install & activate the WooCommerce plugin and set up your WooCommerce store on WordPress. You can add your preferred WooCommerce products by navigating to WooCommerce →Products →Add New as shown below. From here you can add all the necessary details and publish your products. You can learn more by checking out this detailed documentation for adding and managing products on WooCommerce.
Step 2: Activate The Required, Essential WooCommerce Elements #
Some WooCommerce template packs may also require Essential Addons For Elementor to be installed, as this widgets addon for Elementor comes with several essential WooCommerce elements to help you create your online store. For instance, you can create a WooCommerce Checkout page with Templately if you have Essential Addons for Elementor installed. So it is recommended that you use Essential Addons for Elementor when using any WooCommerce templates from Templately.
To use the WooCommerce elements from Essential Addons, install the plugin and then navigate to Essential Addons→Elements and scroll down until you find the WooCommerce Elements section at the bottom. Toggle the elements in this section to enable them and click on ‘Save Changes’.
How To Insert & Customize WooCommerce Single Product Page #
If you have successfully followed all the steps above, you are now ready to insert and use any ready WooCommerce template packs from Templately and create your single product page. The required step-by-step instructions for doing this are given below.
Step 1: Insert WooCommerce Elementor Templates From Templately #
From your WordPress dashboard, navigate to ‘Pages’ → ‘Add New’. Next, add a title for your single product page and click ‘Edit with Elementor’.
Once the Elementor Editor is done loading, click on the blue ‘Templately’ icon and choose any of the WooCommerce Elementor template packs from the popup window of Templately. Check the ready page templates and choose your ‘Single Product Page’ or ‘Product Details Page’ from that WooCommerce template pack.
For this tutorial, we will be using the ‘Fluid Fashion Product Details Page‘. Simply click on the ‘Insert’ button to load the page template on your website.
Step 2: Customize Your WooCommerce Single Product Page #
After inserting your page template, you can customize it any way you want according to your needs. You customize each section of the template design, change the colors and backgrounds, typography and much more by playing around with the settings under the ‘Content’ and ‘Style’ tabs as shown below.
Step 3: Publish Your WooCommerce Single Product Page #
When you are done with the customization, you can then save the template design to MyCloud by right-clicking anywhere on your page and choosing the ‘Save Page To Templately’ option. This way you can save your page designs as a backup or share them with your team members using Templately WorkSpace. Afterward, click on ‘Publish’ to view all the changes you have made.
By following these basic steps, you can use Templately to create your own WooCommerce Single Product Page in Elementor without coding.
Getting Stuck? Feel free to contact our support team for further assistance.