Finishes 3D Configurator for WooCommerce

Finishes 3D Configurator for WooCommerce lets your customers choose the finishes of a product on a live 3D model, see every change instantly and add exactly that configuration to the cart. Every choice is saved on the WooCommerce order, so whoever makes the product knows what to make.

It is designed for products that come in several finishes or colours: furniture, lighting, objects made to order.

For the customer

• Real-time 3D viewer: rotate, zoom, full screen, change background

• Customization steps (for example “Top finish”, “Legs finish”), each one colouring a named part of the model

• Live price with per-option surcharges, in the shop’s own price format

• Undo / redo, shareable configuration link, PDF summary of the configuration

• AR view on supported phones (WebXR on Android, AR Quick Look on iPhone and iPad), generated in the browser

For the shop

• Every selected option is stored on the order line, and shown in the cart, checkout, order page and emails

• A product cannot be added to the cart without a valid choice for every step

• Reusable library of materials (colour or texture, roughness, metalness)

• Several products in the same configurator: the customer switches model without reloading the page, and keeps the finishes that the new model also has

• HDR environment lighting, camera and zoom settings

Built to work with Elementor

• Four Elementor widgets, in the “3D Configurator” category: 3D Viewer, Customizer Options, Customizer Price and Customizer Add to Cart. Place them anywhere in a page or in an Elementor Pro single product template, and style them from the Elementor panel like any other widget.

• Any link in the page can drive the 3D model: a link to?model=<product-slug> switches model, a link to?option=<option-name> (or?<step>=<option-name> ) applies that finish, without reloading. The current link is marked with aria-current and the selection ring. This is how a configurator can be composed from ordinary Elementor buttons.

• Appearance settings: the plugin’s own style or a style that follows the theme, with colours taken from Elementor’s Global Colors or chosen freely, selection ring thickness, product name on or off.

Other ways to place it

• Automatically on the product page (default)

• Blocks: “3D Configurator” and “3D Viewer Only”

• Shortcodes: [tdcfw-customizer] and [tdcfw-viewer]

• Action hook: do_action( 'tdcfw_display_customizer', $product_id );

Source Code

js ); dist/ contains the bundles built from them with webpack ( npm install, then npm run build ).

Bundled libraries:

• three.js (MIT License), https://threejs.org

• jsPDF (MIT License), https://github.com/parallax/jsPDF

• Lucide icons (ISC License), https://lucide.dev

• idb (ISC License), https://github.com/jakearchibald/idb

External Services

The plugin does not connect to any external service by itself. All scripts, styles and models are served from your own site.

The share buttons of the configurator open, only when a visitor clicks them, the share page of Facebook, X (Twitter), LinkedIn or Pinterest, passing the address of the configuration (and, for Pinterest, its preview image). From that moment the visitor is on that service, under its terms:

• Facebook: https://www.facebook.com/terms.php and https://www.facebook.com/policy.php

• X: https://x.com/tos and https://x.com/privacy

• LinkedIn: https://www.linkedin.com/legal/user-agreement and https://www.linkedin.com/legal/privacy-policy

• Pinterest: https://policy.pinterest.com/terms-of-service and https://policy.pinterest.com/privacy-policy

Credits

org/plugins/3d-product-customizer/), released under the GPL v2 or later. This version adds the Elementor widgets, links that drive the configurator, several products in one configurator, the appearance settings and a number of fixes, and removes the paid version and its licensing.