WooCommerce Price Calculator for Custom Products | Setup Guide

Start with a simple WooCommerce product that represents the custom item being configured. In the demo, the product is named Custom Logo T-Shirt Demo and uses a $24 base price.

The calculator can then collect the product options, calculate the configured price, and pass a readable summary into the WooCommerce workflow.

Keep the main product choices in the same step so the shopper can see the effect of each selection immediately. In the form style settings, apply the Clean cards theme preset, then add a native two-column row: Dynamic Image on the left and product options on the right.

The Dynamic Image item uses its main image field for the default product preview. The variation images are managed later from that same item, in its Image layers table.

This works especially well for custom products because the buyer does not have to move between steps just to compare colors, logos, and pricing.

Create one option group for colors and one Icon Picker for logos. The demo colors are red, yellow, blue, and green. The logo choices are palm, teddy bear, skull, and sun.

Use radio-style behavior for each group so the shopper chooses exactly one color and exactly one logo. This prevents impossible combinations and makes the image logic easier to maintain.

Open the Dynamic Image item from the visual builder. Keep the default red palm T-shirt in the main Image field, then scroll to the Image layers table inside the same item editor.

This table is where the extra variation images are managed. Each row is one image that can appear above the base image when its visibility conditions are true.

For the T-shirt demo, red_palm.png is the base image. The remaining 15 combinations are added as layer rows, such as Blue sun, Green skull, or Yellow teddy.

After clicking the eye icon on a layer row, the plugin opens the layer visibility condition builder. This is the screen that controls when that specific image appears.

For blue_sun.png, leave the operator set to All conditions must be filled. Then add two rows: the Blue color Image item must be selected, and the logo Icon Picker must be equal to Sun.

The logo price is not used to decide which image appears. The Dynamic Image layer checks the selected Icon Picker label, so clear labels such as Palm, Teddy, Skull, and Sun matter.

Keep the illustrated size choices: M adds 0, L adds 2 and XL adds 4. For a Sun logo (+3) and size L (+2), the teaching unit price is 24 + 3 + 2 = 29. For quantity 3, the expected line subtotal is 29 × 3 = 87 before store taxes, shipping or discounts. These are example product amounts, not plugin prices.

Decide which item supplies the configured product price and which value supplies the cart quantity. Do not send 87 as the custom unit price and also send quantity 3: that would count quantity twice. Check the payload for your actual form, especially when options are separate priced items.

In the inspected item editor, WooCommerce product selects an existing catalogue product. Use current woo product assigns the product detected on a WooCommerce product page; its documented scope is that page, not an unrelated landing page. Choose the association appropriate to where you embed the form.

In form settings, the inspected Woo Commerce controls include Add selected items to cart and Add summary as product attribute. The cart setting says that all priced items must be products from the WooCommerce catalogue: review every priced option’s association instead of assuming that several independent items become one configured product line. Use your own form ID in the shortcode; a summary alone does not prove the price handoff.

In the inspected server code, each submitted product price becomes custom_price, quantity is passed separately to add_to_cart, and the cart calculation calls set_price with that custom price. This explains why the submitted price must represent the unit amount; the actual frontend payload still needs a test with your form.

On the separate test site, select Sun and L with quantity 3. First check the form’s intended result, then inspect the cart product, unit price 29, quantity 3 and line subtotal 87. If the form displays a line total, label it accordingly; it must not be mistaken for the unit price sent to WooCommerce.

Repeat with quantity 1, then change or hide the optional logo upgrade according to your conditions. A hidden choice must not leave a stale charge. Check an empty required quantity, then return from the cart to the form and confirm that current selections and the cart amount agree. These are expected results to reproduce, not observed cart tests for this article.