In the previous tutorial we learned how to create the WooCommerce store front page with Elementor Pro.
In this tutorial we will see how we can do it with the product file of our store made with WooCommerce.
Just like we did for the store page we'll start by creating a template.
To do this we go to Elementor —> My Templates —> Single Product —> Add new single product:
Now we have two options:
- Choose a predefined template
- Create our product sheet from scratch
Choose a predefined template
As simple as choosing a template among those that appear:
Once chosen, we will enter the visual editor of Elementor with the chosen predefined design:
If we click on publish our design we have the possibility of adding the condition so that the template we are creating is the one used in the products:
And voila, now if we open any product it will have the new design that we have generated with the template:
Create our product sheet from scratch
Just as we can use a predefined template to make our product sheet, we can make it completely from scratch.
To do this we go to Elementor —> My templates —> Single Product —> Add new single product and now instead of choosing a template we close the templates page and we will get to the visual constructor but this time it will be empty.
If we look at the previous image we will see on the left all the fields that we can add to our product sheet.
Before adding fields, what we are going to do is create the structure of our product sheet, that is, how many columns do we want, in this case I am going to add 2 columns to put the featured image of the product on one side and the text fields on the other.
Once we have selected the columns we want, we can then change their width simply by dragging the corners and adjusting the size to the desired one.
Now we just have to start dragging the desired fields from the left to the place we want to place them:
The product fields that we can add to our file are:
- WooCommerce Breadcrumbs: They are the breadcrumbs to have the navigable route of the product
- Product Title: The product title
- Product Images: The featured image and photo gallery of our product
- Product Price: Product price
- Add To Cart: Button to add to the shopping cart
- Product Rating: Customers Product Feedback
- Stock: Number of products in Stock
- Product Target: Data such as the SKU or product category
- Shorts Description: Short product description
- Product Data Tabs: Tabs with product information. Here is the long description and customer feedback
- Additional Information: Additional Information
- ProductRelated: Products related to the product on the sheet
- Upsells: Products selected in the linked products option
In the following video you can see how each of the above options works:
Subscribe to my channel:
I hope you liked the tutorial 🙂