WordPress makes our life easier with its amazing features for building your website, especially WooCommerce webshops. There’s nothing easier than designing your WooCommerce pages with Elementor as you won’t have to deal with codes at all.
But you may still wonder, why Elementor? Well, that’s because it’s the perfect tool to design online shopping websites in WooCommerce that even a non-technical person could do. Elementor makes it possible by taking you through an overwhelming site-building experience.
So, are you ready to design WooCommerce pages with Elementor? Let us guide you with precise steps about how easily you can get dynamic WooCommerce pages using Elementor page builder.
Let’s get started!
Is Elementor Compatible With WooCommerce? Why Go With It?
For a successful WooCommerce website, the web design is very important. It requires quite an attractive site interface and neatly packed features to grab the attention from your customers into your business.
WordPress is already an awesome platform where you can easily design websites. But Elementor makes it even easier to build magnificent websites within minutes. The plugin is very powerful and comes equipped with widgets that helps adding features and functionalities to your website.
But, is Elementor compatible with WordPress? Yes, it is. In fact, Elementor is highly compatible with WordPress and everything inside it. Designing WooCommerce pages with Elementor is easy, flexible, and a piece of cake even for a beginner.
Just because anybody regardless of coding knowledge can design websites with Elementor, it makes the best tool in the shed for you to use. There’s no surprise that more than 5 million people use Elementor to make their own websites today.
So, ready for the main show? Let me guide you the proper way of building and customizing your WooCommerce pages with Elementor below.
Create WooCommerce Pages With Elementor
As we were saying, making your WooCommerce pages with Elementor is not a difficult task. Everything is made easy with WordPress and so is the whole procedure of this task. So, here’s how we did it-
First, you need to make preparations such as installing the required plugins for WordPress-
- Your WordPress website
- Elementor Page Builder (free & Pro)
- WooCommerce (free)
- Element Pack Lite (free)
After you are done with the initial setup like purchasing domain & hosting, configuring WordPress on your website, installing the plugins Elementor, WooCommerce, Element Pack Lite, etc. This may take a while to configure everything necessary to run your website.
Especially, setting up WooCommerce requires a couple of minutes and you need to fill in all kinds of information including payments info, shipping, personal contacts, etc.
Once you have gotten back to the dashboard, the configuration is done and you are ready for making WooCommerce pages with Elementor.
Note that Elementor and WooCommerce both have a good number of widgets to add the WooCommerce functionalities to your website. But still, these are not enough to fully immerse into the proper functions of WooCommerce or the web design.
That’s why we need a helping hand plugin like Element Pack Lite to enrich the website both by design and features. Now, let’s move forward with the design phase.
Customize WooCommerce Pages With Elementor Easily
As Elementor page builder allows you to import ready templates, it’s very easy to work with templates then simply call it inside the pages and start customizing them. Also, Elementor already has more than 10 simple widgets for WooCommerce for creating a base of your shop page.
But once you grab all the necessary plugins, including Element Pack Pro, you will get more than enough widgets for covering the whole ground of your WooCommerce website. So, there’s no room for feeling suppressed while designing your web pages.
But before that, make sure the plugins are up to date unless they won’t function the way they should be.
Step-1: Let's create a WooCommerce page Template
For starters, go to the template-making section from your WordPress website. Just go Dashboard> Templaes> Add new
Tapping on the “Add New” button will display a popup window where you need to make the template. There are several options available here and you have to pick the one that reads as “Single Product”. As we are going to create a WooCommerce page for products, this is the setting we are going for.
Plus, make sure you have Elementor Pro installed. Otherwise, these options won’t be visible.
Just add a template name next to easily identify the template for future usage.
Then hit the “Create Template” button and start putting elements into the page for creating your next WooCommerce pages with Elementor.
Step-2: Inserting Page Templates
Now that you are ready to create your WooCommerce page template, there are two ways you can do it, either do it from the scratch or take a ready template and customize it.
There’s not much difference between the two options, just the required time to complete the template. For ease of use, let’s add a ready template first.
Just click on the Element Pack Template Library icon to open the library inside the page editor.
All you have to do is navigate the template library and pick the suitable page design that goes with your shop theme. Once you find one, just hover over the template and click on the “Insert” button.
Note that you can also use WooCommerce page templates from Elementor Pro. Once you customize a template, it’s going to be a unique design that won’t be similar to the template itself.
Step-3: Add & Customize Features
It is very important to know about the features your customers would be enjoying before you start pouring widgets into the template page. You can always go for new content or customize the current layout for further improvements.
There are a bunch of widgets provided by Elementor that will add more spice to your WooCommerce website. With these widgets, you can easily design your WooCommerce page part by part and make a complete website.
Let’s see the available widgets first-
- Product Title
- Add To Cart
- Product Price
- Product Quantity
- Related products
- Stock and Stock Out Products
Here’s a custom WooCommerce product page using the elements from the list above.
It’s a good tactic to keep the product page design minimum in order to get your visitors to focus on the products more. Anyway, you can now distinguish between the features and know how to design your page.
Step-4: Cart Button For WooCommerce Pages
Having enough active CTA button on your WooCommerce website is a good way to engage your visitors and hon for potential customers. CTA not only attracts customers but also makes your site look appealing to the visitors.
It’s very easy to add CTA or “Add-to-cart” buttons on your WooCommerce pages with Elementor. However, there are two types of “Add-to-cart” buttons available in Elementor, a static one, and a dynamic one.
Using the static one is the fastest way to add CTA to your pages but it lacks the controls for styles. We recommend using a dynamic CTA button using Element Pack’s widget for WooCommerce, the “WC- Add To Cart.”
Here, you can customize the cart button to make it appear nicely in contrast to your products. You can always go for customizing the color, background, border, padding, alignment, label, icon, size, etc. for the button.
All you have to do is match the button height according to users’ eye level. Keep in mind that the button position is very important as it impacts the users’ decision towards buying the product.
Step-5: Configure WooCommerce Product Archive Pages With Elementor
Till now, you have completed single product pages on WooCommerce. Now, you need to build a product archive page to demonstrate your products in bulk and help your visitors navigate easily.
Let’s make one for ourselves right now. Just like before, go to your WordPress dashboard and get into the Templates menu and click on “ADD NEW.”
This time, scroll down and select the Products Archive option for the template with a name to identify it later.
Now finish it up hitting the Create Template button. Wait for the Elementor editor page to show up.
When you see the blank page, you can start working with another ready template for the archive page or make your own from the scratch. Elementor has a quite large number of widgets to form the bits and pieces of the archive page.
But, you can skip the brain-storming process and go with the widgets from Element Pack Pro plugin. It has some WooCommerce features that combine multiple parts of the interface to form a complete image.
Take a look at the list below-
- Portfolio Carousel
- Device Slider
- Custom Carousel
- WooCommerce Slider
- WooCommerce Products
- WooCommerce Carousel
- WooCommerce Categories
Utilizing these widgets, you can develop stunning WooCommerce pages with Elementor for the product archive.
This is just a tiny example. There are more things you can do and only the sky is the limit.
Step-6: Customize Page Design With Element Pack Pro
Until now, you have been building WooCommerce pages with Elementor except, you did not make any significant changes to the design. Elementor is a great tool itself for customizing the interface, it still lacks sophisticated design controls.
But don’t fret over it, you got Element Pack Pro to finish the unfinished job for you. This tool is very famous for the customization controls for each and every feature it has (more than 200 features). So, you can have animated heading, animated gallery, product carousel, grid, slider, section blur, wrapper link, and more amazing features within one place.
For example, let us show how our WooCommerce Carousel can be customized to fit your taste.
Step-7: Publishing WooCommerce Pages With Elementor
Now that everything is ready, we made the single product page, the archive page, and finished preparing the page designs, it’s time to put the pages into the live website.
After saving the templates, you can just go to the dashboard, into the page where you want to put the products or archive, and call the templates there. Simple and easy. You don’t even have to duplicate the page as you can use saved templates anytime you want.
This is how you work with templates to build stunning WooCommerce pages with Elementor.
Relax While Designing Complex WooCommerce Pages in Minutes
Designing WooCommerce pages with Elementor is less hassle and more fun when you know exactly what you are doing. As beginner-friendly software, Elementor makes it possible for you to quickly master the basics without any third hand required.
Use the comment section for any questions related to this article or you can use the LiveChat option to directly speak with us. Thanks for staying up.