Home » WooCommerce + Elementor: Let’s Build Cool Stuff

WooCommerce + Elementor: Let’s Build Cool Stuff

by Tutor Aspire

Do you want to tweak and design your WordPress website without hiring a developer? Good news: it’s completely possible with WordPress page builder plugins. 

A WordPress page builder plugin comes with an intuitive drag-and-drop interface to create beautiful custom pages and websites. Thus, regardless of your skillset or technical know-how, page builder plugins make designing your ideal website a breeze without writing a single line of code. 

Now, if you’re wondering which WordPress page builder plugin you should consider, you’re in the right place. In this article, we’ll review one of the most popular options: Elementor, which is considered the gold standard. Elementor is the second most-installed WordPress plugin with 2 million active installations – used by around 15.9% of WordPress websites

We’ll start with Elementor’s brief overview and further review the plugin’s interface, features, and pricing to help you determine whether it’s the right choice for your site. Let’s go!  

Elementor Plugin: A Brief Overview 

Elementor is a visual drag-and-drop WordPress page builder plugin that lets you create unique web pages and posts compared to the standard page templates that come with your WooCommerce or WordPress themes. 

It requires no coding and allows you to easily configure settings and organize your page’s content and elements with drag and drop tools. 

Let’s start with the plugin review by looking at how the Elementor interface works. 

Understanding The Elementor Plugin Interface 

Compared to many other page builder plugins, Elementor has one of the simplest and most seamless interfaces. When you first launch the plugin, you’ll land on a page like this: 

The dotted-like grey area is your content area. Outside this area, your regular theme will appear, whereas, within the dotted area, you can add widgets and build your own design. 

On the left-hand side, you’ll see widgets, which act as building blocks you can put together to design your page. Below these widgets, you’ll find general settings to preview your designs, undo changes, or switch on the responsive mode, as shown in the image. 

Here’s how simple it is to drag and drop the desired elements on the page: 

When you drop an element on your page – Elementor divides the elements into two layout structures, giving two different structural elements, as shown below. 

These structural elements include: 

  • Section: marked with the blue color. 
  • Column: sits inside the section marked by black. You can add as many columns as needed within the section. 

Once you drop the element, you can easily customize its layout by adjusting the width and changing the column gap and height. 

Moreover, you can also choose a suitable section structure per your specific requirement and add other elements, like an image, video, or icon, within the columns. 

For example, I’ve added an image and chosen one from the default Elementor image library, as shown below in the image. You can alter the image’s size and alignment, add a caption, and link a suitable URL. 

For further styling of the elements, structures, or columns – you can use the Style and Advanced tabs in the sidebar. Simply click on the content you want to style and click on the sidebar tabs to make the changes. 

You can also navigate from the tabs to the elements sidebar by simply clicking on the squared icon displayed at the right corner of the sidebar. 

Thus, Elementor is quite easy-to-use and with simple drag-and-drop and easy customization options – you can build your dream website in no time. 

Now without taking much time, let’s jump straight into the features of the Elementor page builder. 

Top Elementor Features That Make It An Excellent Page Builder For WooCommerce  

Here are some excellent Elementor benefits that make it one of the most popular page builders amongst WordPress and WooCommerce websites. 

  1. Extensive pre-made template library

Elementor provides an extensive range of templates. Click on the Add templates icon below to add a template.  

Choose from over 300 templates from the Elementor template library and add them to your page with a single click. 

Since the release of Elementor 2.0, these templates come in two formats: 

  • Blocks: provide designs for specific sections instead of an entire page. For example, you can add an About company section or a pre-built contact section to an existing page layout using blocks. 
  • Pages – Offer full-page designs, which you can import with a single click and tweak as required. 

You can also save some of your designs as blocks and templates to reuse later on other pages or websites – making it super convenient to maintain a common template design throughout your website. 

It also removes the hassle of building a new page design from scratch each time. 

  1. Responsive design controls and mobile previews 

Mobile usage is consistently growing each month, and about 73.1% of web designers believe that a non-responsive page design is one of the biggest reasons behind website abandonment. 

All the designs and pages you create on Elementor are automatically responsive and look great on mobile devices. In addition, you can quickly preview how your website will look on other devices without going out of the interface. 

Click on the Responsive mode button at the bottom of the sidebar and preview your website’s desktop, mobile, and tablet versions by clicking on the buttons highlighted in the images below. 

It allows you to customize your page designs based on the device type and lets you show or hide certain widgets on certain devices. For instance, if your website’s desktop version has a huge hero image, you might avoid displaying that image on your site’s mobile version. You can select that image or any section you wish to hide and hide them on mobile devices using Elementor’s responsive design controls with a single toggle-click. 

Hence, it ensures your website is 100% responsive – so it looks great on all devices, including desktops, tablets, and mobile devices. 

  1. Limitless customization options 

Customization is limitless with Elementor, and there’s no bound to how you can design your website and its elements. 

The Style and Advanced menus in the Elementor editor give plenty of style customization options. You can style the content as per several attributes, including its color, width, size, CSS filters, and border.

At the same time, the Advanced menu allows you to manage the layout, motion effects, background, border, attributes, and other factors, as shown below. 

  1. Detailed layout controls 

Diving deeper into the customization options, Elementor gives you detailed control over your layout design, so you don’t have to compromise on your design flexibility because of the inability to write custom code. 

Elementor makes it simple to position your sections, widgets, and columns exactly where you want with many intuitive control options. 

Using the layout controls in the Advanced menu, you can: 

  • Set margin and padding for sections, widgets, and columns manually. 
  • Choose the section’s width – default, full-width, in-line, and custom. 
  • Adjust the widget’s position within the column – default, fixed, and absolute. 
  • Adjust the gap between the columns and create a blank space for a clean layout. 

Thus, with no coding skills, you can easily adjust the placement of your widgets and customize columns and sections as needed. 

  1. Complete revision history of the progress with undo/redo changes 

One of the best features of Elementor is that it lets you preview the entire history of all the changes you made, thus logging every action in the history. 

Furthermore, you can easily undo changes and revert to the previous version whenever necessary. Also, whenever you save a new design, you can easily revert to a completely new revision if required. 

  1. Leaves behind a clean code 

If you ever wish to deactivate Elementor in the future for some reason, you don’t have to worry about it leaving behind tons of shortcodes like the Divi Builder. 

Elementor leaves behind clean code, ensuring optimal performance and page speed. 

More Elementor Features

Here are some more features of the Elementor page builder plugin: 

  • Header and footer editor: You can easily edit your site’s headers and footers with Elementor without any coding skills. 
  • Inline text editing: This feature allows you to edit text live on screen – making it easy to edit existing text content or write blog posts. 
  • RTL and translation ready: Elementor comes in 23 translated languages, and you can easily translate it to additional languages because of its full RTL language support. 
  • WooCommerce widgets: It provides pre-built WooCommerce widgets, such as pricing lists and pricing tables, to make building eCommerce websites a breeze. 
  • Third-party integrations: Elementor supports third-party integrations, including ActiveCampaign and MailChimp. 
  • Global colors and typography options: Elementor allows you to set global typography and colors to create comprehensive designs across all pages. Besides, you can also choose from 800+ Google fonts for your website design. 
  • Maintenance mode: You can leverage Elementor’s maintenance mode templates to set your website on the maintenance mode. 

Elementor Pro Review 

While the core Elementor page builder is open-source and free, you can upgrade to the Elementor Pro version – which provides additional useful functionalities. 

Here’s a brief look at some features of the new Elementor Pro plugin: 

  • It lets you build an entire WordPress theme. 
  • It has more exciting widgets, including sliders, social share buttons, forms, countdown timers, and login forms. 
  • It provides tons of high-quality premium Elementor Pro templates. 

Thus, if you want more features, premium templates, and global widgets – you can go for the Elementor Pro plugin, starting at just $49. 

Elementor Pricing Review

If you want to build simple and basic-styled websites, the free version of the plugin should suffice your needs – considering being the most feature-rich free-of-cost page builder. 

However, to create more professional websites, Elementor offers four premium plans with premium features, like VIP support and Elementor Expert Profile. 

The Essential, Expert, Studio, and Agency plan of the Elementor plugin costs $49, $199, $499, and $999 per year. Thus, Elementor is for everyone, and whether you’re a web designer, developer, or an agency owner – Elementor provides features for every need and demand. 

Conclusion: Final Verdict

After this comprehensive review, it’s safe to say that Elementor provides all the essential features required to build a WordPress or WooCommerce website. 

It comes with a light, simple, easy-to-understand, and unbloated interface, allowing website designers with no coding experience to build beautiful websites. And the best part is that it comes with pricing plans for everyone’s needs. Moreover, Elementor developers continue to release and roll out new features and improvements. 

After reviewing the plugin’s ease of use, overall features, performance, support, interface, and pricing, we rank Elementor at the top of WordPress page builder plugins. So check out and try the Elementor plugin on your own and choose the plan suitable to your specific business requirements. 

You may also like