Latest updated: 11/2021 – Updated version: 2.1.1
Thank you for purchasing our plugin. If you have any questions that are beyond the scope of this documentation, please feel free to request support at our Support Forum. Thanks so much!
What is Woocommerce Product Builder?
Woocommerce Product Builder is an essential plugin which helps build a full product set from small components as you want. Therefore, the powerful plugin will certainly bring your website a huge profit. With the friendly user interface, Woocommerce Product Builder allows:
Make sure that those limits to a minimum as follows in order for free-trouble while installing:
WordPress 4.2.x or higher (Recommended WordPress 4.5+).
Go to Plugin/ Add New/ Upload Plugin/ Choose file/ select the plugin zip file/ click “Install Now”/ click “Active plugin”.
Done! Let’s start using the plugin.
Video install and set up WooCommerce Product Builder
After installing and activating the plugin, create your first product builder page.
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:
On front-end 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.
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*
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 helps customers to search product by attributes on front-end.
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.
In each widget settings, you can edit the widget title and click on the Attribute to select an attribute slug.
All product builder pages will be listed in Dashboard/ Product Builders. You can Add new/ Remove product builder here.
Adding a new product builder or click on any product builder to edit it.
1. Product Builder name, for example: Build your dream PC.
2. Permalink: The URL of the product builder page, you can edit the URL
3. Shortcode: A shortcode of the product builder is generated that allows you to put the product builder everywhere.
3.1. Copy the shortcode
3.2. Go to Pages > Add new product builder page.
3.3. Name for the page, add shortcode there and save.
4. Select categories/products: Show categories/ products to select for each step.
5. Search product/category: This tool helps you to search for a product/category quickly when you have a lot of products/categories.
6. The visible area of products and categories: When you select categories/products in (4), the categories/products will show in this area for you to choose.
7. Add a new step: Click to add a new step, a box appears to add the name of the step, you can edit the name, change categories/products in each step by clicking on that category/product in that step.
1. Text prefix each step: Auto names the step with the certain text prefix and suffix.
2. Description: Enter the step description to tell more what step is.
3. Children categories: Get all product in children categories
4. Add many products in step: Allow to select more than one product in a step.
5. Quantity field: Enable to show the quantity option if the customer needs more than one. Deactivate this option if you default the quantity 1.
6. Preview button: Show the preview button after a step is selected. Deactivate it if you want to show the preview button just in the final step.
7. Preview button always show: Show the preview button in every step.
8. Remove all button: Remove all the selected items in all steps.
9. Search product form: Display search products form by ajax
10. Product is required each step: Enable this option if each step is mandatory to choose. The customer can not skip any steps.
11. Product per page: The Number of products is shown per page.
12. Depend: Select how will products in different steps compatible with others. The plugin will use the attributes to know which products are compatible.
Set up WooCommerce Product Builder settings at Dashboard/ Product Builder/ Settings
1. Template: You can select available product builder displays in 3 templates: Classic; Modern; Ajax.
2. Text color.
3. Background color.
4. Primary text color.
5. Primary background-color.
6. Button icon.
7. Distance from bottom: The space between the bottom and the control bar.
8. Control bar text color: Set color for the text on the control bar.
9. Control bar background color: Set color for the background on the control bar.
* Design the control bar on mobile
10. Display share link: Enable this option to show the share link of the selected products in the preview page.
11. Display get short share link for customer: Enable to display the Get short share link on the front end applied for Ajax template
12. Remove short share link records after x day(s): Set after x day(s) the short share link records will be removed.
13. Clear Section: Clear session after add to cart
14. Clear filter: Clear filter after selecting.
15. Custom CSS: Re-design the product builder page as your desire.
1. Enable: to show the email button on the preview page, click that button to send an email including the selected products.
2. Header: Add the default header.
3. From: Enter certain address the email sends from.
4. Subject: Enter the subject of the email.
5. Body Message: Add the content of the message, you can use shortcode to write the email content.
6. Message thank you: The messages display after sent email.
|/ajax-parts/empty.php||Placeholder when no product is added|
|/ajax-parts/product.php||Display product added in step|
|/ajax-parts/product-modal.php||Display product in list to select|
|/shortcode/single-product-builder.php||Wrapper template when use shortcode (to exclude get_header())|
|/single/add-to-cart-simple.php.php||Select form with simple product|
|/single/add-to-cart-variable.php||Select form with variable product|
|/single/product-short-description.php||Product short description|
|/single/variation-add-to-cart-button.php||Select button for variation|
|/archive-product-builder.php||Product builder archive page|
|/content-product-builder-preview.php||Preview page after select all step|
|/content-product-builder-preview-popup.php||Popup to send email in preview page|
|/content-product-builder-single.php||Step con tent|
|/content-product-builder-single-2.php||Step con tent with modern template|
|/content-product-builder-single-ajax.php||Step con tent with AJAX template|
|/product-template.php||Product content wrapper|
|/single-product-builder.php||Wrapper template when use post type|
Thank you for your attention! If you have any question, please create topic at FORUM, we will support within 24 hours.