Are you seeking to open your first WooCommerce retailer? Or perhaps you’ve constructed WooCommerce shops for shoppers, however need to construct higher customized eCommerce shops?
You’ve received superb merchandise you can’t wait to get out to your clients. Fortunately, you might be open for enterprise very quickly.
On this submit, I’ll be going over how you can construct a WooCommerce retailer utilizing Elementor WooCommerce Builder. It’s a visible, drag-and-drop WordPress web page builder that offers you full management over your store and product web page designs.
The areas I’ll be overlaying are:
What are Elementor and WooCommerce?
How Elementor WooCommerce Builder Helps You Create an eCommerce Retailer
Benefits of utilizing Elementor WooCommerce Builder
Is There Something You Can’t Design with Elementor WooCommerce Builder?
Learn how to Design Your WooCommerce Retailer with Elementor
Arrange and configure WooCommerce
Design your store archive web page(s)
Design a single product web page
Embrace WooCommerce merchandise in different designs as wanted
Irrespective of whether or not it’s your first retailer or your fiftieth, you’ll uncover a less complicated workflow that eliminates the necessity to immediately edit WooCommerce template recordsdata or get your palms soiled with hooks. Woo-hoo!
Dev Man is fairly enthusiastic about his new store.
What are Elementor and WooCommerce?
To kick issues off, in case you didn’t know (though how couldn’t you?), right here’s a fast rundown of what Elementor and WooCommerce are.
Elementor is “the final word & free WordPress web page builder.”
It allows you to create an amazingly lovely web site within the quickest approach attainable. You may attain a excessive stage of design, by designing reside, and on the frontend of your WordPress website.
It’s at present the one (and first) frontend web page builder to permit limitless design potentialities.
WooCommerce is a free WordPress plugin that includes eCommerce capabilities to your website so you may have a web-based retailer.
It integrates simply together with your current WordPress website, permitting you to create customizable shops in minutes, get safe funds, configurable transport choices, and way more.
How Elementor WooCommerce Builder Helps You Create an eCommerce Retailer
The free core Elementor plugin permits you to design your WordPress content material utilizing a visible, drag-and-drop interface.
You need to use widgets so as to add content material to your website and management practically each side of your designs’ layouts and kinds.
With Elementor Professional, you then get entry to Elementor WooCommerce Builder, which helps you to design dynamic templates to your product archive and single product pages utilizing the identical visible editor.
With WooCommerce Builder, you may simply construct a completely customized WooCommerce retailer with out ever needing to work immediately with PHP template recordsdata or WooCommerce hooks.
Benefits of Utilizing Elementor WooCommerce Builder
Visible, drag-and-drop design: You may design your WooCommerce retailer exactly as your guests will see it. You may even preview totally different merchandise to see how they appear together with your designs.
No PHP/code: Reasonably than working immediately with PHP and/or template recordsdata, you may design every part from the Elementor interface.
Devoted WooCommerce widgets: You’ll get devoted widgets to incorporate all of the essential WooCommerce info, even all the way down to upsells and associated merchandise.
Conditional template show: You may create as many product archives and single templates as wanted and use conditional guidelines to regulate the place to make use of every template. For instance, you might create one product single design for merchandise in “Class A” and one other for merchandise in “Class B”.
Pre-built templates: You get entry to pre-built product archives and single templates you can customise to satisfy your wants. Or, you may construct your individual designs from scratch.
Is There Something You Can’t Design with Elementor WooCommerce Builder?
You need to use Elementor WooCommerce Builder to design your product archive and single templates, which comprise most of your retailer’s content material. It’s also possible to design the remainder of your WordPress content material, even together with templates to your header and footer.
Nevertheless, there are two WooCommerce pages that it doesn’t make it easier to with at the moment:
Procuring cart
Checkout
You need to use Elementor so as to add content material round the WooCommerce cart and checkout content material, however you can’t customise the precise content material itself.
Nevertheless, to regulate the design of the cart and checkout content material, there are just a few choices.
First, you should use a versatile base theme that pairs nicely with Elementor, whereas additionally providing you with settings to regulate your cart and checkout pages. Some good choices listed here are:
Astra
OceanWP
GeneratePress
Neve
Second, should you know your approach round CSS, you may add your individual kinds to regulate the cart and checkout pages.
Lastly, you should use a plugin that modifies the checkout course of.
For instance, the CartFlows plugin allows you to construct a customized checkout course of utilizing Elementor. Nevertheless, CartFlows is extra suited to gross sales funnels than “conventional” eCommerce shops, so it received’t work in all conditions.
It’s also possible to use a plugin equivalent to our very personal Forminator to create a personalized checkout course of.
Learn how to Design Your WooCommerce Retailer with Elementor
Now, roll up these sleeves to get hands-on and design your retailer utilizing Elementor Professional and WooCommerce Builder.
Let’s go step-by-step and create a retailer.
Set Up and Configure WooCommerce
In case you haven’t already, you’ll need to begin by establishing and configuring the fundamentals of your WooCommerce retailer. These primary setup steps aren’t the principle focus of this tutorial, so we received’t go too in-depth.
However usually, you’ll need to:
Set up and activate the free WooCommerce plugin from WordPress.org.
Run the WooCommerce setup wizard to configure essential fundamentals.
Add your merchandise.
Configure every other related settings within the WooCommerce settings space.
In case you need assistance getting began, extra info on how to do that might be discovered right here.
Design Your Store Archive Web page(s)
Now, you’re prepared to begin constructing your retailer, beginning with the template to your product archives.
The product archive web page is the web page that lists all your WooCommerce merchandise (or the merchandise with a particular class, tag, and so forth.).
To get began, go to Templates > Theme Builder > Product Archive. Then, click on the Add New Product Archive button.
The theme builder template.
Give it a flowery identify and click on Create Template to proceed.
It will launch you into the design interface. You may import one of many pre-made product archive templates or shut the template library to construct your design from scratch.
Elementor design interface.
From there, you’ll be capable of design your archive template utilizing the visible, drag-and-drop interface.
You need to use the devoted Product Archive widgets so as to add core content material like an inventory of all of your merchandise or the title of the archive web page (e.g. the identify of the class).
Archives merchandise.
Modifying one of many widgets allows you to management its look and performance. You may customise every part from star rankings to sale badges.
Edit Archives Merchandise.
If you’re completed together with your design, click on the Publish button to regulate when to make use of your template.
You get 5 show circumstances you can mix-and-match as wanted:
All Product Archives
Store web page
Search outcomes
Product classes
Product tags
For instance, to show the template in your primary store web page solely, select Store Web page.
For some circumstances, you’ll get extra choices. An instance of that is if you choose Product classes, you may goal your template to all product class archive pages or only a particular class (or set of classes).
Set circumstances for displaying your template in your website.
These show circumstances are helpful as a result of they allow you to create as many distinctive templates as you could finest showcase all of the totally different merchandise that you just promote.
Typically a one-size-fits-all method isn’t the most effective answer. WooCommerce Builder makes it simple to spin up new templates without having to work immediately with PHP template recordsdata.
Design Your Single Product Pages
When you’ve created your product archive pages, you should use the identical primary method to customise a WooCommerce product web page template for single merchandise.
To get began, go to Templates > Theme Builder > Single Product. Then, click on the Add New Single Product button and provides it a reputation.
Simply as together with your product archive design, you’ll have the choice to import one of many pre-made templates or construct your individual product web page template from scratch.
Single merchandise web page.
Now, you’ll get one other set of devoted widgets for all the data on the product single web page, together with every part from the product title to associated merchandise and upsells.
Edit Add to Cart widget.
Getting into the settings for one of many widgets allows you to configure its fashion and placement.
Configure widget settings in your product web page.
By default, Elementor will pull in certainly one of your actual merchandise for the reside preview of your design. However should you’d desire to see how your design would look with a special product, click on on the gear icon within the bottom-left nook and edit the Preview Settings to make use of any product at your retailer.
Preview your design earlier than going reside.
When you’re completed, click on the Publish button to decide on the place to use this product single template.
Right here, you’ll get one other 5 choices:
All merchandise
In class
In baby class
In tag
Merchandise by writer
For the latter choices, you’ll be capable of select particular objects that apply to that situation (e.g. a particular class).
You may set very particular circumstances for displaying your templates.
As together with your product archive templates, you may repeat the method as many occasions as wanted to make sure that every sort of product has an optimized single product design.
Embrace WooCommerce Merchandise in Different Designs as Wanted
Past letting you design your product archive and single templates, Elementor Professional additionally offers you devoted WooCommerce widgets that you should use in different designs.
For instance, you might use them to function merchandise in a weblog submit that you just’re writing. You may entry these widgets at any time from the WooCommerce part within the Elementor interface.
Simply entry and edit your website widgets at any time.
If you wish to show merchandise, you may create your individual customized queries to regulate which merchandise to show.
You may even use the included Elementor Popup Builder function to incorporate or promote merchandise in a popup. For instance, you may promote a particular deal and embrace an add to cart button proper within the popup.
Instance of a particular deal or promotion.
It’s an ideal function to advertise particular offers and promotions.
Time to Open Store
With Elementor Professional, you may construct a customized WooCommerce retailer sooner and with extra flexibility.
As you may see, it’s a easy course of. Reasonably than working with hooks or template recordsdata, you should use a visible, drag-and-drop interface.
You get devoted widgets to show essential WooCommerce product info, and you can even use conditional show guidelines to create as many single product and product archive templates as your retailer wants.
In case you actually need to make your website shine, take a look at our article on 8 Should-Haves When Including eCommerce to Your WordPress Web site.
Additionally, should you’re buying round for extra WordPress options, we provide devoted internet hosting, website administration, and 24/7 help.
So, get began immediately and construct your individual customized WooCommerce retailer. Then, flip that signal over to “OPEN” and begin promoting your superb merchandise.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!