You’re trying to find a WooCommerce builder for Elementor in an effort to create and customise your retailer utilizing Elementor’s highly effective visible builder.
With ShopReady, you’ll be able to create and customise your total WooCommerce retailer with Elementor – even should you’re simply utilizing the free model of Elementor!
If you wish to be taught extra about ShopReady, you’ll be able to try our full ShopReady evaluate.
On this article, although, we’re extra centered on the right way to use ShopReady as a WooCommerce builder for Elementor.
Under, we’ll present you step-by-step how you should use ShopReady to construct and customise your retailer, together with including superior options similar to wishlists, product fast view, optimized checkouts, and much extra.
You’ll have the ability to create a retailer that appears like this:
And also you’ll have the ability to customise every part utilizing Elementor, together with your product, cart, and checkout pages (plus much more):
Use ShopReady as WooCommerce Builder for Elementor
With out additional ado, let’s get straight into our step-by-step tutorial.
Once more, if you wish to be taught extra concerning the many options in ShopReady earlier than leaping into the tutorial, you’ll be able to learn our full ShopReady evaluate.
1. Create Your Fundamental WooCommerce Retailer and Set up Elementor
In the event you haven’t executed so already, your first step is to arrange your fundamental WooCommerce retailer.
You’ll wish to select high quality WooCommerce internet hosting, set up WooCommerce, undergo the setup wizard, add some merchandise, and so forth.
In the event you want some assist right here, you’ll be able to try our information to organising a WooCommerce retailer.
Don’t fear about selecting a WooCommerce theme or customizing the design but, as a result of that’s what Elementor and ShopReady are for. Simply concentrate on setting stuff up on the backend so that you’ve got a functioning, albeit fundamental, retailer.
When you’ve executed that, you’ll additionally wish to set up the Elementor plugin.
With ShopReady, you’re free to make use of simply the free model of Elementor.
Or, if you have already got Elementor Professional, you can too set up that – ShopReady works superb with each variations.
2. Set up ShopReady and Allow All the pieces
When you’ve arrange your fundamental WooCommerce retailer and put in Elementor, you’re prepared to put in the ShopReady WooCommerce builder for Elementor.
There’s a free model of ShopReady accessible at WordPress.org, in addition to a premium model that provides extra options beginning at $75.
For this tutorial, we have now the Professional model put in. Nonetheless, the identical fundamental steps will apply to the free model as nicely, so it’s best to have the ability to observe alongside even should you use the free model (you simply may not have entry to a number of the extra superior options and also you gained’t have the ability to customise as many templates).
When you activate the plugin, you’ll get a brand new ShopReady menu in your WordPress dashboard.
In the event you go to the principle ShopReady menu, you’ll get an interface with completely different areas the place you’ll be able to allow varied widgets, modules, and templates.
For now, I like to recommend enabling all the widgets and modules so that you’ve got entry to all the options when you’re creating your retailer.
When you’ve constructed your retailer, you’ll be able to at all times come again and disable any components that you simply aren’t utilizing to maintain issues light-weight and pace up your retailer.
It’s particularly essential to allow the Demo Importer module, as this may allow you to entry ShopReady’s pre-made retailer templates (although you’ll be able to at all times customise every part from scratch).
When you allow the Demo Importer module, it should immediate you to put in the companion Demo Importer plugin, which it’s best to do.
When you do this, go to the brand new Unyson space in your WordPress dashboard and allow the Backup & Demo Content material extension in an effort to import ShopReady’s templates.
Observe – if you wish to design your templates from scratch utilizing Elementor, you’ll be able to skip this course of.
3. Import a Template to Act as Your Retailer’s Base
Now, you’ll be able to head to Instruments → Demo Content material Set up to put in one of many pre-made ShopReady demo websites.
Once more, you’re additionally free to skip this and simply design your retailer’s templates from scratch, which we’ll cowl within the subsequent part.
When you import the demo, you’ll have the ability to absolutely customise every part utilizing Elementor.
Take a look across the completely different demo choices after which click on the Set up button for the demo that you simply wish to use as your retailer’s base.
For this tutorial, we’ll use Demo V1:
And similar to that, your retailer ought to look precisely just like the demo:
4. Customise Your Retailer’s Templates With Elementor
Now, you’re prepared to start out utilizing the WooCommerce builder for Elementor to customise your retailer’s content material.
To entry all your retailer’s completely different templates, go to the ShopReady space in your WordPress dashboard after which choose the Templates tab.
Right here, you’ll see an inventory of all of the completely different templates related together with your retailer. Listed below are a number of the most essential templates to think about:
- Product – the template for a single product web page.
- Store – the template for the principle store web page.
- Store Archive – the template for the web page that lists all your merchandise.
- Cart / Empty Cart – the templates for varied phases of your purchasing cart.
- Checkout – the template on your checkout web page.
- My Account – the template for a consumer’s frontend account web page.
Nonetheless, the good factor about ShopReady is that it additionally offers you management over numerous different templates, similar to product quickview, wishlist, and extra.
To edit any template and launch Elementor, you simply want to pick out the related template after which click on the Pencil icon.
You may also create new templates and use a number of templates in numerous elements of your retailer:
ShopReady will now launch the Elementor interface.
To regulate the design, you should use the conventional Elementor interface and all of its design choices.
The important thing distinction is that ShopReady may also offer you tons of basic widgets and devoted WooCommerce widgets that you should use in your designs. You’ll find these within the varied Store Prepared areas of the Elementor interface:
Every widget may also have its personal distinctive settings.
For instance, the Thumbnail With Zoom widget enables you to show the product photographs with completely different layouts and settings:
Whenever you’re completed, make certain to save lots of your adjustments.
Then, you’ll be able to repeat the identical course of to edit all your retailer’s templates. The blue Dashboard hyperlink on the appropriate aspect of the web page makes it simple to return to the ShopReady templates interface.
Totally different templates may embrace their very own particular widgets. For instance, while you’re creating the checkout web page template, you’ll get particular widgets that will help you do this:
5. Customise Web site Settings
Along with letting you customise particular person templates with Elementor, ShopReady additionally provides some choices to the Elementor Web site Settings menu. You may entry Elementor website settings by clicking the hamburger icon within the top-left nook of the Elementor interface and choosing Web site Settings.
That is the place you’ll be able to entry quite a few essential settings on your retailer’s habits.
At first, the settings are divided into two areas – ShopReady and ShopReady Common & PopUp.
In the event you click on into these areas, you’ll get quite a few extra choices. For instance, you’ll be able to management habits for the sitewide mini cart that you simply’re in a position so as to add with ShopReady:
We suggest exploring all of those choices as a result of that is the place yow will discover tons of cool options on your retailer.
You may also management your header and footer by going to ShopReady → Header Footer in your WordPress dashboard.
Begin Utilizing a WooCommerce Builder for Elementor Right this moment
Customers love Elementor due to its highly effective visible, drag-and-drop builder interface.
With ShopReady, you’ll be able to harness the facility of that builder to totally design and customise your WooCommerce retailer, even should you’re solely utilizing the free model of Elementor.
In the event you’re able to get began, use the button under to obtain ShopReady after which observe this tutorial to create your WooCommerce retailer.
