How To Make A Single Product Page With Woocommerce Templates? 10

How To Make A Single Product Page With Woocommerce Templates?

With the help of the ready WooCommerce templates from Templately, you can easily create a stunning Single Product Page in Elementor for your WooCommerce products. Follow the detailed steps given below to create a Single Product Page with WooCommerce templates in Elementor from Templately.

Note: For this, you just have to set up your shop page by using WooCommerce first. 

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. The steps below can be used to create a single product page for your WordPress WooCommerce website.

Note: To create a single product page with a WooCommerce template you have to use the  Elementor Theme Builder feature. As it’s a PRO feature of Elementor; therefore, before starting this tutorial, make sure you have installed Elementor Pro on your website. 

Step 1: Add Your WooCommerce Products To Set Up Your Store

First, you must install & activate the WooCommerce plugin, and set up your online store on WordPress. You can add your preferred WooCommerce products by navigating to WooCommerce → Products → Add New as shown below. 

How To Make A Single Product Page With Woocommerce Templates? 1

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 you to install and activate the plugin Essential Addons For Elementor, as this Elementor widgets library comes with several essential and important WooCommerce elements to help you create your online store. 

For instance, you can effortlessly create a WooCommerce Checkout page with Templately if you have Essential Addons for Elementor installed. So it is recommended that you install Essential Addons for Elementor when using any WooCommerce templates from Templately.

Afterward, to use the WooCommerce elements from Essential Addons, install the plugin and navigate to Essential Addons → Elements. Then, scroll down until you find the WooCommerce Elements section on the ‘Elements‘ page. Toggle the elements in this section to enable the necessary widgets and click on ‘Save Changes’.

How To Make A Single Product Page With Woocommerce Templates? 2

Step 3: Create A Single Product Page From Elementor Theme Builder

Afterward, open the Elementor’s ‘Theme Builder’ from your WordPress dashboard. Here, you will get the options for creating a single product page for WooCommerce on your site. 

How To Make A Single Product Page With Woocommerce Templates? 3

Then, click on the ‘Add New’ option and select the ‘Single Product’ option. You will be redirected to the Elementor page editing panel as you can see below. 

How To Make A Single Product Page With Woocommerce Templates? 4

Then, close the library window and click on the blue ‘Templately’ icon. Afterward, choose any of the WooCommerce template packs for Elementor 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.

How To Make A Single Product Page With Woocommerce Templates? 5

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.

WooCommerce Single Product Page

Step 5: Customize Your Single Product Page For WooCommerce

After inserting your single product 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.

How To Make A Single Product Page With Woocommerce Templates? 7

Step 6: 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 the ‘Publish’ button and set the condition for the products. 

How To Make A Single Product Page With Woocommerce Templates? 8

Now, click on the ‘ADD CONDITION’ button and set the conditions for where you want to display your template. After that select the condition and hit the ‘SAVE & CLOSE’ button.

How To Make A Single Product Page With Woocommerce Templates? 9

That’s it. Now, you can see your WooCommerce templates added to each of your single product pages. This is how your single product page for WooCommerce will look on your site. 

How To Make A Single Product Page With Woocommerce Templates? 10

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.

Woo Checkout

How To Create A Woo Checkout Page And Cart Page In Elementor With Templately

Using ready Elementor templates from Templately, you can create a Woo Checkout Page and Cart Page instantly in Elementor. To do this, you need to first set any page on your website as your Checkout page and Cart page. Follow these steps below to create a WooCommerce Checkout Page and WooCommerce Cart Page in Elementor with Templately.

How To Set Up Your Woo Checkout Page And Cart Page

At first, you need to install and activate the WooCommerce plugin and Essential Addons For Elementor. This is because the Checkout page templates in Templately are made with the Woo Checkout element from Essential Addons. This is the most popular addons for Elementor with over 1 million happy users.

After installing these two plugins, you need to set up your store and your products for your WooCommerce by following the on-screen instructions. Then, navigate to Essential Addons→ Elements and scroll down until you find the Woo Checkout element. Toggle this element to enable it and click on ‘Save Changes’.

Woo Checkout

Next, create two new pages by heading over to Pages→ Add New from your WordPress dashboard. These will be your new Woo Checkout page and Cart page. Give these pages a name and then navigate to WooCommerce →Settings. 

Head over to the ‘Advanced’ tab. From here, you have to assign the page you created earlier as your Woo Checkout page. Click on the Checkout page option and choose a page from the drop-down menu as your Woo Checkout page. Do the same for your Woo Cart page. Make sure to save your changes.

Woo Checkout

Your Woo Checkout page and Cart page have now been set up. Now you can insert and use any ready page template from Templately.

How To Insert And Customize Woo Checkout Page And Cart Page

Navigate to your ‘Pages’ from your WordPress dashboard. Choose the Woo Checkout page that you have assigned in the previous step and click on ‘Edit with Elementor’. Once the Elementor Editor is done loading, you can insert ready Elementor templates from Templately and customize them by following the steps below.

Step 1: Insert Elementor Templates From Templately

Click on the blue ‘Templately’ icon and choose any Elementor template pack for WooCommerce. Check the ready page templates and choose your ‘Checkout Page’ from that template pack. For this tutorial, we will be using the ‘Upsole Checkout PageSimply click on the ‘Insert’ button to load the page template on your website.

Woo Checkout

When your page template is done loading, this is how your Woo Checkout Page will appear on your website by default. Repeat these same steps for your Woo Cart page as well.

Woo Checkout

Step 2: Customize Your Woo Checkout Page

You can now customize your Woo Checkout page any way you want in Elementor Editor. From the ‘Content’ tab you can choose different layouts for your Checkout page. Currently, you can choose between the ‘Default’, ‘Multi-Step’, and ‘Split’ layout styles for your Checkout page. From the ‘Style’ tab, you can change the colors, typography, font styles, and much more. To find out more about different styling and customizing options, read this documentation.

How To Create A Woo Checkout Page And Cart Page In Elementor With Templately

Step 3: Publish Your Checkout Page And Cart Page

When you are done customizing your Checkout page and Cart page, you can 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 make your Checkout page and Cart page live.

Woo Checkout

 

By following these basic steps, you can use Templately to create your own Checkout page and Cart page in Elementor without coding.

If you face any difficulties, feel free to contact our support team for further assistance.

What Happens If My Templately Subscription Ends?

If your Templately subscription ends, the following will happen if you do not renew your subscription plan: 

  • You will be immediately downgraded to the Starter package.
  • Previously created WorkSpaces will remain accessible, but you won’t be able to create any new additional WorkSpaces.
  • You will be able to only store up to 100 items in MyCloud. If you already had more than 100 items saved to MyCloud before your subscription ended, then after your Templately subscription ends you will only have access to the first 100 items.
  • You will not be able to insert any new Pro website templates from Templately.   

Don’t worry, you can get back all these features again if you renew your subscription package. 

Feel free to reach out to our dedicated support team in the event of any difficulties, and also if you wish to get constant updates about Templately, you can join our Facebook community.

Downgrade Current Subscription Plan

How To Downgrade Current Subscription Plan For Templately & What Happens When I Do So?

With Templately, now you can easily downgrade your current subscription plan to a smaller plan within a few clicks. If you are using the Premium plan, then you can downgrade to the Starter plan easily. Follow the instructions given below to downgrade your subscription plan.

How To Downgrade Subscription Plan From Premium To Starter?

Here is a step-by-step guideline to downgrade the current subscription plan from Premium to Starter on Templately. 

Note: The same steps will apply when you want to downgrade from a premium subscription plan to another, smaller subscription plan.

Step 1: Navigate To The ‘Subscription’ Tab In Templately

Sign in to your Templately account. Click on your profile and select ‘Subscription’ from the list of options in the drop-down menu.

Downgrade Current Subscription Plan

Step 2: Click On The ‘Downgrade’ Button

You will be taken to the ‘Subscription’ page where you can see all the subscription plans available for Templately. You can also check which plan is currently active as shown below. To downgrade the subscription plan for your Templately account, simply click on the ‘Downgrade’ button.

Downgrade Current Subscription Plan

A popup will appear asking for your confirmation.  Click on the ‘Downgrade’ button, and your Templately plan will be successfully downgraded from Premium to Starter. 

Downgrade Current Subscription Plan

By following these simple steps, you can downgrade your current subscription plan in Templately.

What Will Happen If You Downgrade Your Current Plan?

If you downgrade your current subscription plan for Templately to any other premium plan or Starter package, you can still continue using Templately, but certain features may be limited. Here are some changes that will occur when you downgrade from the Premium plan to the Starter plan.

  • All of your previously created WorkSpaces will be available on all plans. However, if you downgrade to the Starter plan, you will not be able to create new WorkSpaces.
  • Each plan offers a specific number of active website access. Once you downgrade, you will have limited access to active websites. However, the Lifetime plan gives you access to unlimited websites.
  • All premium plans offer an unlimited item-saving feature  in MyCloud storage. But if you downgrade to the Starter Pack, you can save up to 100 items. However, if you have already saved more than 100 items while using a premium plan but want to downgrade to the Starter plan, your designs will still be accessible on MyCloud.
  • You will not be able to access upcoming, new Pro templates from Templately.

If you want to keep your exclusive Premium plan features, you can upgrade anytime from your Templately account. To learn more on how to easily upgrade your Templately subscription, check out this documentation.

Feel free to reach out to our dedicated support team in the event of any difficulties, and also if you wish to get constant updates about Templately, you can join our Facebook community.

header and footer block

How To Use Templately Header And Footer Blocks In Elementor Theme Builder

Using the ready-made Templately header and footer blocks, you can instantly create stunning headers or footers for your website in Elementor Theme Builder. Once you have inserted a header and footer block and customized it in Elementor, you can use it on every page of your WordPress website if you want to. 

Note: Elementor Theme Builder is a feature that is only available with Elementor Pro. Therefore you must install both Elementor and Elementor Pro on your website to create your header and footer blocks with Templately.

How To Create A Header In Elementor

You can create a header for your webpage in Elementor using the ready header blocks from Templately. But first, you will have to set up a menu in WordPress. You can do this by navigating to Appearance→ Themes→ Menus from your WordPress dashboard as shown below.

Header And Footer Block

After completing this step, save your changes and follow these step-by-step instructions below.

Step 1: Create A Template In Elementor Theme Builder

From your WordPress dashboard, navigate to Elementor→ Templates→ Theme Builder. This will take you to the Elementor Theme Builder. Click on ‘Header’ to add a new header block in Elementor.

Header and Footer block

Step 2: Insert Header Blocks From Templately

Next, click on the blue ‘Templately’ icon in Elementor Editor. A popup window will appear displaying all the ready header and footer blocks from Templately. Pick any of the header blocks that you like and click on the ‘Insert’ button.

Header and Footer block

For this documentation, we will be using the Blossom Header block from Templately. By default, the block will appear on your website as shown below.

Header and Footer block

Step 3: Customize & Publish Your Header 

You can customize your header in Elementor Theme Builder any way you want. Click anywhere on your header. Then, from the ‘Content’ tab, add your own content for your header. Similarly, from the ‘Style’ tab, you can change the colors, typography, and more.

Header and Footer block

When you are done customizing, you can publish your header block by clicking on the ‘Publish’ button. A popup will appear asking you to set conditions and choose where you want your header to be displayed. This step is completely optional. If you are ready to make your header live, click on the ‘Save & Close’ button.

header and footer block

You have successfully created your own header in Elementor Theme Builder using the ready header blocks from Templately. This is how your header will appear on your webpages. 

header and footer block

How To Create A Footer In Elementor

To instantly create a footer in Elementor using ready Templately footer blocks, follow these step-by-step instructions below.

Step 1: Create A Template In Elementor Theme Builder

Navigate to Elementor→ Templates→ Theme Builder from your WordPress dashboard. This will take you to the Elementor Theme Builder. Click on ‘Footer’ to add a new footer block in Elementor.

header and footer block

Step 2: Insert Footer Blocks From Templately

Click on the blue ‘Templately’ icon in Elementor Editor to insert any footer block. A popup window will appear displaying all the ready header and footer blocks available in Templately library. Choose any of the footer blocks that you like and click on the ‘Insert’ button.

Header and footer block

For this documentation, we will be using the Blossom Footer block from Templately. By default, the block will appear on your website as shown below.

Header and footer block

Step 3: Customize & Publish Your Footer

Using the Elementor panel on your left, you can customize your footer block in Elementor Theme Builder. From the ‘Content’ tab, you can add your own content for your footer. Similarly, from the ‘Style’ tab, you can change the colors, typography, and more.

header and footer block

When you are done customizing, click on the ‘Publish’ button. A popup will appear asking you to set conditions and choose where you want your footer to be displayed. This step is completely optional. If you are ready to make your footer live, click on the ‘Save & Close’ button.

header and footer block

Your footer will now appear on your website as shown below. 

header and footer block

By following these basic steps, you can use Templately to create your own header and footer blocks in Elementor Theme builder without coding. You can also check our guide on inserting ready Elementor packs from Templately, or find out how to save your design to MyCloud

If you face any difficulties, feel free to contact our support team for further assistance.

Templately Workspace

How To Configure Templately WorkSpace

Introducing Templately WorkSpace – Cloud space to share with your team members & collaborate seamlessly to improve productivity. In this shared WorkSpace, you can save any template you like and reuse them on any WordPress website. The templates you save on your Templately WorkSpace will be accessible to all of your team members, making it easier to collaborate with your team from anywhere at any time.

To get started with Templately WorkSpace, check out our guidelines below:

How to Set Up Templately WorkSpace

The first thing you need to do is set up your Templately WorkSpace for you and your team. You can do this in three easy steps. 

Step 1: Sign In to Your Templately Account

First, navigate to your WordPress Dashboard and click on ‘Templately’. From here, you can sign in to your account.

Configure Templately WorkSpace

 

Step 2: Create A WorkSpace

After you have signed into your account, it is time to create your WorkSpace. Navigate to MyCloud >> My WorkSpace and click on ‘Add New WorkSpace’.

Note: With the premium version of Templately, you can have an unlimited number of WorkSpace and also get access to unlimited Pro templates for Elementor, and MyCloud items. You can check out our flexible pricing plans here.

Templately WorkSpace

 

Step 3: Invite Members

You should now see a pop-up window like the one shown below. Give a name for your WorkSpace and add your team members’ email addresses to invite them to join. Click on ‘Create WorkSpace’ to create a new WorkSpace for your team.

My WorkSpace

 

After successfully completing this step, you should be able to see your new shared Templately WorkSpace. For this example, our Templately WorkSpace is named ‘Template Designs’.

My WorkSpace

 

How To Share Saved Templates On WorkSpace

Now that you have successfully created your Templately WorkSpace, you and your team members can easily collaborate on your work by uploading your designs or saving your favorite templates to MyCloud, and then sharing them on your WorkSpace. All templates shared on a WorkSpace will be accessible to all team members. 

Step 1: Save Your Template To MyCloud

First, you have to save your template to MyCloud. All you have to do is right-click on the page you have designed and choose ‘Save Page to Templately’. For more details, check out our guide on saving templates/designs to MyCloud

My WorkSpace

You should be able to see this template when you head over to MyCloud now.

My WorkSpace

Step 2: Add Saved Template To WorkSpace

You can now add your saved Template to your Templately WorkSpace and share it with your team members. There are two ways you can do this. The first method is to add the saved template from within your WorkSpace.

Click on ‘My WorkSpace’ and enter the Templately WorkSpace you’ve created. Here, click on the ‘+’ icon to add your saved template to your WorkSpace.

My WorkSpace

 

You should see a pop-up menu like the one shown below. Choose the template you want to share with your WorkSpace from the drop-down menu.

My WorkSpace

Alternatively, you can also add any saved template to your WorkSpace directly from MyCloud. Simply click on the three dots on the saved template in MyCloud. Click on either ‘Copy to WorkSpace’ or ‘Move to WorkSpace’ from the list of options.

My WorkSpace

 

Whichever method you choose, your end result should always show your saved template in your shared Templately WorkSpace.

My WorkSpace

 

This is how you can quickly and easily set up a Templately WorkSpace where you can collaborate with your team members, share your designs with each other, and reuse them on any site from anywhere.

If you face any issues, feel free to contact our support team for further assistance.

How To Insert & Use Packs From Templately?

To design a complete website, you can insert & use Packs from Templately in two ways.

Method 1: 

In the first method, you have to go to the Templately plugin from the WordPress dashboard to use packs. After that, it will provide you with the view that is present on the screen below.

Templately

There you can choose any packs from the available categories. Then you just have to give a click on your preferred one to insert it on your site. 

Templately

Note: You have to insert pages and blocks individually for each pack that you want and edit the content to make it publish. 

Method 2:

Check out the guideline below to learn how to insert & use Blocks from Templately on your Elementor site.

Step 1: You can get an entire Packs for your Elementor site. For this, you have to go to your site page and click on the Templately Icon.

Templately

Step 2: It will take you to this view. Click on the Packs and you will get to see a lot of ready-made packs there. 

Templately

Step 3: Select your preferred Packs and it will take you to this view.

Templately

Note: You have to insert pages and blocks individually for each pack that you want to get and edit the content to make it publish. 

You can check out the following docs How To Install & Use Pages and How To Install & Use Blocks from Templately to know in detail. 

If you need any help, feel free to contact us on our support.

How To Insert & Use Blocks From Templately?

You can insert & use Blocks from Templately on your website in two ways. Check out the details guidelines below.

Method 1: In the first method, you have to go to the Templately plugin from the WordPress dashboard. After that, it will provide you with the view that is present on the screen below. There you can choose any blocks from the available categories.

Blocks From Templately

Then you just have to give a click on your preferred one to insert it on your website.

Blocks From Templately

Afterward, It will provide you a window that comes with Create a Page field and Import to Library option. You can give it a name from Create a Page section and save it. Otherwise, you can import it directly to your library

Blocks From Templately

There you can Preview the page to see how it looks and go to the Edit Template or Edit with Elementor option.  

Blocks From Templately

Method 2: Check out the guideline below to learn how to insert & use Blocks from Templately on your Elementor site.

Step 1: You can use separate Blocks for your Elementor site. For this, you have to go to your desired page and click on the Templately Icon.

Templately

Step 2: It will take you to this view. Click on the Blocks icon and you will get to see a lot of ready-made blocks there. 

Blocks From Templately

Step 3: Choose your preferred one and insert it.

Blocks From Templately

Step 4: After inserting your page, it will look like this. You can edit the entire page content as per your wish and make it publish.

use blocks

If you need any help, feel free to contact us on our support.

How To Create A New Token In Templately?

How To Create A New Token in Templately?

Check out the guideline below to learn how to create a new token in Templately.

Step 1: Go to Templately from your WordPress dashboard. Navigate to ‘Profile’ → ‘Manage Account’ and sign in to your account.

Create A New Token in Templately

Step 2: Now, you will be redirected to the Templately website. Click on the ‘Manage APIs’ option from the screen.

 Create A New Token in Templately

Step 3: Enter your ‘Token Name’ and agree to the Terms & Conditions. Then hit on the Create Token and it will generate a new token for you.

Create A New Token in Templately

Step 4:  If you have followed all the steps carefully, congratulations! You have successfully created a token in Templately.

Create A New Token in Templately

This is how simply, you can create a new token for your website and manage it anytime.

If you need any help, feel free to contact us on our support.