Adding a configurable product

What Are Configurable Products?

A Configurable Product is a special WooCommerce product type called Probo Configurable Product. Unlike standard WooCommerce products, Configurable Products:

• Display an interactive configurator on the product page where customers select options step by step.
• Calculate the price dynamically based on the selected configuration — you don't set a WooCommerce price.
• Allow customers to upload their own artwork through the Probo uploader.
• Show a "Configure & add" button instead of the standard "Add to cart" button.

The configurator communicates with the Probo API through a secure proxy on your server, so your API key is never exposed to the browser.

If you're selling pre-designed products with fixed artwork where you control the price, see Using API Products instead.

Step 1a: Creating a Configurable Product using the Import

You can manually create a product, or use the Probo Product section under WooCommerce → Probo Products. The first time, you need to run a full sync; this might take a while. Afterwards, you can import a product via the import button OR select multiple products and run the action bulk action Import to WooCommerce Then, you should start at step 3

Step 1b: Creating a Configurable Product Manually

1. Go to Products → Add New.
2. In the Product Data dropdown, select Probo Configurable Product.
3. Notice that the standard WooCommerce pricing fields are hidden — the price comes from the Probo API, not from WooCommerce.

Step 2: Configure the Probo Connect tab

1. Click the Probo Connect tab in the Product Data panel.
2. In the Probo API Product Code dropdown, start typing to search. This searches the Probo products catalog (the configurator product catalog, not the API products catalog used by API Products). Select your product.

Step 3: Set the surcharge multiplier

In the Surcharge multiplier field, enter a price multiplier to apply on top of Probo's price:

• 1.1 = 10% markup
• 1.25 = 25% markup
• 1.0 = no markup (sell at Probo's price)

This is applied per product and overrides the global Default Margin from Probo Settings.

Step 4: Choose the uploader type

In the Select File Uploader type dropdown, choose how files are handled:

• Probo Uploader (Customer Upload) — Your customer uploads their artwork through an upload widget that appears in the cart. This is the most common option for Configurable Products.
• No file — No file upload is required.

Step 5: Configure the Advanced Editor (optional)

The Advanced configurable options field lets you control which configurator steps are visible and set default values. Click Open Editor to launch a visual editor where you can:

• Show or hide specific configurator steps.
• Set default values for options.
• Control the configurator flow.

This is optional — by default, all steps from the Probo product are shown.

Step 6: Enable Probo Shipping

If you have the Probo Shipping method enabled, you'll see a Probo Shipping Configuration section:

• Use in Probo shipping calculation — This is checked by default for Configurable Products. The shipping cost is calculated based on the customer's configuration.

Step 7: Publish

Click Publish. Your Configurable Product is now live with the interactive configurator.

The Configurator on Your Store

When a customer visits a Configurable Product page, they see an interactive configurator widget. Here's how it works:

1. Option selection — The customer works through steps, choosing options like material, size, finish, and quantity. Each step presents the available choices.

2. Summary — After completing all steps, the customer sees a summary with:

   • Selected options — A recap of all the choices they made.
   • File specifications — What kind of artwork file is needed (dimensions, format).
   • Delivery dates — Available delivery options with pricing (in Advanced price mode).
   • Price — The calculated price based on their configuration.

3. Add to cart — The customer clicks the "Add to cart" button (or your custom button text) to add the configured product to their cart.

Configurator Display Options

There are two ways the configurator can appear on the product page:

Autoload (default)

When Auto load configurator is enabled in Advanced Settings (it is by default), the configurator automatically renders on the product page at the position specified by the Configurator Render Action setting (default: woocommerce_single_product_summary at priority 25).

This is the easiest option — no additional setup needed.

Shortcode

If you prefer manual control over where the configurator appears:

1. Go to WooCommerce → Settings → Probo Settings → Advanced.
2. Uncheck Auto load the configurator.
3. Place the [connect_configurator] shortcode in your product description, a page builder block, or a template file.

Examples:

[connect_configurator]

Price Display Modes

The price display mode is set in WooCommerce → Settings → Probo Settings → Configurator Settings:

Basic mode

Shows a simple price after the customer completes their configuration. No delivery date options are displayed — the cheapest delivery date is used by default.

Advanced mode

Shows delivery date options with rush pricing. Customers can choose between different production speeds:

• Standard delivery — Cheapest option, standard production time.
• Rush delivery — Faster production at a higher price.

The delivery dates section appears as part of the configurator summary, letting customers see exactly when they'll receive their order and at what price.

Template Overrides

If you need to customize the HTML output of the configurator or cart display, you can override templates in your theme. Copy the template file to your theme's probo-connect directory:

To override a template:

Copy the file from the plugin's templates/ directory to your theme:

your-theme/probo-connect/configurator/connect-configurator.php
your-theme/probo-connect/cart/probo-selected-configurator-options.php

This follows the standard WooCommerce template override convention.