You’re searching for a WooCommerce builder for Elementor so that you can create and customize your store using Elementor’s powerful visual builder.

With ShopReady, you can create and customize your entire WooCommerce store with Elementor – even if you’re just using the free version of Elementor!

If you want to learn more about ShopReady, you can check out our full ShopReady review.

In this article, though, we’re more focused on how to use ShopReady as a WooCommerce builder for Elementor.

Below, we’ll show you step-by-step how you can use ShopReady to build and customize your store, including adding advanced features such as wishlists, product quick view, optimized checkouts, and lots more.

You’ll be able to create a store that looks like this:

And you’ll be able to customize everything using Elementor, including your product, cart, and checkout pages (plus a lot more):

How to Use ShopReady as WooCommerce Builder for Elementor

Without further ado, let’s get straight into our step-by-step tutorial.

Again, if you want to learn more about the many features in ShopReady before jumping into the tutorial, you can read our full ShopReady review.

And whenever you choose to try it out, you can get 30% off by using the exclusive coupon code WPMayor30 at checkout.

1. Create Your Basic WooCommerce Store and Install Elementor

If you haven’t done so already, your first step is to set up your basic WooCommerce store.

You’ll want to choose quality WooCommerce hosting, install WooCommerce, go through the setup wizard, add some products, and so on.

If you need some help here, you can check out our guide to setting up a WooCommerce store.

Don’t worry about choosing a WooCommerce theme or customizing the design yet, because that’s what Elementor and ShopReady are for. Just focus on setting stuff up on the backend so that you have a functioning, albeit basic, store.

Once you’ve done that, you’ll also want to install the Elementor plugin. 

With ShopReady, you’re free to use just the free version of Elementor. 

Or, if you already have Elementor Pro, you can also install that – ShopReady works fine with both versions.

2. Install ShopReady and Enable Everything

Once you’ve set up your basic WooCommerce store and installed Elementor, you’re ready to install the ShopReady WooCommerce builder for Elementor.

There’s a free version of ShopReady available at WordPress.org, as well as a premium version that adds more features starting at $75.

For this tutorial, we have the Pro version installed. However, the same basic steps will apply to the free version as well, so you should be able to follow along even if you use the free version (you just might not have access to some of the more advanced features and you won’t be able to customize as many templates).

Once you activate the plugin, you’ll get a new ShopReady menu in your WordPress dashboard.

If you go to the main ShopReady menu, you’ll get an interface with different areas where you can enable various widgets, modules, and templates.

For now, I recommend enabling all of the widgets and modules so that you have access to all of the features while you’re creating your store.

Once you’ve built your store, you can always come back and disable any elements that you aren’t using to keep things lightweight and speed up your store.

It’s especially important to enable the Demo Importer module, as this will let you access ShopReady’s pre-made store templates (though you can always customize everything from scratch).

Once you enable the Demo Importer module, it will prompt you to install the companion Demo Importer plugin, which you should do.

Once you do that, go to the new Unyson area in your WordPress dashboard and enable the Backup & Demo Content extension so that you can import ShopReady’s templates.

Note – if you want to design your templates from scratch using Elementor, you can skip this process.

3. Import a Template to Act as Your Store’s Base

Now, you can head to Tools → Demo Content Install to install one of the pre-made ShopReady demo sites.

Again, you’re also free to skip this and just design your store’s templates from scratch, which we’ll cover in the next section.

Once you import the demo, you’ll be able to fully customize everything using Elementor.

Have a look around the different demo options and then click the Install button for the demo that you want to use as your store’s base.

For this tutorial, we’ll use Demo V1:

And just like that, your store should look exactly like the demo:

4. Customize Your Store’s Templates With Elementor

Now, you’re ready to start using the WooCommerce builder for Elementor to customize your store’s content.

To access all of your store’s different templates, go to the ShopReady area in your WordPress dashboard and then select the Templates tab.

Here, you’ll see a list of all the different templates associated with your store. Here are some of the most important templates to consider:

• Product – the template for a single product page.
• Shop – the template for the main shop page.
• Shop Archive – the template for the page that lists all of your products.
• Cart / Empty Cart – the templates for various stages of your shopping cart.
• Checkout – the template for your checkout page.
• My Account – the template for a shopper’s frontend account page.

However, the nice thing about ShopReady is that it also gives you control over lots of other templates, such as product quickview, wishlist, and more. 

To edit any template and launch Elementor, you just need to select the relevant template and then click the Pencil icon.

You can also create new templates and use multiple templates in different parts of your store:

ShopReady will now launch the Elementor interface.

To control the design, you can use the normal Elementor interface and all of its design options.

The key difference is that ShopReady will also give you tons of general widgets and dedicated WooCommerce widgets that you can use in your designs. You can find these in the various Shop Ready areas of the Elementor interface:

Each widget will also have its own unique settings.

For example, the Thumbnail With Zoom widget lets you display the product images with different layouts and settings:

When you’re finished, make sure to save your changes.

Then, you can repeat the same process to edit all of your store’s templates. The blue Dashboard link on the right side of the page makes it easy to go back to the ShopReady templates interface.

Different templates might include their own special widgets. For example, when you’re creating the checkout page template, you’ll get special widgets to help you do that:

5. Customize Site Settings

In addition to letting you customize individual templates with Elementor, ShopReady also adds some options to the Elementor Site Settings menu. You can access Elementor site settings by clicking the hamburger icon in the top-left corner of the Elementor interface and selecting Site Settings.

This is where you can access a number of important settings for your store’s behavior.

At first, the settings are divided into two areas – ShopReady and ShopReady General & PopUp.

If you click into those areas, you’ll get a number of additional options. For example, you can control behavior for the sitewide mini cart that you’re able to add with ShopReady:

We recommend exploring all of these options because this is where you can find tons of cool features for your store.

You can also control your header and footer by going to ShopReady → Header Footer in your WordPress dashboard.

Start Using a WooCommerce Builder for Elementor Today

Users love Elementor because of its powerful visual, drag-and-drop builder interface.

With ShopReady, you can harness the power of that builder to fully design and customize your WooCommerce store, even if you’re only using the free version of Elementor.

If you’re ready to get started, use the button below to download ShopReady and then follow this tutorial to create your WooCommerce store.

Bonus: Get 30% off ShopReady by using the exclusive coupon code WPMayor30 at checkout!