WooCommerce Product Builder

Created: 04/2017

Latest updated: 11/2021 – Updated version: 2.1.1

By: VillaTheme

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:

  • Select product part step by step: allow customers to select product part step by step. You can set which product/categories will be displayed in each step.
  • Compatible: Make sure products in others steps are compatible by using product attributes.
  • Filter products by attributes: WooCommerce product builder allows filtering products by attributes. 
  • Sort products: WooCommerce Product Builder allows customers to sort product by name (A-Z), price and New-Old
  • Send completed products to email: After building a favorite set of products, you can share it with anyone by sending an email.
  • Product builder: build a complete product by picking parts step-by-step. You can select which products and categories appear in each step, then customers can pick among that products/categories.
  • Unlimited steps quantity: You can add as many steps as you want.
  • Step names: Set up step names to inform which product part they are selecting. Example: STEP 1 – CPU, STEP 2 – Main, STEP 3 – RAM…
  • Searching: Quickly find categories and products to put in steps.
  • Add many products in one step: Select to allow customers add only one or many products in each step.
  • Select quantity: Customers are allowed to select the quantity of a product in each step.
  • Preview: After finish the last step, all product part will be listed on a preview page with a total price.
  • Product per page: In steps with many products, you can select to display on many pages, and select how many products will be displayed on each page.
  • Compatible: Using attributes to decide which products will work together.
  • Email complete product: customers can send the completed product to anyone by using the send mail button on the preview page.

System Requires:

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+).
Woocommerce 3.2.x

Download Plugin:

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.


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

  1. Move between steps
  2. Select products and quantity
  3. 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.


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

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.


Product Builders

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.

Guide steps:

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

  • Design: You can set color and background color for WooCommerce Product Builder buttons.

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.


  • Email

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.

Template Usage
/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
/ajax-parts/step.php Step row
/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-image.php Product image
/single/product-price.php Product price
/single/product-short-description.php Product short description
/single/product-title.php Product title
/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.