Posted Jul 30, 2020 by Ilnur Basyrov, Ecwid team

Introducing Ecwid for Elementor: Create an E-Commerce Website in WordPress, No Coding

When it comes to mastering WordPress, Elementor page builder works like a charm. This free drag-and-drop page builder for WordPress allows you to create beautifully designed pages in no time — no coding needed. More than five million active installs of Elementor prove it’s popular among WordPress users.

Can you add a shopping cart to WordPress with Elementor? You bet you can! The Ecwid E-commerce plugin allows you to add your online store directly in the Elementor editor. Whether it’s a whole storefront or a single product — drag, drop and start selling. It’s that easy!

Subscribe to the Ecwid E-commerce blog
Please enter a valid email address

What Is Elementor?

Just like WordPress is the sitebuilder of choice for many, powering 37% of all websites. Elementor is the most common page builder for WordPress, used in over three million sites and 180 countries.

Here’s what makes Elementor page builder so popular among WordPress users:

  • It’s fast and easy to use: you can create beautifully designed pages in no time with a drag-and-drop editor, no coding skills or developers’ help required.
  • It creates beautiful pages: various widgets and a rich template library allows you to add that “designer” touch to your website without hiring a designer.
  • It’s convenient: see changes to your page in real time. No need to to switch between the editor and the preview mode. It also works with or without Gutenberg editor (you can build your Ecwid store in Gutenberg too).


You can add elements anywhere on the page with an instant drag-and-drop

Can you use Elementor for free? Yes, this is especially important for a beginner trying to stay on a budget. What else could you need! Unless that your Ecwid store functionality was at your fingertips when you use Elementor. Well, wish granted.

Now that Ecwid E-commerce plugin for WordPress is compatible with Elementor page builder, you can add online store functionality to your site in a click.

You can instantly add an online store or a “Buy Now” button when you create your website with Elementor — just as effortlessly as any other element of your page.

e-сommerce website Elementor


You can find Ecwid widgets on the left section of the Elementor editor

Not all e-commerce plugins are compatible with Elementor, but Ecwid plugin is. Plus, it’s the easiest to use and the most affordable e-commerce solution (you can actually use it for free if you sell up to 10 products). Best of all, you don’t need any tech skills to use Ecwid E-commerce, or to host and maintain the software which differentiates it from plugins like WooCommerce.

Also: How to Update WooCommerce Plugin

Ecwid Widgets for Elementor

When you edit a page in Elementor, you see two sections on the screen. On the left, there is the editing window, and on the right, you can see how your page looks.

To add elements like text, images, or buttons to the page, you use special content blocks — widgets.

You can add widgets with a simple drag-and-drop from the left-hand side of the screen and drop them onto your page. That’s how you can add your store or products to the page.

When you use the Ecwid E-commerce plugin, you have two e-commerce widgets in the Elementor toolbar: Online store and Buy Now Button.

The Online store widget allows you to display the whole storefront on a page:

shopping cart WordPress

The Buy Now Button widget allows you to add “Buy Now” buttons to pages. You can choose what product you’d like to add with that button:

You can use “Buy Now” buttons to add single products to landing pages, your blog, the sidebar, or even to the error 404 page.

Learn more: 7 Ways to Sell With Ecwid’s “Buy Now” Button

How Do I Create an E-Commerce Website With Elementor?

Now, see firsthand how Ecwid E-commerce and Elementor work together to help you start selling on your website.

Before you start building an e-commerce website in WordPress with Elementor, make sure you:

To add an Online store or a Buy Now Button to the page:

  1. Open the Elementor editor in your WordPress admin and find the “Ecwid Store” section there.
  2. Drag and drop the widget you want to use:
  3. e-commerce website elementor

  4. To edit the content and look of your store or a Buy Now button, click on it in the right part of the screen and find “Edit Online Store” and “Edit Buy Now Button” on the left.

    e-commerce website WordPress

    The Content tab allows you to choose a category or a product you want to show on the page.

    The Style tab allows you to change the appearance of your Buy Now button. (As for the look of your store, you can adjust it in the Design page in your Ecwid Control Panel.)

    As for the Advanced tab, it allows you to apply different effects, change background type, change positioning and other advanced characteristics.

  5. Click Preview changes to see how your storefront or a Buy Now button looks. Click Publish or Update to save the changes.

That’s it! Try adding e-commerce widgets yourself, and you’ll see it’s even easier than it sounds.

Create an E-Commerce Website With Elementor Today

With the Ecwid E-commerce plugin and Elementor page builder, easily create beautifully designed sites and pages for your online business. Whether it be a whole storefront or single product, any skill level can do it.

If you want to learn more about Ecwid for WordPress e-commerce, check out these blog posts:

Have you already tried building pages with Elementor? Share your thoughts and experience in the comments!

About the author
Ilnur Basyrov is a Plugins Developer at Ecwid E-commerce. He develops plugins so that online sellers can install Ecwid on any website in a click. In his free time, he loves fishing and playing soccer.
We use cookies and similar technologies to remember your preferences, measure effectiveness of our campaigns, and analyze depersonalized data to improve performance of our site. By choosing «Accept», you consent to the use of cookies.