The Product Builder element makes it easy to insert individual aspects of a single product page in any order you'd like. Price, title, images, description - all completely modular.
Using a WooCommerce page builder can help you to create an eCommerce site that both you and your customers are happy with. In this guide, we’ll introduce you to the WooCommerce plugin. Then we’ll show you how to use Beaver Builder to quickly and easily create your online storefront.
Please note that WooBuilder for PageBuilder Pro is an add-on plugin for our PageBuilder Pro plugin.
We have a new plugin called WooBuilder Blocks that lets you customise the WooCommerce Product Page with the WordPress Block Editor, Gutenberg, and requires no page builder to work.
WooCommerce is developer friendly, too. Built with a REST API, WooCommerce is scalable and can integrate with virtually any service. Design a complex store from scratch, extend a store for a client, or simply add a single product to a WordPress site—your store, your way. Generating leads is half the battle; converting leads into sales is the challenge. How you showcase your products can make all of the difference to a customer’s decision-making process. With the Avada WooCommerce Builder, you can design successful single product pages that will accurately showcase your products and branded content.
Click here for more information on WooBuilder Blocks.
Take control of your product page, use full width rows, parallax backgrounds, ken burns effect, animated columns, video backgrounds and lot more to create engaging product layouts, and all this without touching a single line of code! Paint brush studio.
Product Builder for WooCommerce is a plugin that allows your customers to build a full product set from small parts step by step. The plugin works base on WooCommerce with many useful features like compatible, email completed product, attributes filters.
Following modules are added to the Pootle Pagebuilder live editor to make designing product layouts a ton easier…
WC – Add to Cart Button
WC – Short Description
WC – Product tabs
WC – Related products
WC – Product images
WC – Product rating
WC – Product reviews
WooCommerce builder currently needs Woocommerce addon enabled in Pootle Pagebuilder Pro.
How to Customise WooCommerce Product Page Tutorials
Usage
Install and activate the plugin
Create a new product ( or edit existing product ).
Click bright red Product Builder button.
You’ll be taken to the live editor, happy building!
Installation
Installing “WooBuilder” can be done either by searching for “WooBuilder” via the “Plugins > Add New” screen in your WordPress dashboard, or by using the following steps:
Make sure WooCommerce addon is enabled in WordPress admin > ‘Page Builder’ > ‘Modules’.
Upload the ZIP file through the ‘Plugins’ > ‘Add New’ > ‘Upload’ screen in your WordPress dashboard.
Activate the plugin through the ‘Plugins’ menu in WordPress.
FAQ
Where can I get help & support
For help & support please head over to http://docs.pootlepress.com where there are loads of helpful articles and you can submit a support ticket.
How to enable Product builder on an existing product?
Edit the product, check “Enable Product builder” checkbox above Update button, then click Update button.
How to revert to default WooCommerce product layout?
Edit the product, uncheck “Enable Product builder” checkbox above Update button, then click Update button.
Reviews
Woo Builder Blocks adds very little value and requires Caxton which is so flaky and buggy that it cost us hundreds of hours of wasted time and frustration until finally we have given up and are rebuilding anything that Caxton and Woo were involved with on our site. A lot of content was put together before we figured out why our site was suddenly completely unstable and pages kept corrupting and falling apart. Save yourself the agony and move along now.
Add new Product builders
Go to Dashboard/ Product Builders/ Add new/ to add a new product builder page.
Enter the product builder page name and configure products and categories for each step.
It’s already done, now you can see it in front-end:
Customer choose products
On front-end page
Move between steps
Select products and quantity
List of selected products, customers can remove selected product here.
Preview page
After finish all steps, or by click on the Preview button, customers will be redirected to the preview page. All products, quantities, prices and the total price will be listed here. Customers can choose to add all product to cart and then checkout, or send the complete product via email.
Compatible
Elementor Woocommerce Builder
How to use the Compatible feature on WooCommerce Product Builder?
Please keep in mind that WooCommerce Product Builder uses Attribute to detect which products are compatible with different steps.
At first, you need to create attributes and add these attribute to your products.
To add new attributes go to Dashboard/ Products/ Attributes
In this picture, I create a socket attributes.
Please take note that the plugin will not work with custom attributes.
After successful create a new attribute, please go to product pages to add attributes to products.
Now I will add the attribute “Socket” to 2 different products in 2 different step of WooCommerce Product Builder.
Click on the text “Custom product attribute”, look for the attribute that you have just created, then click Add.
After successful add an attribute to the product, click on “value(s)” to add a value for that attribute. You can select an existed value or create a new one.
Repeating the progress above with others products. In this case, I added the value “LGA 1151” of the attribute “Socket” for some products in “Main” and “CPU” categories.
Go to Product Builder Edit page at Dashboard/ Product Builder/ *Your Product Builder*
Wordpress Product Builder
At this page, I have “Mainboard” categories at step 2, after the CPU categories at step 1.
Scroll down the page, you will find the defending part. Assign Main to CPU.
Done. Now after customers select a CPU with socket LGA 1151 at the first step. They will find only mainboards with socket LGA 1151 in the second step.
Attribute Widgets
Attribute Widgets helps customers to search product by attributes on front-end. Evernote premium code.
Elementor Woocommerce Builder
To display attribute widgets on front-end, go to Dashboard/ Appearance/ Widgets and look for WC Product Builder Price Filter, WC Product Builder Rating Filter and WC Product Builder Attribute Filter. Drag and drop these widgets into WC Product Builder Sidebar. Take note that you may need to add the widget WC Product Builder Attribute Filter many times because each attribute will cost a widget.
Woocommerce Product Builder
In each widget settings, you can edit the widget title and click on the Attribute to select an attribute slug.