WooCommerce Product Builder

Support Purchase

WooCommerce Product Configurator appears to be a must-have app for any component and part building pages, particularly PC builder pages. Imagine if customers could go through the process of building a PC and selecting the components and parts they want through steps. That would be incredible, and that is what WooCommerce Product Configurator can provide.

WooCommerce Product Builder is a supportive plugin that allows your customers to build a full product set from small parts step by step. This plugin works as a WooCommerce Product Configurator based on the WooCommerce platform, promising to provide you with many useful features like compatible, email completed product, attributes filters …

 

PLUGIN MAIN FEATURES:

CREATING WOOCOMMERCE PRODUCT CONFIGURATOR PAGE

WooCommerce Product Builder helps create as many WooCommerce Product Configurator pages as you want, builds complete products step by step. You can set up steps, in each step, there will be products. You will decide which products will appear in a step then customers will pick one or more from those products in this WooCommerce Product Configurator plugin.

• Create Product Builder pages: Each product builder will display on the front-end as a page, customers will build their products on this page. You can add as many product builders as you want.
• Multiple steps: Add as many steps as you need, so customers can select products contained in each part.
• Add/ remove steps: Easy to plus or remove steps in each product builder.
• Change step name: Name for each step like STEP 1 – Mainboard, STEP 2 – CPU…
• Select product and categories for each step: You can select which products and categories that will appear in each step and then customers can pick up one (or more) in those steps.
• Search: The search bar available allows you to quickly look for a product or category.
• Icon of step: You can add an icon that stands for a step in general.

 

SETTINGS ON THE PRODUCT BUILDER PAGES

• Text prefix each step:  Quickly name each step with a fixed part and use the shortcode {step_number} to display the number of current steps.
• Description: Add a description to tell more what a product builder page is for, this description will appear under the product builder page name, applied for the Classic template only.
• Sort default: You can sort items on a product builder page in order: Title A-Z, Title Z-A; Price low to high, Price high to low, or Sort by latest. Choose a default option you want.
• Child categories: Display all products in child categories.
• Select multiple products: Allow customers to add more than one product in each step. If this option is disabled, when customers select a product they will be automatically redirected to the next step.
• Quantity field: This option allows customers to select products quantity. If this option is disabled, the quantity will be set as 1.
• Preview button always shows: The preview feature allows customers to view their full product before purchase. The preview page will appear in the last step, by enabling this option you will allow customers to visit the preview page from any step.
• Add to cart always shows: If disable this option, the add to cart button only displays in the final step.
• Remove all buttons: Enable to display the remove all button on the product builder pages.
• Search product form: Enable if you want to display search products form by ajax.
• Product is required for each step: To move to the next step, customers must select at least a product in the previous steps.
• Out of stock products: Enable it to display out-of-stock products on the product builder page.
• Hide zero price product: Enable it to hide the products which have zero prices.
• Remove product title link: Not redirect to the single product page when clicking on the product title on the product builder pages
• Product per page: Set the maximum number of products per builder page.

THE DEPEND FEATURE IN WOOCOMMERCE PRODUCT CONFIGURATOR

Make sure all selected product parts will work properly. The Depend feature works based on attributes values. For example: In STEP 1 – CPU, customers select a CPU with the attribute “Socket” has its value as “LGA 1151”, then in STEP 2 – Mainboard he will find only mainboards which have the socket LGA 1151 (this attribute value must be added to products)

ATTRIBUTE WIDGET IN WOOCOMMERCE PRODUCT CONFIGURATOR

Attribute widgets help your customers to easier to find the product they want to purchase. To enable attribute widgets, visit Appearance/ Widgets, look for WC Product Builder Widgets, and drag/drop them to WC Product Builder Sidebar Area. Please take note that the plugin will not work with custom attributes. To add/edit attributes, please visit Products/ Attributes

• Price Filter: Allow customers to find products in a price range.
• Rating Filter: Allow customers to find products based on ratings.
• Attribute Filter: Allow customers to find products based on attributes. Like color, brand…

PREVIEW PAGE

After finishing building a product, customers can review it again on the preview page. This page will display information about product names, prices, quantity, total price. Then customers can select to check-out or email the completed product.

SEND AN EMAIL CONTAINING SELECTED PRODUCTS USING WOOCOMMERCE PRODUCT CONFIGURATOR

There is a Send email to your friend button on the selected product list page, customers can share their selected products via emails.

• Shortcode: There are 3 shortcodes to help you configure the emails.
  {email}: sender email
  {subject}: email subject
  {message_content}: products information
• “Thank you” message: A message notice customers that their products have been sent successfully.
• Customize email content: Flexible build the email content with available shortcodes.

DESIGN

The plugin offers many options to change the front-end design.

• Template: There are 3 different templates of the product builder page that you can select to display on the front end.
  • Classic
  • Modern
  • Ajax
• Text color: Change the button text color
• Background color: Change the button background-color
• Primary text color: Change the button text hover color
• Primary background color: Change the button background hover color
• Button Icon: Select the button icon style. There are 2 styles of text and icon.
• Custom CSS: Add your own CSS code to configure the front-end style as you want.

PRINT AND PDF

After assembling a set of component products, you can export the selected product list to a PDF file and print it on the preview page.

• Print button: Enable to display the print button on the preview page, and use the print function.
• Download PDF button: Enable to display the Download PDF button on the preview page, and use the download PDF function.
• Show short description: Enable to display the product short description in the PDF file and printed file.
• Header of layout: Customize the content of the header using available shortcodes.
• Footer of layout: Customize the content of the footer using available shortcodes.

OTHER USEFUL FEATURES

• Support control bar on mobile mode: This feature helps to display a control bar and at the bottom of the product builder page, when clicking the menu on the bar, the detailed table of selected products will show up.
• Distance from bottom: Control the space from the bar to the bottom.
• Design control bar: You can change the text color and background color of the control bar.
• Display share link: Copy and share a URL that links to the selected products.
• Remove short share link records after x day(s): Automatically clear the short share link after a certain day you set.
• Custom CSS: Design the product builder page as you want.
• Support service.

System Requires:

1. WordPress 5.0+
2. PHP 7.0+
3. WooCommerce 7.0+

 

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

• Step 1: Add new
• Step 2: Products Configuration
• Step 3: General
• Step 4: Configure plugin settings
• Step 5: Product (Pagination and Depend feature – optional)
• Step 6: Set up attribute filters (optional)

Step 1: Go to Dashboard > Product Builders > Add new

Step 2: Specify product builder title and set up “Products Configuration“

This section displays the steps you’ve created along with their individual settings.

• The left panel lists all the created steps. In this panel:
  • Click the red trash bin to remove a step
  • Click the edit button to see their its setting options
  • Click the green Add New Step to add a new one

Learn all the options for one step within step settings in this documentation

 

Step 3: Configure “General” section

Learn about this section and all of its options in this documentation

 

Step 4: Configure plugin settings

See this guide and configure the plugin as per your needs.

 

Step 5: Set up Depend feature (if needed)

Paginate the products in a steps with “Product per page” option

As for the Depend feature – See this guide for details and specific steps

 

Step 6: Attribute filters

Learn how to add and use attribute filters in this guide.

 

 

Shortcode – Show product builder on frontend

After you’re happy with the product builder page, use the generated shortcode to show it on front end.

 

Guide steps:

1. Copy the shortcode

2.  Go to Pages > Add new product builder page.

3. Name for the page, add shortcode there and save.

 

Add to Cart and Preview

1. Product builder templates on frontend
   • Classic
   • Classic Layout 2
   • Modern Layout 1
   • Modern Layout 2
   • Modern Layout 3
   • AJAX Layout
   • AJAX Layout 2
2. User’s behavior

 

Classic

Classic Layout 2

 

Modern Layout 1

Modern Layout 2

 

Modern Layout 3

 

AJAX Layout 1

AJAX Layout 2

 

User’s behavior

• Customers simply need to select the products they want in each step and add them to their cart. If they wish to preview their selections, they can click the Preview button (this button is not available in AJAX templates)
• Once all steps are completed, or if they click the Preview button, customers will be directed to the preview page. Here, they will see a summary of all the products, quantities, prices, and the total cost. They can either add all products to their cart for checkout or email the complete selection. To customize the preview page options, head to the Settings section.

 

 

Edit product builder URL

You have two options to edit the URL:

1. Edit the Slug: If you want to change the last part of the URL (e.g., “configure-your-pc” in this example: http://mystore/productbuilder/woo_product_builder/configure-your-pc), you can easily edit it here in the Permalink field and modify the slug as needed

 

2. Edit the Base URL
To change the base URL (e.g., “woo_product_builder” in the same link), follow these steps:

1. Navigate to your WordPress Settings > Permalinks.
2. Modify the base URL from there.

 

 

The Depend feature

Depend feature is configured under “Products” section inside a product builder back end page.

The “Depend” feature in WooCommerce Product Builder helps you connect products across different steps based on shared attributes (note: this works with product attributes, not custom attributes).

Step 1: Enable Depend feature

Step 2: The step you see on the left panel (under “STEP” column) is the current step. Under the Depending On field, select which previous steps this step should depend on. Each step in your product builder can be linked to one or more previous steps using this field. A step can depend on multiple earlier steps, but only those that come before it. For example, Step 4 can depend on Step 1, Step 2, and Step 3, but it cannot depend on Step 5 or any later steps.

Step 3: Choose the attribute

 

Here’s how it works:

Let’s say you’re creating a PC Builder with multiple steps for selecting components.

• Step 1: Choose a Motherboard
• Step 2: Choose a RAM
• Step 3: Choose SSD
• Step 4: Choose a VGA

Now, you want to ensure that the memory standard options in Step 4 are compatible with the motherboard chosen in Step 1 and the RAM selected in Step 2.

In this case:

• Step 4 (VGA) should depend on Step 1 (Motherboard) and Step 2 (RAM).
• This means the available memory standard options will be filtered based on the motherboard and RAM chosen in the earlier steps.

Using the “Depending On” field, you can set Step 4 to depend on Step 1 and Step 2, ensuring customers only see compatible memory standard for their selected components.

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 Filters. 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 Builder Page

• Product Builders list
• Product Builder page editor
  • Products Configuration
  • General
  • Products

 

Product Builders list

Create new products builder pages, edit existing product builder pages in the list.

Go to Dashboard > Product Builders. You can Add new/ Remove product builder pages here.

1. Add new: Click to add a new product builder page.

2. Existing product builder page: The product builder pages which are generated on your site.

• “Title” column
  • Edit: Go to the editing page of the product builder product
  • Quick Edit: Edit title, slug, status, published date, add password or mark private of the product builder right on this Product Builders list
  • Trash: Remove a product builder
  • Duplicate: Clone the current product builder
• “Shortcode” column: Simply click the shortcode to copy it, then you can place it anywhere to display the associated product builder
• “Date” column: This column simply displays the published date of each product builder for overview

Product Builder page editor

Sections are movable and collapsible

Products Configuration – Settings for Step

This section displays the steps you’ve created along with their individual settings. The left panel lists all the created steps. In this panel:

• Click the red trash bin to remove a step
• Click the edit button to see their its setting options
• Click the green Add New Step to add a new one

And scroll down to learn all the options for one step

1. Step icon: Choose an image to make it step icon, to represent this step visually
2. Select Categories: Pick product categories that will be included in this step. Use the search field for quick search, and click a specific category to select it
   
3. Select Products: Similar to “Select Categories”, choose specific products to be part of this step.
   
4. Description: Add details or instructions for this step if needed
5. Error description: Enter a message that will be shown if no product is found within this step.

 

“General” section

Options within this section are applied to all steps inside the current product builder.

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 the step is.
3. Sort default: You can sort items on a product builder page in order: Title A-Z, Title Z-A; Price low to high, Price high to low, or Sort by latest. Choose a default option you want.
4. Children categories: Get all products in children categories
5. Add many products in step: Allow to select more than one product in a step.
6. Quantity field: Enable to show the quantity option if the customer needs more than one. Deactivate this option if you default the quantity 1.
7. Preview button always show: Show the preview button in every step.
8. Add to cart button always show: If disable this option, the add to cart button only displays in the final step.
9. Remove all buttons: Remove all the selected items in all steps.
10. Search product form: Display search products form by ajax
11. Product is required for each step: Enable this option if each step is mandatory to choose. The customer can not skip any steps.
12. Out of stock products: Enable it to display out-of-stock products on the product builder page.
13. Hide zero price product: Enable it to hide the products which have zero prices.
14. Remove product title link: Not redirect to the single product page when clicking on the product title on the product builder pages

Products section

Settings for pagination and Depend feature

1. Product per page: Paginate the products in a steps
2. Depend: As for the Depend feature – See this guide for details and specific steps

 

 

Settings – Design

Go to Dashboard >> Product Builders >> Settings >> Design

In the Design tab, you can choose the product builder templates, customize the button on the product builder page, customize on mobile mode, and other advanced features.

• Template
• Button
• Mobile
• Advanced
• Custom CSS

 

Template

Choose from 7 available templates to define how your product builder appears on the frontend. Refer to our documentation for a detailed preview of each template and their differences.

 

Button

1.  Design “Load step” button:
   • Default status: Set the initial state of the “Load Step” butt
     • “Load step” button type: Choose how the button appears – icon or text
     • “Add” button text: Specify the label for the “Add” button
     • “Add more” button text: Specify the label for the “Add more” button
     • Text color: Set the button’s text color
     • Background color: Choose the button’s background color
     • Border width: Adjust the border thickness. If a border is set, its color will match the button text color
   • On hover: Customize the button appearance when hovered
     • Text color: Set hover text color
     • Background color: Choose a hover background color
2. Design Button
   • Default
     • Button icon: Choose whether to display an icon or text for certain buttons (AJAX templates use icons for email, share, print, and PDF actions)
     • Text color: Set the default text color
     • Background color: Select the default background color
   • Button Primary
     • Text color: Customize the primary button text color
     • Background color: Choose the primary button background color
3. Design Preview page button
   • Default
     • Text color: Set the default text color
     • Background color: Choose a background color
     • Border width: Adjust the border thickness (border color will match text color if applied)
   • Hover state
     • Text color: Define hover text color
     • Background color: Select a hover background color

 

 

Mobile

Optimize the product builder for mobile users.

1.  Distance from bottom: Adjust the control bar’s distance from the bottom of the screen
2. Control bar
   
   
   • Text color: Customize control bar text color
   • Background color: Set control bar background color

 

 

Advanced

1. Display share link: Toggle to show or hide the share link
2. Display get short share link for customer: Enable or disable short links for customers (default: always visible for admin)
3. Remove short share link records after x day(s): Set the number of days before short share links are automatically deleted
4. Clear session: Reset session data for a fresh start after customer adds a product builder to cart
5. Clear filter: Remove applied filters after being selected

 

 

Custom CSS

For developers and advanced users, apply custom CSS to further style and modify the product builder according to your needs.

 

 

Settings – 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 a shortcode to write the email content.

6. Message thank you: The messages display after sending email.

 

 

Settings – Print & PDF

After assembling a set of component products, you can export the selected product list to a PDF file and print it on the preview page.

 

Scroll down to learn all options inside this setting page.

1. Print button: Enable to display the print button on the preview page, and use the print function.
2. Download PDF button: Enable to display the Download PDF button on the preview page, and use the download PDF function.
3. Show short description: Enable to display the product short description in the PDF file and printed file.
4. Header of layout: Customize the content of the header using available shortcodes.
5. Footer of layout: Customize the content of the footer using available shortcodes.

 

 

Plugin	Author
Elementor	Elementor
WPML	OnTheGoSystems
Polylang	Frédéric Demarle
Woodmart	XTEMOS

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

 

Follow this guide on how to override VillaTheme plugins’ templates via a theme.

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