The 3D Product Customizer provides flexible ways to display the customizer on your product pages and extensive WordPress hooks for developer extensibility.
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)
In FSE themes (Gutenberg) you can use the block 3D Product Customizer
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 → “Shortcode Only”
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]' ); ?>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
if ( is_product() ) {
do_action( 'dprcu_display_customizer' );
}
?>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
| Hook | Description | Parameters |
|---|---|---|
dprcu_before_customizer_output | Fires before the customizer HTML output is rendered (full customizer mode). | $product_id (int) – The current product ID$config_data (array) – The decoded customizer configuration |
dprcu_after_customizer_output | Fires after the customizer HTML output is rendered (full customizer mode). | $product_id (int) – The current product ID$config_data (array) – The decoded customizer configuration |
dprcu_after_canvas_container | Fires after the 3D canvas container is rendered. | $product_id (int) – The current product ID |
dprcu_after_sidebar_container | Fires after the customization options sidebar is rendered. | $product_id (int) – The current product ID |
Viewer-Only Mode Hooks
| Hook | Description | Parameters |
|---|---|---|
dprcu_before_viewer_canvas | Fires before the viewer canvas is rendered (viewer-only mode). | $product_id (int) – The current product ID |
dprcu_after_viewer_canvas_container | Fires after the canvas container in viewer mode (before sidebar). | $product_id (int) – The current product ID |
dprcu_after_viewer_canvas | Fires after the viewer canvas is rendered (viewer-only mode). | $product_id (int) – The current product ID |
Script & Style Hooks
| Hook | Description | Parameters |
|---|---|---|
dprcu_before_enqueue_scripts | Fires before scripts and styles are enqueued for the customizer. | $product_id (int) – The current product ID$is_viewer_only (bool) – Whether this is viewer-only mode$is_customizer (bool) – Whether customizer is active |
dprcu_after_enqueue_scripts | Fires after scripts and styles are enqueued for the customizer. Use this to enqueue scripts that depend on the customizer bundle. | $product_id (int) – The current product ID$is_viewer_only (bool) – Whether this is viewer-only mode$is_customizer (bool) – Whether customizer is active$customizer_config (array) – The customizer configuration array |
Setup & Product Hooks
| Hook | Description | Parameters |
|---|---|---|
dprcu_setup_product_hooks | Fires when product hooks are being set up for the customizer. | $product_id (int) – The current product ID$model_url (string) – The 3D model URL$viewer_only (string) – Whether viewer-only mode is enabled (‘1’ or ”) |
dprcu_display_customizer | Fires to manually display the customizer (manual hook display method). Themes and plugins can call do_action('dprcu_display_customizer') to display the customizer at any location in their templates. | None |
Order & Cart Hooks
| Hook | Description | Parameters |
|---|---|---|
dprcu_before_add_order_item_meta | Fires before customizer data is added to an order line item. | $item (WC_Order_Item) – The order item object$cart_item_key (string) – The cart item key$values (array) – The cart item values$order (WC_Order) – The order object |
dprcu_after_add_order_item_meta | Fires after customizer data is added to an order line item. Use this to perform additional operations after the customization data is stored in the order. | $item (WC_Order_Item) – The order item object$cart_item_key (string) – The cart item key$values (array) – The cart item values$order (WC_Order) – The order object |
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>Getting Started
Start by choosing your preferred display method in Global Settings, then use the hooks above to customize and extend the functionality for your specific needs.
For support and additional resources, visit the deosebIT Soft website or contact us.