Ever wished that you can design your complete WooCommerce retailer utilizing a visible, drag-and-drop interface?
Having the ability to good your retailer’s design is vital – optimizing your design may have an enormous impact in your conversion charges and what number of merchandise your customers purchase.
Nevertheless, until you’re a developer, it may be laborious to know the place to begin with customizing your theme, which is why so many WooCommerce shops depend on off-the-rack themes.
One resolution is to use a WordPress web page builder plugin. Folks love Elementor as a result of it enables you to visually design utterly customized designs utilizing a drag-and-drop interface. Nevertheless, you possibly can’t use it to design your complete WooCommerce retailer…by default.
That’s the place WooLentor is available in – WooLentor enables you to use the Elementor interface to take management of each single a part of your retailer – even your procuring cart and checkout pages.
On this WooLentor overview, I’ll take you thru all of its options and present you precisely how this instrument works.
WooLentor Evaluation: What Does It Do?
In a nutshell, WooLentor extends the favored Elementor web page builder plugin with the intention to use it to design each single a part of your WooCommerce retailer, out of your product pages to your store archive pages and even your procuring cart, checkout, thanks web page, my account web page, and extra.
That final half may be very distinctive, as a result of most different instruments don’t contact the cart and checkout pages, which suggests you want to depend on your theme for these pages. WooLentor modifications that, you possibly can management the design and format with some fairly stable customization choices.
That can assist you obtain this, WooLentor comes with 41+ totally different WooCommerce-related widgets that you need to use in your Elementor designs. For instance, you’ll get widgets to insert a product’s title, picture, description, and so forth.
You’ll additionally get extra superior widgets for issues like upsells, cross-sells, associated merchandise, and so forth. There are even widgets/options to transcend the default WooCommerce options. For instance, it might probably enable you to present gross sales notifications, show particular promo banners, add “name for value”/urged costs, and extra.
Whereas WooLentor enables you to construct the designs to your retailer from scratch, it additionally comes with plenty of pre-built importable templates to enable you to get began. WooLentor Professional additionally bundles in entry to some premium WooCommerce themes, although WooLentor will work with any WordPress theme.
As with most freemium plugins, WooLentor is available in each a free model at WordPress.org in addition to a premium model with extra options.
The free model offers you some further management over the design of your retailer and provides 18 WooCommerce parts that you need to use. Nevertheless, the actually distinctive options are within the Professional model, which is what you want to design your cart, checkout, my account web page, and so forth.
The Professional model begins at simply $29 for one 12 months of help and updates on a single website. Or, you possibly can pay $59 for lifetime help and updates on a single website.
Costs go up from there in order for you to apply it to a number of web sites.
WooLentor vs Elementor Professional
Should you’re conversant in Elementor, you may know that Elementor Professional already consists of its personal WooCommerce Builder that permits you to use Elementor to design your single product and store pages.
That may have you ever questioning, is there any distinction between WooLentor and Elementor Professional?
The reply is sure. Whereas there may be some overlap between WooLentor and Elementor Professional, WooLentor offers you much more flexibility than Elementor Professional. For instance, with WooLentor, you’ll have the opportunity to customise the templates of the next pages:
Purchasing cartCheckoutMy accountRegistrationThank youYou can’t try this with Elementor Professional – you want to use your theme for these pages or manually fashion them with CSS, which limits your flexibility.
WooLentor additionally offers you extra WooCommerce-related widgets. For instance, there are distinctive widgets like a product inventory standing progress bar. WooLentor additionally has its personal distinctive pre-built templates which are distinct from Elementor Professional.
Lastly, it’s additionally vital to word that WooLentor nonetheless works with the free model of Elementor. So in the event you solely want the options within the free model of WooLentor, you’ll have the opportunity to preserve all the things 100% free. And even in the event you want the Professional model, WooLentor remains to be a bit of cheaper than Elementor Professional whereas supplying you with extra performance.
How to Use WooLentor
Now that you’ve the background info, I’ll present you how one can really use WooLentor to design your retailer. For reference, I’m utilizing one of many WooCommerce demo websites from the Astra theme (take a look at my Astra overview) after which I’ll present you ways to customise it with WooLentor. You possibly can additionally use one of many bundled themes that you just get with WooLentor Professional in the event you want.
Additionally, I ought to word that I’m utilizing WooLentor Professional for this part – you received’t get each single function under within the free model, although the essential options are the identical.
How Templates Work in WooLentor
To arrange your retailer’s templates with WooLentor, you’ll first use Elementor’s built-in template system to create a template (e.g. to your single merchandise).
When you’ve performed that, you possibly can go to WooLentor → Settings → WooCommerce Template to assign that template to a particular a part of your retailer:
It is a little totally different from the common WordPress Theme Builder interface, however is fairly straightforward to determine when you perceive what’s occurring.
I’ll present you ways to construct the templates first. Then, I’ll cowl a few of the different choices within the settings space.
How to Customise the Single Product Web page
To create a template, go to Templates → Add New and create a brand new Web page template. Or, you too can import WooLentor’s pre-built templates and edit these, which I’ve chosen to do for this instance.
This could launch the common Elementor editor. Solely now, you’ll get a bunch of recent choices within the WooLentor Professional and WooLentor Addons sections of the sidebar.
You need to use these widgets to add particular product particulars. For instance, there’s one widget for the product title, one other for the outline, and so forth. You’ll additionally get a number of widgets for sure objects. For instance, you possibly can select between several types of product photographs by choosing totally different widgets.
You’ll additionally get very specialised widgets for issues like:
Product video galleriesUpsells and cross-sellsSpecial offersQR codesYou’ll additionally have the opportunity to use the entire common Elementor settings. For instance, need to disguise a sure aspect from cellular guests? Simply use the common Elementor Responsive settings. And so forth for different options.
When you’re completed, you save your modifications after which go to the WooLentor settings and assign that template to your single product web page:
You too can assign totally different templates to particular person merchandise from a brand new WooLentor field within the Product knowledge field when modifying particular person merchandise:
One slight drawback right here is you can’t use world circumstances to rapidly apply a template to all of the merchandise inside a sure class or tag, which might prevent a while and is one thing that Elementor Professional permits. As an alternative, you would wish to manually change the template for every product, which provides a bit of further work when you’ve got a big retailer.
How to Customise the Store Web page
You need to use the identical fundamental strategy to design your store or different archive pages. First, you’d import or create a brand new template and edit it with Elementor. Then, you need to use the customized widgets to record your merchandise.
It’s tremendous straightforward – all you do is add the Product Archive Format widget and also you’ll have a customizable record of all of your merchandise:
You possibly can additionally use the opposite widgets to add extra content material in the event you want.
When you’re pleased with the way it appears to be like, you possibly can assign it as your store web page. Or, WooLentor additionally enables you to assign these templates to particular person class or tag archive pages. You are able to do this when modifying a person class or tag:
How to Customise the Cart, Checkout, Thank You, And so on.
Now for probably the most distinctive function – the power to customise your procuring cart, checkout, thanks, my account, and different vital WooCommerce pages.
Observe – I like to recommend including an merchandise to your cart earlier than you begin modifying. That manner, you’ll have the opportunity to see an actual preview whilst you make your edits (in any other case it’s going to simply inform you that your cart is empty).
From there, you can begin customizing utilizing the Elementor interface. For instance, within the cart desk, you possibly can select which columns to embody. Should you wished to disguise a product’s picture from the cart web page, all you want to do is take away that column. Or, you too can add extra columns in order for you to show further info:
For some widgets, WooLentor will begin by simply pulling in your theme’s default format. Nevertheless, you may have the choice to override these settings if desired. For instance, in the event you disable the default habits within the “Cart totals” widget, you possibly can customise the entire textual content:
Checkout Web page
Switching over to the checkout web page, it’s the identical factor. For instance, you possibly can even modify the fields that show in your checkout type (watch out doing this, although, since you may by chance disable one thing vital):
You possibly can additionally add different parts. For instance, you can simply insert belief badges to increase confidence in your website, which is an efficient conversion optimization technique.
My Account Web page
Need to create a extra user-friendly expertise to your registered prospects after they make a purchase order? You too can absolutely customise the My Account web page in accordance to your wants.
One actually highly effective function right here is you can add/take away tabs to the My Account web page, together with creating customized hyperlinks. For instance, you can add a hyperlink to your present promotions to make it straightforward to your customers to discover one of the best offers:
Total, I believe that having the ability to design these pages is likely one of the strongest options in WooLentor Professional and the largest factor that makes it stand out from Elementor Professional.
How to Use Gross sales Notifications
WooLentor’s built-in gross sales notification function is one other distinctive possibility that goes past what you get in Elementor Professional.
You may set these up by going to WooLentor → Settings → Gross sales Notification.
It offers you the choice between selecting between actual notifications (primarily based on precise orders) or faux ones. I believe it’s higher to be sincere and present actual orders in order for you to construct actual social proof and belief along with your customers. Nevertheless, in the event you determine to use faux ones, you too can select a template that you just’ve constructed with Elementor (or import pre-made gross sales notification templates).
You too can configure different particulars, like how lengthy to show them and what number of to present:
How to Import Templates
As I discussed, WooLentor comes with plenty of pre-built templates you can import. You may browse these templates and import them with only a few clicks by going to WooLentor → Templates Library:
How to Disable Unused Widgets
To maintain issues extra light-weight, WooLentor enables you to disable any widgets that you just aren’t utilizing. You are able to do this by going to WooLentor → Settings → Components. All you want to do is toggle off the weather that you just don’t need to use:
Total, I believe that WooLentor is a really fascinating instrument in order for you to use Elementor to design your WooCommerce retailer.
Probably the most distinctive factor about WooLentor vs Elementor Professional is that WooLentor Professional enables you to use Elementor to design extra of your retailer together with the next pages:
CartCheckoutMy AccountThank youThese are crucial pages that can have an effect on the success of your retailer, so that you need to have the opportunity to get them proper.
Whereas Elementor Professional works properly for single product and store pages, it doesn’t allow you to contact these different pages, which is a large downside in order for you to use Elementor for WooCommerce. WooLentor Professional fixes that and provides you much more management over your complete retailer.
Past that, it additionally simply typically gives extra widgets and different superior options like gross sales notifications.
You may take a look at it round utilizing the free model at WordPress.org. Nevertheless, I believe many of the finest options are solely obtainable within the Professional model. So in order for you to use WooLentor, I’d suggest buying the premium model with the intention to design your cart, checkout, and so forth.