How do I install the 3D configurator on WooCommerce?

Use wp_enqueue_script() in your functions.php to load the component, then paste the tag in your product template, a shortcode, or a Gutenberg HTML block. No plugin required.

Does it work with Elementor and page builders?

Yes. With Elementor, simply paste the tag in an HTML widget. Since the script is loaded globally, no additional configuration is needed.

How do I connect WooCommerce variation selects?

Add the viewer-3dvue attributes directly on your native WooCommerce variation elements, or on custom swatch buttons. The component listens automatically : no JS to write.

Can I capture the configured product as an image for the order?

Yes. Use captureToBase64() to get a PNG image of the current render and store it in a hidden field of the WooCommerce order form.

Developer guide : WooCommerce

A 3D configurator
on WooCommerce.
2 lines of code.

<viewer-3dvue> is a native Web Component. No dependencies, no additional plugin. It integrates into any WooCommerce template : single-product.php, a shortcode, or a custom Gutenberg HTML block.

Zero plugin required

Compatible WP 6+ / WC 8+

HTML attributes or JS API

Works with Elementor

add_action('wp_enqueue_scripts', function() {
  wp_enqueue_script(
    'viewer-3dvue',
    'https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js',
    [], null, true
  );
});

<viewer-3dvue
  name="monViewer"
  src="https://app.3dvue.fr/view?p=AB01-CD02"
></viewer-3dvue>

<!-- That's it. -->

+94%

conversion lift on product pages with a 3D model

Source: Shopify

−40%

fewer returns after 3D product visualisation

Source: Shopify

66%

of buyers feel more confident with a 3D configurator

Source: 2023 Study

82%

of visitors activate the 3D view when available

Source: Cappasity

1

Register the script

Use wp_enqueue_script() in your functions.php to load the component. The final true loads it in the footer : recommended to avoid blocking rendering.

The CDN script above is public. You can also include it via an Elementor HTML widget or WPCode : in all cases, the src attribute on the component is the URL specific to your configurator, provided by 3DVue at delivery.
functions.php
```
add_action('wp_enqueue_scripts', function() {
  wp_enqueue_script(
    'viewer-3dvue',
    'https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js',
    [], null, true
  );
});

// Or via WPCode : HTML snippet
// <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
```
2

Place the component

Paste the tag in your product template, in a PHP shortcode, or in a Gutenberg HTML block. Two required attributes: name (unique identifier) and src (your configurator URL provided by 3DVue).

With Elementor, simply paste the tag in an HTML widget. Since the script is already loaded globally, no additional configuration is needed.
single-product.php or HTML widget
```
<viewer-3dvue
  name="monViewer"
  src="https://app.3dvue.fr/view?p=AB01-CD02"
></viewer-3dvue>


<viewer-3dvue
  name="monViewer"
  src="https://app.3dvue.fr/view?p=AB01-CD02"
  debug
></viewer-3dvue>
```

Connect WooCommerce variations

Add the viewer-3dvue attributes on your native WooCommerce <select> variation elements or on your custom swatches. The component listens automatically : no JS to write.

<!-- On an existing WooCommerce select -->
<select
  name="attribute_pa_colour"
  viewer-3dvue="monViewer"
  viewer-3dvue-change="setMaterial"
  viewer-3dvue-mesh="1,2"
>
  <option value="0n">Black</option>
  <option value="1a">White</option>
  <option value="2b">Natural oak</option>
</select>

<!-- Or on a custom swatch button -->
<button
  viewer-3dvue="monViewer"
  viewer-3dvue-clic="setMaterial"
  viewer-3dvue-meshs-materials='{"1":"2b","3":"0n"}'
>Oak / Black</button>

setMaterial on click : custom swatches

Connect any button or swatch. Multiple materials can be applied simultaneously in a single action.

<button
  viewer-3dvue="monViewer"
  viewer-3dvue-clic="setMaterial"
  viewer-3dvue-meshs-materials='{"1":"0n","3":"2b"}'
>
  Grey velvet fabric
</button>

// {"meshIndex": "materialId"}
// Index 0 reserved : starts at 1

setMaterial on <select> : native variations

Add 3 attributes to your existing WooCommerce variation <select>. The viewer syncs automatically.

<select
  name="attribute_pa_colour"
  viewer-3dvue="monViewer"
  viewer-3dvue-change="setMaterial"
  viewer-3dvue-mesh="1,3"
>
  <option value="0n">Black</option>
  <option value="1a">White</option>
</select>

// viewer-3dvue-mesh="1,3"
// applies to mesh 1 AND mesh 3

querySelector Get the component reference : the starting point for the entire JS API

const viewer = document.querySelector('viewer-3dvue[name="monViewer"]');

// Sync with WooCommerce variations
document.querySelector('.variations select')
  .addEventListener('change', (e) => {
    viewer.setMaterial({ "1": e.target.value });
  });

setMaterial() Apply materials to one or more meshes of an object

// On object 0 (default)
viewer.setMaterial({ "1": "0n", "3": "2b" });

// On a specific segment (multi-part product)
viewer.setMaterial({ "1": "1a" }, 1);
// setMaterial(materialList, objectIndex = 0)

loadModel() / addModel() / removeModel() Dynamic model management : for configurable products with optional components

// Load a different model (e.g. shape change)
viewer.loadModel("AB01-CD02");

// Add a component to the existing model
// E.g: add an armrest, a shelf, a leg
viewer.addModel("EF03");

// Remove a component (index starts at 0)
viewer.removeModel(1);
// ⚠ Cannot remove the last remaining segment

captureToBase64() Capture the current render as a base64 image : for confirmation emails or WooCommerce order summaries

viewer.captureToBase64();

viewer.addEventListener("onCaptureBase64Complete", (e) => {
  const { base64, error } = e.detail;
  if (error) return;
  // Store in a hidden field for the WC order
  document.querySelector('input[name="config_preview"]').value = base64;
});

SVG API : Advanced customisation

Text, logos, proofs.
All in SVG.

The SVG API lets you add text and images directly onto the 3D product via dropzones defined in the model. Used for customisable products : marking, logo upload, text engraving.

Method	Description
`addSVGText(text, opts)`	Adds text to a dropzone. Options: `fill`, `fontFamily`, `selectable`
`addSVGImage(source, opts)`	Adds an image (File or ArrayBuffer). Zero-copy via Transferable Objects.
`setSVGElementParam(param, value, id)`	Modifies a parameter of an SVG element. Without 3rd argument: applies to the selected element.
`removeSVGElement(id)`	Removes an SVG element (text or image). Without argument: removes the selected element.
`exportSVG()`	Generates the SVG file of the configured product : print-ready proof.

// 1. Upload logo from a WooCommerce file input
const file = input.files[0];
viewer.addSVGImage(file, {
  dropzone: "dropzone001",
  selectable: true
});

// 2. Custom text (engraving, marking)
viewer.addSVGText("My text", {
  fill: "#ffffff",
  fontFamily: "Arial"
});

// 3. Export the SVG proof for production
viewer.exportSVG();
viewer.addEventListener("onSVGExportComplete", (e) => {
  const { path } = e.detail;
  // path = URL of the print-ready SVG file
});

Ready to integrate?
We handle the 3D models.

You manage the code on the WooCommerce side, we handle everything else : modelling, materials, configuration. In 30 minutes, we'll show you what we can do with your catalogue.

Script delivered at handoff : ready to enqueue

Model and material IDs documented per project

Direct support with the API developer

Compatible with WooCommerce 8+, all themes and builders

We use audience measurement cookies to understand how you use our site.

A 3D configurator
on WooCommerce.
2 lines of code.

Ready in 3 steps. No dedicated plugin.

Zero JavaScript.
All in HTML attributes.

For advanced use cases.

Text, logos, proofs.
All in SVG.

Ready to integrate?
We handle the 3D models.

A 3D configurator on WooCommerce. 2 lines of code.

Ready in 3 steps. No dedicated plugin.

Zero JavaScript.All in HTML attributes.

For advanced use cases.

Text, logos, proofs.All in SVG.

Ready to integrate?We handle the 3D models.

A 3D configurator
on WooCommerce.
2 lines of code.

Zero JavaScript.
All in HTML attributes.

Text, logos, proofs.
All in SVG.

Ready to integrate?
We handle the 3D models.