- Woocommerce Page Builder For Elementor Free Download
- Woocommerce Page Builder
- Customize Woocommerce Shop Page Layout
WooCommerce Store Page with Beaver Builder Step 1: Adding a new Theme Layout Go to WP Admin Beaver Builder Theme Layouts. Click on the Add New button to add a new Layout. Woo Commerce Page Builder is a dream come true for innovative creative digital publishers who want to add custom slideshows, video and other engaging multimedia to enhance the online shopping experience. If you make websites professionally, this is a must have add-on.
Speed is essential for online stores, and at WooCart, the first hosting built exclusively for WooCommerce, we want to help store owners build the fastest store possible.
The same way themes affect the page speed, page builders do as well.
We wanted to do these page builder speed tests so that everyone understands the performance compromise when working with them. Performance is often overlooked in favor of design, even though in the case of online stores, it should more often be the other way around.
The 2021 test was done in March.
Overview
- Which is the fastest WooCommerce page builder tested?
- Analysis of the WooCommerce Page Builder Speed Test
- Speed Testing Methodology
Which page builders did we test and how?
We’ve tested 7 popular paid and free page builders and Gutenberg.
We gave the test stores a basic homepage design that was built with the page builder. There were no changes made to the shop or product page. We’ve tested the three pages (homepage, shop page, product page), each page ten times. The testing was done with GT Metrix API. The results are for Page Load time. This, in our opinion, gives the most realistic results.
The theme used is Astra as it was the fastest WooCommerce theme in our benchmark test and it supports all of the popular builders.
To fully understand how we tested the page builders, read the Testing Methodology section below the results.
Which is the fastest WooCommerce page builder tested?
Let’s jump straight to the results. In all cases the lowest number is the best.
Page Load Time – Overall
This is the average of the three tests.
Page Load Time – Single Pages
Each page was tested 10 times. The result is the median.
Analysis of the WooCommerce Page Builder Speed Test
We added a few new page builders to the test but the results are almost the same as last time. The main difference is that Gutenberg took over Beaver Builder this year.
Still a very impressive showing from Beaver Builder, and also the newcomer Brizy. Even though they have full page builder features, there is barely a performance compromise compared to Gutenberg.
The results pretty clearly show that the most popular complex page builders like Divi and Elementor come with a large cost to performance.
If you’re looking for a partner to help you with your store performance, take a look at our website. WooCart is the only hosting built exclusively for WooCommerce and we’re focused on making your store fast and easy to maintain.
Results for the WooCommerce Page Builder Speed Test 2019/20
These are the results from last year. The tests were run five times per each page (compared to this year’s ten times). The time is Fully Loaded and not directly comparable to this year’s Page Load time.
Speed Testing Methodology
To make sure the tests are reliable and consistent, we’ve set strict testing criteria.
WooCommerce Store Configuration
We used the free Astra theme. Page builders were used to create the homepage with the same sections – above the fold with a hero image, three images for categories, featured products, one big featured product, and a text FAQ section.
Stores are hosted on WooCart hosting on Google Cloud Platform in a datacenter in the Netherlands. There is no CDN running on the stores. Caching is enabled.
The versions are WordPress 5.6.2 and WooCommerce 5.0, both latest at the time of the test. All page builders were running the latest version as well.
Stores have been set up with the WooCart Turnkeystore settings. This gives all stores 35 demo products, 81 images for the products and homepage, and subpages for contact, about and legal.
Speed Testing Configuration
The speed testing service is GT Metrix and we used the API. The test location is Frankfurt (Germany), and the browser is Chrome (desktop).
We run the tests ten times per page: homepage, product page, and shop page. We calculate the median result of the page load times.
Why median?
We calculate the median because it is far better than regular average for
If you’re interested in the raw test data, take a look at the full spreadsheet.
Which page builder for WooCommerce should you choose?
If you’re building a new store, we recommend you work with Gutenberg. It’ll only get more powerful and easier to use with every year. If you want a full page builder, then Beaver Builder and Brizy have almost no cost to performance and we can recommend them without reservations.
Many of our themes include a “Business” template that allows you to create a traditionally laid out landing page giving visitors and overview of your business. This is a good starting point however sometimes you might want some more flexibility to create truly unique layouts.
Enter SiteOrigins Page Builder.
SiteOrigin’s Page Builder is a fantastic plugin which allows you to create complex page layouts and pull in content via widgets. It’s well worth watching the video on their plugin listing page to get an idea of the functionality this plugin provides.
In this article, we’re going to use this plugin (along with some of our own) and Canvas (although you can use any theme) to create a custom homepage displaying features, testimonials, products, projects and a recent post.
Install the plugins ↑ Back to top
Woocommerce Page Builder For Elementor Free Download
We’ll be utilising features of the following plugins:
Only the Page Builder is necessary, but we’ll be using the others to add different elements to the page. For brevity, I’m going to assume that if you’re using these plugins then you’ve already added some content to them (products etc).
Create the page and display some products ↑ Back to top
For the first section on this page, we’re going to display a featured ‘hero’ product and the 4 most recent products alongside it. Step one is to create the page itself and set it to use the full-width layout.
To add the products, we’ll be using WooCommerce shortcodes and text widgets placed in regions created by the page builder.
Add a widget row ↑ Back to top
Click the add row button and choose 2 columns to create a row containing 2 equal width columns:
Next, click Add Widget, search for “text” and click it to open the text widget dialog box. Leave the title blank and in the content box add the WooCommerce shortcode: [featured_products per_page=”1″ columns=”1″]. Click Done to add the widget.
Next, add another text widget and use the shortcode: [recent_products per_page=”4″ columns=”2″]. This will add a second widget to the first of the 2 columns we created in our row. Simply drag the second widget into the second column to arrange the products.
Save the page and then preview it. You should see something like this:
At this stage, you might want to play with the number of products displayed and/or the column widths to get the layout just right. To line everything up nicely I’ve tweaked the first column to be 55% wide, making the second 45% by dragging the column separator in the page builder. This is the result:
Testimonials ↑ Back to top
Now that we’ve got some products up on our homepage, let’s display a customer testimonial so that everyone knows how great our customer service is!
Let’s add another row, this time with just a single column. Afterwards, click Add Widget again and search for “Testimonials”. Click the testimonials widget and configure it to display a single testimonial, picking a specific post ID if that’s your preference.
Click Done to add the widget. Again, this will be added to column 1 of row 1, so just drag it down to the new row we just created then save the page. The testimonial will now appear beneath your products and look something like this:
Display features ↑ Back to top
Beneath the testimonial, we’ll display some features. Create another row with 1 column, click Add Widget and search for “Features” and click it. We’re going to display a row of 4 features by specifying the widget options like so:
This will produce a row of 4 features beneath the testimonial and look something like this:
(Please note that in this demonstration I’m using the Icons for Features plugin to display icons for the features).
Display projects and posts ↑ Back to top
Finally, let’s display some projects and some recent posts. Add another row, this time with 2 columns. Click Add Widget and add another text widget. We’ll use this text widget to display projects by adding the shortcode [projects limit=”2″ columns=”2″]. Click Done then drag the widget to the appropriate column.
Click Add Widget again and search for “Post Loop”. This widget is included in Page Builder and as the name suggests will allow you to display a loop of recent posts. There are several options for this widget, for now, we’ll just display the most recent post using the loop.php template file.
Drag and drop the widgets accordingly then beneath your features you should see recent projects and a blog post like so:
Putting it all together ↑ Back to top
Woocommerce Page Builder
All together your page should now look something like this:
Hopefully, this demonstration gives you an idea of what’s possible by simply using the Page Builder plugin, some shortcodes and widgets. This is, of course, a fairly basic example. By adding a little custom CSS, tweaking the layout, introducing a slider, adding more columns etc you can create a truly unique page layout with a variety of content, right from the dashboard.
Customize Woocommerce Shop Page Layout
Enjoy!