WooCommerce is the most popular WordPress plugin to create an e-commerce website. It adds the e-commerce functionality to allow you to sell products — be it physical products or digital products — on your WordPress-based website. Just like regular WordPress sites, you can also create a customized, unique e-commerce website with WooCommerce by customizing the WooCommerce parts such as single product page, cart page, check out page, and so on. The page builder era has made easier for you to customize your WooCommerce site. Some page builder plugins, including Elementor, comes with a WooCommerce builder feature to allow you to customize WooCommerce parts in a visual way.
The WooCommerce Builder of Elementor allows you to create custom templates for the shop page, single product page, product archive pages (categories and tags). There are no options to create custom checkout page, custom cart page, and custom customer account page. If you want to create custom templates for the last mentioned three parts, you can use JetWooBuilder.
JetWooBuilder is an Elementor add-on from Crocoblock designed specifically to create an e-commerce website with Elementor+WooCommerce. In this post, we will compare the capabilities of Elementor’s built-in WooCommerce Builder and JetWooBuilder in customizing your WooCommerce website.
JetWooBuilder vs Elementor WooCommerce Builder: In a Nutshell
Before stepping further, it’s crucial to understand the WooCommerce parts first. In general, WooCommerce consists of the following main parts:
- Shop page (which you can access by going to yoursite.com/shop)
- Single product page
- Product category pages
- Product tag pages
- Cart page
- Checkout page
- customer account page
The layouts/appearances of those parts area controlled by template files which you can found under the templates directory under the woocommerce directory (full path: wp-content/plugins/woocommerce/templates). WooCommerce builders (JetWooBuilder and Elementor WooCommerce Builder in this case), allow you to create custom templates to replace the default templates of WooCommerce. No need to deal with codes as they offer a visual editor.
The WooCommerce Builder feature of Elementor is available on the pro version so you need to use Elementor Pro to be able to use.
In terms of editing experience, there is no difference between JetWooBuilder and Elementor WooCommerce Builder as they use the same editor (the Elementor editor).
Custom Templates You Can Create
As we described above, WooCommerce consists of seven main parts in which the layout of each part is controlled by a template which you can find under the /woocommerce/templates directory. When looking for a WooCommerce builder plugin, it’s crucial to learn which parts you can create the custom templates of. Until version 3.2.1, Elementor only allows you to create three out of seven main parts of WooCommerce (shop page, single product page, and product archive pages). Meanwhile, JetWooBuilder can be used to create custom templates for all main parts of WooCommerce.
JetWooBuilder | Elementor WooCommerce Builder | |
---|---|---|
Shop page | Yes | Yes |
Single product page | Yes | Yes |
Product category pages | Yes | Yes |
Product tag pages | Yes | Yes |
Cart page | Yes | Yes |
Checkout page | Yes | Yes |
Customer account page | Yes | Yes |
Widgets
Both JetWooBuilder and Elementor WooCommerce Builder offers Elementor widgets dedicated to WooCommerce. The offered widgets determine the elements you can add to your templates. Some common elements you can add to your custom templates are product price, add to cart button, product rating, product image, product description, and so on. Please note that you can only see the WooCommerce widgets on the Elementor widgets panel when you have WooCommerce installed and activated on your WordPress site.
JetWooBuilder has more widget collections as it allows you to create more custom templates than Elementor WooCommerce Builder. The widgets are put together based on the custom template they are intended to be used on.
JetWooBuilder Widgets
Widgets for Single Product Template
- Single Sharing
- Single Add to Cart
- Single Attributes
- Single Content
- Single Excerpt
- Single Images
- Single Meta
- Single Price
- Single Rating
- Single Related Products
- Single Reviews Form
- Single Sale Badge
- Single Upsells
- Single Title
- Single Tabs
Widgets for Archive Page Templates
- Title
- Thumbnail
- Tags
- Stock Status
- Sale Badge
- Rating
- Price
- Excerpt
- Categories
- Add to Cart
- Description
- Count
Widgets for Shop Page
- Products Result Count
- Products Pagination
- Page Title
- Products Ordering
- Products Notices
- Products Navigation
- Products Loop
- Products Description
Widgets for Cart Page
- Cart Return to Shop
- Cart Totals
- Cart Empty Message
- Cart Table
- Cart Cross Sells
Widgets for Checkout Page
- Checkout Payment
- Checkout Coupon Form
- Checkout Order Review
- Checkout Billing
- Checkout Shipping Form
- Checkout Login Form
- Checkout Additional Form
Widgets for Customer Account Page
- My Account Logout
- My Account Dashboard
- My Account Registration Form
- My Account Login Form
- My Account Address
- My Account Order
- My Account Downloads
- My Account Details
Global Widgets
- Categories Grid
- Products Grid
- Products List
- Taxonomy Tiles
Elementor WooCommerce Builder Widgets
Widgets for Single Product Page Template
- WooCommerce Breadcrumbs
- Product Title
- Product Images
- Product Price
- Add to Cart
- Product Rating
- Product Stock
- Product Meta
- Short Description
- Product Content
- Product Data Tabs
- Additional Information
- Product Related
- Upsells
Widgets for Archive Page Templates
- Archive Title
- Archive Products
- Archive Description
Global Widgets
- Products
- WooCommerce Breadcrumbs
- Custom Add to Cart
- WooCommerce Pages
- Products Categories
- Menu Cart
- Checkout
- Cart
- My Account
Workflow
Technically, Elementor WooCommerce Builder is a part of Elementor Theme Builder. To start creating a custom WooCommerce template, you can go to Templates -> Theme Builder on your WordPress dashboard. There are two tabs associated with WooCommerce here: the Single Product tab and the Products Archive tab. You can click the Single Product tab to create a custom single product page template. While to create a custom shop page and custom archive pages, you can click the Products Archive tab.
Similarly, to start creating a custom WooCommerce template using JetWooBuilder, you can go to Crocoblock -> Woo Page Builder. You can click the Add New Template button and select the WooCommerce part you want to create the template for on the dropdown menu.
In Elementor WooCommerce Builder, your custom template will be applied right after you publish it. While in JetWooBuilder, you need to enable it from the WooCommerce settings page (WooCommerce -> Settings). You can refer to our previous article to learn how to use JetWooBuilder.
Elementor WooCommerce Builder supports display conditions. You can assign a custom single product page template to products under certain categories or tags. The same feature is not offered by JetWooBuilder, but you can use a different template for certain products as well. With JetWooBuilder installed and activated, you have an option choose a template when adding a new product.
Pricing Options
WooCommerce Builder is one of the features of Elementor Pro. In other words, you need to upgrade to Elementor Pro to be able to use it. The cheapest plan offered by Elementor for the pro version is $59 per year for one website. JetWooBuilder is available at a cheaper price. It costs only $43 per year for a single website. You can also get JetWooBuilder with a one-time purchase option along with other JetPlugins members.
The Verdict
Both JetWooBuilder and Elementor WooCommerce Builder allow you to create a fully customized e-commerce website with WooCommerce. They allow you to create custom templates to replace the default templates of WooCommerce using the visual editor of Elementor, which offers a live editing experience. In terms of capability to create an e-commerce website, JetWooBuilder is a bit ahead of Elementor WooCommerce Builder as it allows you to create more custom templates. You can create custom templates for all WooCommerce main parts as we have mentioned in the opening section, while Elementor only allows you to create three of them. However, if you need a single solution for multiple needs at once, Elementor is a most suited option as it offers more features.
For instance, Elementor comes with a form builder feature which you can connect with marketing tools like MailerLite and ActiveCampaign. Its Theme Builder feature also allows you to create custom header and custom footer for your e-commerce site. Of course, you can also combine the two, but if you have to choose one, you should consider what is your emphasis. If you purely want to create an e-commerce website, then JetWooBuilder is a better option.