The product customizer runs as a <cv-customizer> web component on the page. It fires DOM events as the customer works, and exposes a ChamevoJS instance you can read directly. Use these to mirror the live price in your own plugin, sync customization data, or trigger custom logic.

This is the most common request from third-party plugins: showing the live customizer price somewhere else on the page.

Before you start

• This is a client-side (browser) API. All code runs on the product page, not in PHP.
• Identifiers below are real JavaScript names from ChamevoJS. Use them exactly as written.
• The plugin mounts <cv-customizer> with JavaScript, so the element may not exist the moment your script runs. See Wait for the element to exist below.
• Even once the element exists, its chamevo instance and price are only available after the cvReady event fires.

Get the customizer instance

There are three ways to get a reference to the customizer, depending on how it was added to the page.

a) Query the element (WordPress and WooCommerce). The Chamevo plugin adds the element for you, so this is the usual approach on a product page:

const customizer = document.querySelector('cv-customizer');

The plugin mounts the element with JavaScript, not as static HTML. So querySelector can return null if it runs before the element appears — see Wait for the element to exist.

b) Keep the return value of createCustomizer(). If your own code creates the customizer, the factory returns the element:

import { createCustomizer } from '@chamevo/customizer';

const customizer = createCustomizer('#customizer', {
  stageWidth: 900,
  stageHeight: 600,
});