Documentation

The 3D Product Customizer provides flexible ways to display the customizer on your product pages and extensive WordPress hooks for developer extensibility.

Plugin listing

Premium version

Display Methods

1. Automatic Display (Default)

The customizer is automatically displayed before the product summary. This is the default behavior and requires no configuration.

Setting: 3D Customizer → Global Settings → Display Method → “Automatic (before product summary)”

2. Block editor (Gutenberg – Recommended for FSE sites)

Setting: 3D Customizer → Global Settings → Display Method → Manual placement

In FSE themes (Gutenberg) you can use the block 3D Product Customizer

Search for the block.

Select it in the editor.

If you want to use it in any page (not just product pages) select it and on the sidebar search for the product you want to show.

You don’t need to do this for product pages!!! The product will be loaded automatically.

3. Shortcode Display

Display the customizer anywhere on your product page using the [ dprcu-customizer ] shortcode. Perfect for custom page layouts and page builders.

Setting: 3D Customizer → Global Settings → Display Method → Manual placement

Usage Examples:

• In Classic WordPress Editor: [ dprcu-customizer ]
• In Page Builders (Elementor, Divi): Add a “Shortcode” widget and use: dprcu-customizer
• In Theme Template:

<?php 
echo do_shortcode( '[dprcu-customizer]' ); // used in product pages (no need to pass the ID)
echo do_shortcode( '[dprcu-customizer id="123"]' ); //used for non product pages 
?>

4. Manual Hook Display

Display the customizer using the dprcu_display_customizer action hook for maximum flexibility in theme customization.

Setting: 3D Customizer → Global Settings → Display Method → “Manual Hook”

Usage in your theme template:

<?php
// on product page
if ( is_product() ) {
    do_action( 'dprcu_display_customizer' );
}
?>

<?php
// on any other page
if ( is_product() ) {
    do_action( 'dprcu_display_customizer', 123);
}
?>

Keyboard shortcuts

Developer Hooks

The 3D Product Customizer provides 18+ WordPress action hooks that allow developers to extend and customize the plugin’s functionality.

Customizer Output Hooks

Viewer-Only Mode Hooks

Script & Style Hooks

Setup & Product Hooks

Order & Cart Hooks

Common Use Cases

Adding Custom Content Before Customizer

add_action( 'dprcu_before_customizer_output', function( $product_id ) {
    echo '<div class="customizer-intro">';
    echo '<h3>Design Your Custom Product</h3>';
    echo '<p>Use the 3D viewer below to customize your product</p>';
    echo '</div>';
}, 10, 1 );

Adding Custom Scripts After Customizer Loads

add_action( 'dprcu_after_enqueue_scripts', function( $product_id, $is_viewer_only, $is_customizer, $config ) {
    if ( ! $is_customizer ) {
        return;
    }
    
    wp_add_inline_script( 'dprcu-customizer-bundle', '
        document.addEventListener( "DOMContentLoaded", function() {
            // Your custom JavaScript here
            console.log( "3D Customizer loaded" );
        } );
    ' );
}, 10, 4 );

Placing Customizer in Custom Template Layout

<?php
// In your custom WooCommerce product template
?>

<div class="product-layout">
    <div class="customizer-column">
        <?php do_action( 'dprcu_display_customizer' ); ?>
    </div>
    
    <div class="product-details-column">
        <?php woocommerce_template_single_title(); ?>
        <?php woocommerce_template_single_price(); ?>
        <?php woocommerce_template_single_add_to_cart(); ?>
    </div>
</div>

Steps thumbnail generation

This is an experimental feature and disabled by default. Each step gets a small rendered preview of its part. Disable if you prefer to set icons manually or if thumbnail generation causes issues on low-end devices.

The thumbnails are generated in the users browser so no extra images are in the server.

This is how it could look like:

Analytics (PRO)

This feature is only available in the PRO version. You can get it here.

What is tracked

When analytics is enabled, the plugin records three types of aggregate events per product:

• Sessions — counted once per browser per product per day, on the first real interaction (dragging the model or selecting an option). No page-view tracking; idle visitors are never counted.
• Option Selections — which step option the user chose, stored as a step ID + option name pair with a running count.
• Add to Cart — each time the WooCommerce add-to-cart button is clicked while the customizer is active.

All data is stored as aggregate counts only. No IP addresses, user IDs, session tokens, cookies, or any personally identifiable information is ever written — to the database or anywhere else.

What is stored on the visitor’s device

To avoid counting the same visitor more than once per day, the plugin writes a single entry to the browser’s localStorage:

Key:   dprcu_interacted_{product_id}_{YYYY-MM-DD}
Value: 1

The key includes today’s date so it naturally expires at midnight without any cleanup code. This entry is only written after consent checks pass (see CMP integration below).

Enabling / disabling analytics

Go to 3D Customizer → Settings → Analytics and check or uncheck “Track how users interact with the 3D customizer”. When disabled:

• No events are sent to the server.
• Nothing is written to localStorage.
• The Analytics admin page and product metabox are hidden.

Integrating with a Consent Management Platform (CMP)

The plugin provides a JavaScript hook that lets your CMP block or enable tracking based on the visitor’s consent choice.

Set the following variable to false before the user interacts with the customizer to prevent any tracking or localStorage writes:

window.dprcu_analytics_enabled = false;

Cookiebot

Tracking is blocked automatically when the visitor has declined statistics cookies. No extra configuration is needed — the plugin checks window.Cookiebot.consent.statistics on every event.

To re-enable tracking after the visitor accepts, call the renew callback or reload the page (standard Cookiebot behavior).

CookieYes (CKY)

Tracking is blocked automatically when the visitor has declined analytics cookies. The plugin checks window.getCkyConsent().categories.analytics on every event.

Other CMPs / custom consent logic

In your CMP’s “reject” callback, set:

window.dprcu_analytics_enabled = false;

In your CMP’s “accept analytics” callback, set:

window.dprcu_analytics_enabled = true;

If the visitor accepts after the page has already loaded, you may also want to delete the localStorage key for the current product so that the session is counted for today:

const today = new Date().toISOString().slice(0, 10);
localStorage.removeItem('dprcu_interacted_' + productId + '_' + today);

Viewing analytics data

Go to 3D Customizer → Analytics to see:

• Total sessions, option selections, add-to-cart counts, and conversion rate across all products.
• A daily trend line chart (7 / 30 / 90 day view) for sessions and add-to-cart.
• Per-product breakdown table with individual conversion rates.
• Per-product option popularity (shown in the product metabox on the edit product screen).

Analytics data can be cleared per product (from the product edit screen) or globally (from the Settings page).

For support and additional resources, visit the deosebIT Soft website or contact us.