Custom Product
Configurator — Build Your Own. Price in Real Time.

Customer selects a configuration option

The vanilla JS layer attaches a change event listener to every .cfg-select dropdown on the product page. Each change triggers the debounced updatePrice() function, which first collects all current selections into a key-value object before sending anything to the server.

fetch() fires to the WP REST endpoint with current selections

A POST request is sent to /wp-json/configurator/v1/price with the product ID and the full selections object as JSON. The request is authenticated via a localized nonce — preventing spoofed price submissions. The 180ms debounce ensures rapid option changes don't flood the endpoint.

PHP reads the pricing matrix and calculates the final price

The REST callback retrieves the product's JSON pricing matrix from post meta, extracts the base price, then iterates over each selected option to apply its surcharge modifier. The result is formatted using WooCommerce's wc_price() function and returned as a JSON object containing both the raw numeric value and the formatted HTML string.

JS updates the price display — no reload, no flash

On receiving the JSON response, the JS patches two DOM elements: the visible price display receives the formatted price_html, and a hidden input field stores the raw price_raw value that will be submitted with the add-to-cart form. The update is imperceptible — typically under 200ms from change to display.

PHP REST handler — matrix lookup and price assembly:

register_rest_route( 'configurator/v1', '/price', [
    'methods'  => 'POST',
    'callback' => 'configurator_calculate_price',
    'permission_callback' => '__return_true',
] );

function configurator_calculate_price( $request ) {
    $product_id = absint( $request['product_id'] );
    $options    = array_map( 'sanitize_text_field', (array) $request['options'] );
    $matrix     = json_decode( get_post_meta( $product_id, '_configurator_schema', true ), true );

    $price = (float) $matrix['base_price'];

    // Add surcharge for each selected option from the pricing matrix
    foreach ( $options as $group_key => $option_value ) {
        if ( isset( $matrix['pricing'][ $group_key ][ $option_value ] ) ) {
            $price += (float) $matrix['pricing'][ $group_key ][ $option_value ];
        }
    }

    return rest_ensure_response( [
        'price_raw'  => round( $price, 2 ),
        'price_html' => wc_price( $price ),
    ] );
}

Add to cart — all selections stored as order item meta

On add-to-cart, woocommerce_add_cart_item_data captures the posted selections and the calculated price. A woocommerce_before_calculate_totals hook overrides the cart item's price with the custom value. The selections then flow through woocommerce_get_item_data for cart display and woocommerce_checkout_create_order_line_item for permanent order storage — visible in emails, admin, and customer account.

Cart meta persistence — captures selections and custom price on add-to-cart:

// Attach custom selections and price to cart item data
add_filter( 'woocommerce_add_cart_item_data', 'cfg_add_cart_item_data', 10, 2 );

function cfg_add_cart_item_data( $data, $product_id ) {
    if ( ! empty( $_POST['cfg'] ) ) {
        $data['cfg_options'] = array_map( 'sanitize_text_field', (array) $_POST['cfg'] );
        $data['cfg_price']   = floatval( $_POST['cfg_price'] ?? 0 );
    }
    return $data;
}

// Override WooCommerce price with the custom-calculated value
add_action( 'woocommerce_before_calculate_totals', 'cfg_set_cart_item_price' );

function cfg_set_cart_item_price( $cart ) {
    foreach ( $cart->get_cart() as $item ) {
        if ( isset( $item['cfg_price'] ) ) {
            $item['data']->set_price( $item['cfg_price'] );
        }
    }
}