There are 3 strategies you should use to customise WooCommerce with Elementor. On this tutorial, we’ll break down these quick and intuitive customization choices.
WooCommerce is fingers down the very best WordPress plugin for organising a web based store. The one downside is, whereas it offers you management over an excellent majority of retailer settings, and it simplifies the product creation course of, it doesn’t permit for a lot customization in terms of design.
There are a variety of the way you’ll be able to work round this with Elementor Professional:
Technique 1: Use a WooCommerce Elementor Theme
The principle problem we’re coping with right here is that WooCommerce doesn’t give customers the power to customise pages like:
- Store
- Product
- Cart
- Checkout
- My Account
Many premium WooCommerce Elementor themes present a easy resolution for this downside. Inside every theme, you’ll discover web site demos or web page templates that supply up a number of format choices to your ecommerce pages.
For instance, MyDecor comes with 9 product layouts to select from:
When you don’t want or wish to spend a ton of time customizing your WooCommerce pages, this would be the greatest technique for you.
After you add your theme into WordPress and set up your most well-liked demo, use the Elementor web page builder plugin to tweak the designs and layouts. To get the very best outcomes, you’ll have to make use of Elementor Professional widgets.
By the best way, when you’re interested in which Elementor-compatible WooCommerce themes are the very best to make use of, try a few of our suggestions:
Technique 2: Customise Premade WooCommerce Pages with Elementor Widgets
There are three pages that WooCommerce will routinely generate for you after you put in the plugin:
Most premium WordPress themes will do the identical.
When you have a look inside these pages in WordPress, you’ll see a shortcode rather than the place the content material must be:
Open up the preview of this web page and also you’ll discover a primary Cart web page:
There’s nothing fallacious with this design. Nonetheless, what if you wish to construction it a little bit in another way — like by including a sidebar to the correct aspect of the web page? Or what when you needed so as to add a bit with upsells or wishlist objects under the cart?
The one strategy to customise these three WooCommerce pages is to strip out the shortcode and to edit them in Elementor. Right here’s the method you’ll observe to try this:
Step 1: Find the WooCommerce Web page to Edit
Go to Pages and discover the premade WooCommerce web page you wish to edit:
Open up the one you wish to edit. On this instance, we’re going to work on Checkout.
Step 2: Delete the Shortcode
Within the WordPress editor, choose the Shortcode block. Then click on on the Choices (three vertical dots) button.
Click on Take away Shortcode to delete the block from the web page.
Replace the web page. Then click on the blue Edit with Elementor button on the prime to open the editor.
Step 3: Customise the WooCommerce Web page in Elementor
Sadly, Elementor web page and block templates shall be of little assist to you. As of scripting this, there aren’t any templates for cart, checkout, or account web page content material.
That stated, you should use Elementor Professional’s WooCommerce widgets as an alternative. Simply just remember to’ve configured your theme’s international settings to be able to decrease how a lot stylistic enhancing it’s a must to do right here.
What’s nice about utilizing Elementor Professional widgets is that there’s one for just about each web page you’d wish to customise:
Checkout creates a checkout web page with:
- Billing particulars kind
- Order word discipline
- Abstract field
- Coupon part
- Buy button (with phrases of service settlement)
Cart creates a cart web page with:
- Cart particulars
- Coupon discipline
- Buy complete with transport calculations
My Account creates a consumer account web page with tabs for:
- Dashboard
- Orders
- Downloads
- Addresses
- Account Particulars
- Logout
With every of those widgets, you will have the power to customise how every part seems in addition to the design of the general web page. In some circumstances, you’ll be able to disable a number of the options (just like the coupon code) once they’re irrelevant to your buying expertise.
You may add different widgets into these WooCommerce pages, by the best way. Elementor has Professional widgets for every kind of issues — Breadcrumbs, Upsells, Product Classes, and extra.
Step 4: Publish the New Web page
Whenever you’re achieved customizing your design, click on the inexperienced Replace button within the bottom-right nook. Then exit to the WordPress dashboard.
Repeat this course of for as many pages as you must customise.
Technique 3: Create Customized WooCommerce Pages with the Theme Builder
Use this technique to construct your WooCommerce Store and Product pages with Elementor Professional.
Earlier than you proceed with this workflow, it’s a good suggestion to have at the very least one product loaded into your store. In any other case, you gained’t be capable of see actual knowledge or photos as you piece collectively and customise your designs.
Step 1: Go to Templates and Theme Builder
From the WordPress dashboard, find the Templates menu. Then choose Theme Builder:
Theme Builder is a Professional characteristic that allows customers to create customized designs for essentially the most important elements and pages on a web site. When WooCommerce is put in, customers achieve the power to customise the Single Product and Merchandise Archive pages with Elementor.
Step 2: Create a New World Half
To create a web page to your Store, hover over Merchandise Archive and click on the blue plus-sign button. To create a web page for particular person merchandise, hover over Single Product and click on the blue plus-sign button.
For our instance, we’ll be creating a worldwide format for our merchandise.
Step 3: Select a Template
After clicking the plus-sign, Elementor will take you contained in the builder and offer you block templates that match no matter it’s you’re attempting to create:
Even when the premade layouts aren’t precisely what you envisioned, select the one which’s closest to what you wish to do. Ranging from a template is an efficient time-saving trick as you’ll be able to go away the inspiration be after which focus your vitality on enhancing the content material.
To insert the template into the web page, click on on the inexperienced Insert button that seems to the top-right of it.
tip
You should utilize exterior templates right here as properly. So, when you have a product or store web page template you’d like to change, there’s a workaround for it.
Save your product or store web page as a draft after which return to the WordPress dashboard. Go to Templates and Saved Templates. Click on on Import Templates to drag in your exterior design file:
Elementor goes to ask you what sort of web page it’s. It is going to then take you to the Elementor editor the place you’ll be able to customise it.
You gained’t have to return to the Theme Builder if that is the route you’re taking. Simply be sure that to complete steps 4 and 5 so you’ll be able to program the web page template to indicate up as a worldwide web page design.
Step 4: Customise the Design
Whenever you’re prepared, begin by eradicating the widgets and options you don’t want. These must be components you gained’t be changing with anything. For example, when customizing my very own product web page, I left the picture column intact:
Nonetheless, I eliminated the background picture which was set to drag within the main product picture. I then dragged the Product Photographs widget into the column.
This enables me to create a extra full and interactive product picture expertise. For starters, if I load up multiple product picture into WordPress, the complete gallery will seem right here. Secondly, this widget comes with a hover-triggered zoom characteristic, which can make the imagery extra helpful for consumers as they will see up-close particulars of the merchandise.
Now, after you’ve eliminated widgets and sections you don’t want, go forward and add widgets into the canvas for any options which are lacking. You’ll probably discover them beneath the Product and WooCommerce classes. You should utilize different Elementor widgets in the event that they’re wanted, too.
Lastly, spend a while going by every a part of the web page. Customise the content material and elegance of the whole lot that wants it. This goes simply as a lot for the person widgets because it does for the assorted sections on the web page.
Step 5: Set Situations for the Web page and Publish
Whenever you’ve completed finalizing your design, click on the up-arrow to the correct of the inexperienced Publish button. Choose Show Situations:
Within the pop-up that follows, click on the Add Situation button. By default, the Single Merchandise web page you’re creating will apply to all product pages:
When you solely wish to show it for sure forms of merchandise, click on the Merchandise dropdown and choose the class, tag, or different specification you wish to restrict the situation to.
If you wish to show this design for all merchandise besides a particular class or sort, click on Add Situation as soon as extra and create an EXCLUDE setting.
When you’re achieved setting the situations, click on Save & Shut. This can concurrently save your situations and publish the brand new design to the areas of the positioning the place it’s relevant.
Open up your web site and navigate to a product web page (or the Store web page, when you personalized that one first). You’ll see the adjustments mirrored there.
Conclusion
WooCommerce is a good resolution for organising a web based store. All the essential elements you’d want to start out promoting your merchandise are constructed proper into the platform. Nonetheless, it doesn’t provide a lot in the best way of design customization.
Elementor Professional gives us an answer to this downside with its Theme Builder software and Professional widgets.
This premium web page builder plugin makes it straightforward to construct a WooCommerce store with Elementor after which customise the elements of it that WooCommerce itself doesn’t contact — just like the Store, Cart, and Checkout pages.
The Elementor-WooCommerce duo are a should have for constructing a high-performing on-line retailer. Whenever you’re able to degree up the customized buying expertise you’ve created immediately, attempt these WooCommerce Elementor Addons.
