Elementor Page Builder comes with dozens of free & Pro templates for WordPress. Landing pages, homepages & other templates available for free download. With Elementor WooCommerce Builder, you can now design your single product and archive page templates visually and without coding skills. Build a Single Product Page Template with Elementor. Hey, Read my Requirements in Detail. Please check the Images attached as well as the URL. login to view URL I need a Product Page similiar to this with Toggling Description, Delivery & Return Tabs. User Must be able to click the Tab and view the Details. Free Download Spatoo – Modern Shoes eCommerce Elementor Template Kit (Nulled) Latest Version Spatoo – Modern Shoes Commerce Elementor Template Kit is a collection of layouts for the Elementor page builder WordPress plugin, designed for use with Elementor Pro Version for a clean Design. It works with most themes and is optimized for use with. Boom – Single Product Shopify Theme. One product landing page theme with single product shop, single product review to showcase one product store, single store, single marketing page to sell single electronic product, device, single app, single book, single course, single music, single magazine, single sports, accessory & multipurpose store.
Do you want to create a WooCommerce website with the Elementor page builder? Want to learn what all you can do with WooCommerce and Elementor with the Elementor WooCommerce builder? Want to customize WooCommerce pages such as Single product pages, Archive pages / Product category pages, Cart page, Checkout page, and other shop pages with Elementor?
You have come to the right place. In this article, we will discuss in detail everything you can do with WooCommerce and Elementor to create a unique and elegant WooCommerce website of your dreams.
Elementor WooCommerce Theme
Before we move on to working with Elementor page builder you first need to find an Elementor WooCommerce theme that best suits the kind of WooCommerce store you want to create.
We suggest you go with the free Astra Theme, which is one of the best Elementor WooCommerce themes.
It has ready-made demo sites that you can easily import and customize. See this tutorial to install Astra theme and import demo sites in less than 5 minutes.
Astra Theme + Elementor Pro + WooCommerce = Dream eCommerce Store
If you want more options, you can choose from the list of best Elementor WooCommerce themes, these themes work best with Elementor page builder.
There are other best WooCommerce Elementor themes that are themes specially made for WooCommerce stores than work well with Elementor. Many of them are free themes.
Installing and Setting up the WooCommerce plugin
Before you can customize your website with Elementor you need to install and setup the WooCommerce plugin on your WordPress site.
Note: if you already have a WooCommerce store with products you can skip this part and move to the next part.
In your WordPress dashboard, go to Plugins → Add New and search ‘WooCommerce’. Install and activate the WooCommerce plugin.
You will be taken to WooCommerce Setup Wizard.
See how to use the Setup Wizard here.
Here you only need to fill the basic details and can skip the unnecessary parts. You can edit and change things later. Especially, you can skip the Choose a Theme page, if you have already installed the Elementor WooCommerce theme of your choice.
You can also choose to use the free Storefront theme in this option. The Storefront WooCommerce theme does work with Elementor but it has limited features and it is not recommended.
After configuration, now add products to your store. In the dashboard go to Products → Add New, add your products and fill all the details. For more details on creating WooCommerce products see here.
After creating all your products we can move on customizing with Elementor WooCommerce builder.
How to User Elementor WooCommerce Builder to Create a Dream eCommerce Store:
There are 3 ways in which you can use the Elementor for WooCommerce:
- Create and set Elementor templates for Single Product page
- Create a WooCommerce Shop page and Product Archive pages
- Create a custom cart page and checkout page
How to use the Elementor WooCommerce widgets for your store?
Elementor WooCommerce builder is a feature that comes in the Elementor Pro version that gives you 14+ Elementor WooCommerce product widgets. If you want to use the WooCommerce builder you have to get the Elementor Pro Page Builder.
- Product Title widget – Customize the style and layout of the Product Title
- Breadcrumbs widget – Helps customers to navigate your store by showing WooCommerce Breadcrumbs. You can edit colors and layout for the breadcrumbs
- Product Image widget – Set Image or image gallery the product
- Product Rating widget – Set the style and position of the Product Rating where it is to be displayed in the Single Product template
- Product Price widget – Choose the position and style of the Product Price
- Custom Add to Cart widget – With this widget, you can add an Add To Cart button anywhere on your site and help visitors to make the purchase
- Product Data Tabs widget – With this widget, you can add Data Tabs with product specifications such as dimensions, description, color, etc. You can change the Data Tabs style
- Product Stock widget – You can add a Product Stock Widget to display the product’s stock number
- Additional Information widget – This widget shows the Additional Information of your product
- Product Content widget – Set your own style to the Product Content
- Product-Related widget – Set your own style to the Related Products
- Upsells widget – Set your own style to the Upsell Products
- Short Description widget – Customize the layout and style of Short Description
- Product Meta widget – Control the style and position of your Product Metadata
1. How to create an Elementor Single Product Template
First, we need to allow Elementor for the WooCommerce products. To do this go to Elementor –> Settings –> General
Here, tick the checkbox near Products in the Post Types, as you see in the image below.
For creating Elementor templates for WooCommerce you have to use the Theme builder features. To do this,
- In your WordPress dashboard, under Elementor, go to Templates → Theme Builder → Single Product → Add New
- You will see a dropdown from this choose Single Product, give it a name, and then click Create Template
- You would see an empty page like the one above, here you can click the file icon and you will ready-made Elementor templates known as Single Product Blocks
- You can choose any block from this and click Insert and the ready-made block will be inserted into your single product template
- Then you can make the changes to this and customize your template
- Alternatively, you can design your own single product template from the scratch by dragging and dropping all the required Elementor WooCommerce product widgets such as Product Title, Product image, Product price, etc.,
- After you finish designing, click the Publish button
Choosing the Display Conditions to Apply the Single Product Template
Now that we have created the single product template, we have to decide where this template will be applied. You can choose to apply this template for all single product pages in your shop, or for a specific product or product category. To apply the Display Conditions,
- Near the ‘Publish’ button you can find an upwards arrow, if you click it you can find the ‘Display Conditions’ option, click it
- In the Publish Settings page click, ‘Add Condition’ decide where this template will be included
- You can also choose to exclude a certain page from using this template
- Then click ‘Save and Close’ and your template will be applied to all the single product pages in your WooCommerce website.
You can also create and edit individual WooCommerce products by going to the product page in the Dashboard and clicking ‘Edit with Elementor’. If you do this you have to add an ‘Exclude’ condition for the particular product page in the Single Product template display condition.
2. Create a WooCommerce Shop page / Product Archive Template with Elementor
Before we move to create a shop page with Elementor, you need to know the parts of a Shop page that you can customize from the WordPress Theme Customizer.
You can go to the WordPress Customizer from the Dashboard by going to Appearance → Customize
Here you can customize the options such as:
- Enable/Disable store notice,
- Choose how and what products are displayed in the product catalog, and
- Adjust product image ratio
Creating WooCommerce Shop Page with Elementor:
Creating a Shop page / Product archive template is similar to that of Single Product Template but with some minor changes.
Go to Templates → Theme Builder → Single Product → Add New
Here choose Product Archive and give a name for the template.
In this page, you can use the following Elementor WooCommerce widgets listed below to create your shop page design.
- Menu Cart widget – This special custom widget that opens the cart in a window. You can display your cart from any page of your website without leaving it. With the Menu Cart widget, you can place a WooCommerce cart icon in your menu or anywhere on your page.
- Products widget – This widget allows you to display products on any page of your site. You customize the Product content and style that suits your store.
- Product Categories widget – With this widget you can display a grid of WooCommerce Product Categories anywhere on your site
- WooCommercePages – This widget allows you to display any WooCommerce Page such as Single Product Page, Checkout Page, Cart Page, Order Tracking Form, or My Account Page on any page
- WooCommerce Breadcrumbs widget
- Add to Cart widget
You can also use various Elementor widgets such as Archive Title. Archive Products, Archive Description, etc,
When you’re done click ‘Publish’, then go to ‘Display conditions’ and include the Shop page and click ‘Save and Close’.
To create templates for various product categories, then in the Display Conditions choose ‘In Product Categories’. If you want different templates for different product categories you can use the Include/Exclude options to apply the template in specific product category pages.
3. Creating WooCommerce Checkout page with Elementor
When you’re creating a WooCommerce checkout page with Elementor, you can’t actually add or edit the checkout fields. If you want to edit the checkout fields then you need to use a WooCommerce checkout field editor plugin.
To create a new checkout page with Elementor you need to apply the [woocommerce_checkout] shortcode in the new Elementor page. This applies the checkout features to the page. You can use the Elementor widgets and add other designs you need on the page and publish it.
Then go to WooCommerce → Settings → Advanced and add the new page as the checkout page.
4. Creating WooCommerce Cart page with Elementor
In the same way we created the Checkout page you can create the WooCommerce cart page with Elementor.
You can use the shortcode [woocommerce_cart] on an Elementor page and then add any designs you want to the page and publish it.
Then add this new page to the WooCommerce Settings.
Hope this article helps you to use the Elementor page builder for your WooCommerce store. If there are any questions or anything more that you want us to cover on this topic, please mention it in the comments section.
The standard WooCommerce product pages are pretty functional, and good looking as well! But we can do better, especially by coupling WooCommerce and Elementor!
In this guide, we show you how to build custom (and beautiful) WooCommerce product pages to “WOW” your customers and generate more sales.
What you need
Apart from what you already have – a working WordPress installation and WooCommerce added on top of that – you need the Elementor page builder plugin.
Elementor comes in two flavors – free and paid. While there are some customizations available in Elementor free that can be used for WooCommerce, to get to the real good stuff, you need to upgrade to the pro version. This is going to cost you $49 for one site.
Note; Elementor is not the only page builder that works with WooCommerce and lets you build custom WooCommerce product pages. Here are some alternatives if you’d like to explore what else is out there. That said, Elementor is our favorite solution for WooCommerce customizations.
Before you can get to work, you have to install both the Elementor free and Elementor pro plugins on your site:
- Installing Elementor free is simple. Just go to Plugins → Add New and enter Elementor into the search box. Install and activate.
- To install Elementor pro, you first have to complete your purchase on Elementor.com. You’ll be able to download the Elementor pro package from your user profile – it’s a ZIP file. Go to Plugins → Add New and click on the Upload Plugin button. Select the Elementor ZIP from your desktop and upload it to your site. Activate the plugin.
Elementor will ask you to validate your license before everything becomes operational.
Create a new WooCommerce product page with Elementor
To begin, go to Templates and click on Add New.
From the list, select Single Product.
Elementor will show some ready-made WooCommerce product pages templates that you can start with. Picking one that looks the closest to what you want is the best path to take for most users. Creating a product template from scratch will generally take a lot more time. It’s just easier to modify an existing template. Click on Insert to get the template fetched.
You’ll see your template added onto the Elementor canvas. You can now customize the template however you see fit – add new elements to the page, customize the current ones, remove the stuff you don’t need, etc.
In the left sidebar, you’ll notice a range of WooCommerce elements, such as Product Title, Product Images, Product Price, and every other piece of data that WooCommerce displays about your products.
You can take each of these elements and drag them onto the canvas in the exact spot where you need them.
Here are some customizations you can do first:
Add your branding and colors
The stock Elementor product templates look nice, but they probably don’t match your brand perfectly. One quick change we can do to fix that is to adjust the background colors, font colors, and various typography settings in general.
To adjust any block that’s on the page, click on the pencil icon in the top right corner of the block.
Then, in the left sidebar, switch to the Style tab. This is where you can perform all styling- and looks-related customizations. For example, for the Product Title block, you can change the color of the text, the typography, and the shadows.
Let’s click on Typography. This will show another box where you can change the font and all the parameters of it.
Proceed through all the texts one by one and edit them until they look like you want them to. Pay special attention to what the price block looks like – it needs to be clearly visible so that it doesn’t confuse the customer.
Realign/move the product description
WooCommerce displays your product descriptions in a handful of places. We don’t need to get into all the specifics right now, but let’s just focus on two things:
- the short description
- your product data tabs
The short description is just what it sounds. WooCommerce takes this text from the Short Description box (one of the fields you fill out when creating a new product). It’s a good idea to have the short description displayed somewhere near the top of the product page.
You can take Elementor’s Short Description block and drag and drop it where you need it.
The product data tabs is effectively the block that houses the main information about the product. Make sure it’s in a visible spot in your new WooCommerce product page template.
Don’t forget to style the colors and typography of those blocks as well.
Tweak your “add to cart” button
The “add to cart” button is the single most important button on any eCommerce site. You really want it to stand out and catch the eye of your customer.
You can use two different block types for the “add to cart” button in Elementor. There’s the Add to Cart block, and the Custom Add to Cart block.
Experiment with both of them to see which is better in your case. Click on the pencil icon and see what’s available in the sidebar when it comes to the given block’s settings.
With a couple of clicks, you can get your button looking much better.
Add/remove product ratings
Displaying product ratings can be a great way to give your customers that final nudge to buy your stuff. The only problem is that you need to have some ratings in the first place. 🤷♂️
When your store is brand new, and you don’t have any ratings yet, it’s better not to have the ratings block on the page. Right click on the Product Rating element and delete it.
Later on, you can add that block back in and even customize how it looks. Some of the things you can change are the colors of the stars and the spacing of things.
Tweak the mobile and tablet views
These days, more people access the web from their smartphones than from desktop computers and laptops. For that reason, your store must be optimized for mobile viewing, or you will lose sales!
WooCommerce is already mobile-optimized out the gate, but since we are creating a custom product page, we need to make sure that your new product template looks good as well.
In the bottom left corner of the Elementor interface there’s a button labeled Responsive Mode.
When you click on it, you will be able to switch between the Desktop, Tablet, and Mobile views. Pick one of them and tweak the design if needed.
What’s cool here is that you can change the display settings of your blocks in a way that they take effect only on mobile or tablet. For example, if you think that the price should be bigger on mobile, click on the pencil icon in the price block, then click to edit the typography, and lastly switch to Mobile next to font size:
If you change the font size now, only the mobile view will be affected.
Go through your template element by element until you have the whole thing configured for mobile and tablet viewers.
Publish custom WooCommerce product pages
When your new product template is ready, click on the Publish button in the bottom left corner of the Elementor interface.
Elementor will ask you to add a condition for when the template should be used.
To have the template used for all products, simply select “Products” from the list, like so:
Click on SAVE & CLOSE to finalize everything.
That is it! 🍾 With this done, your custom WooCommerce product page has been saved and replaced the default product page.
You can see your product page in action when you visit any of the products in your store.