Shopping trends are changing at a rapid pace and people tend to buy online more than ever.
That’s why they need for an eCommerce store is increasing to satisfy the online shopping habits because people find it more convenient to buy online rather than going out for shopping.
You can also start your ecommerce store right away, using the right tools and setup. And you’ll notice a drastic increase in your sales within a record period of time.
If you have planned to start an ecommerce store and looking for a WordPress expert to do the job for you, let me tell you, you don’t need any.
Yes! You can do it yourself because you don’t need to be a WordPress developer or coding expert and you can do it without having any knowledge of coding with the right tools and setup.
Just follow the step by step tutorial of creating a WooCommerce shop page using Elementor page builder.
Let’s dig out deeper to get to the point!
- What you’ll need in creating a product page using Elementor?
- How to install the Elementor page builder?
- Create an Elementor WooCommerce product page step by step
- Mobile optimize your WooCommerce product page
- Elementor Pro Pricing
- Wrapping up
What you’ll need in creating a product page using Elementor?
Install the WooCommerce plugin on your WordPress site from the WordPress.org repository and on top of that you’ll need to install the Elementor page builder. The Free version can be downloaded from the WordPress.org however the free version comes with a limited customization options. Therefore, if you like to get limitless customizaiation options than go for the pro Elementor and download it from the official Elementor.org.
How to install the Elementor page builder?
- For Elementor free version:
Go to Plugins > Add new > enter Elementor page builder > click install and activate.
- For Elementor Pro:
Purchase the Pro version from the Elementor.com and then upload the zip file and then click on install and activate.
Create an Elementor WooCommerce product page step by step
The standard WooCommerce product page looks like any basic WooCommerce product page without any crisp.
However, if you like to add your brand’s voice than you have to customize it uniquely.
Step1: Go to the Template section from your Dashboard menu and click on “Add new”.
Now from the dropdown menu select the item “Single Product”
The best part is, the Elementor comes with some pre-made product page templates, so, if you like to quick start, select anyone from the options that looks closest to your desired one.
It’s lot more easier to create a product page from the pre-made template rather than creating from scratch. Therefore, modify any existing template and save your time and effort.
We have selected this template for our product page.
Once you have selected your favorite template, it’ll lead you to the Elementor editor where you can customize the template as per your taste.
Here you can see different blocks on the leftside menu. Drag and drop the block you like to work with.
Click on the “+” Add button and select which column size you like to add.
We have selected two column size for our product template.
Now, add a product title widget on the right column and add the title of your product on it.
Once you have added the product title, next step is to add the “Woo breadcrumbs” above it.
Now, add the product image in the left column and drag’n drop the product image widget from the left column.
You can add the padding to both columns to keep them slightly apart from each other.
After adding the image and adjusting the padding according to the required dimensions add the product rating widget under the product title.
Add a brief description of product widget underneath the product review block. you can also adjust the space between the two blocks.