Woocommerce Product Builder

Created: 26/04/2017
Latest update: 01/06/2018

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 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. Select categories/product in each step.
  3. Add a new step
  4. General settings of the Builder.
    -Allow customers to add more than one product in each step.
    -Allow customers to select product quantity. By default, quantity is 1
    -Display the preview button. By default, the preview button only appears after the last step.
  5. Select how many products will be displayed on a page in the front-end. There can be many product pages in one step.
  6. 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

  1. Select the button color.
  2. Select the button background color.
  3. Select the button primary text color (moose hover color).
  4. Select the button primary background color (moose hover color)
  5. Select the button style. There are two options Text and Icon
  6. Custom CSS, free the front-end style. Add your own CSS code to design the builder on the front-end. Or you can contact us for a custom work.
  • Email

  1. Enable send email button at preview page.
  2. Your email address which you send email to your customers.
  3. Email subject
  4. Use shortcodes to display the product which is built with WooCommerce Product Builder to email.
    {email} your email address
    {subject} subject of the email sending to customers
    {message_content} the product with small part
  5. Successful sent message

Thank you for your attention! If you have any question, please create topic at FORUM, we will support within 24 hours.