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. Shortcode Display
Display the customizer anywhere on your product page using the shortcode. Perfect for custom page layouts and page builders.
Setting: 3D Customizer → Global Settings → Display Method → “Shortcode Only”
Usage Examples:
- In WordPress Editor:
- In Page Builders (Elementor, Divi): Add a “Shortcode” widget and use:
dprcu-customizer - In Theme Template:
<?php echo do_shortcode( '[dprcu-customizer]' ); ?>3. 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
dprcu_before_customizer_output
Fires before the customizer HTML output is rendered (full customizer mode).
Parameters:
$product_id(int) – The current product ID$config_data(array) – The decoded customizer configuration
Example:
add_action( 'dprcu_before_customizer_output', function( $product_id, $config_data ) {
echo '<!-- Custom HTML before customizer -->';
}, 10, 2 );dprcu_after_customizer_output
Fires after the customizer HTML output is rendered (full customizer mode).
Parameters:
$product_id(int) – The current product ID$config_data(array) – The decoded customizer configuration
dprcu_before_canvas_container
Fires before the 3D canvas container is rendered.
Parameters:
$product_id(int) – The current product ID
Example:
add_action( 'dprcu_before_canvas_container', function( $product_id ) {
echo '<div class="custom-notice">Configure your product below</div>';
} );dprcu_after_canvas_container
Fires after the 3D canvas container is rendered.
Parameters:
$product_id(int) – The current product ID
dprcu_before_sidebar_container
Fires before the customization options sidebar is rendered.
Parameters:
$product_id(int) – The current product ID
dprcu_after_sidebar_container
Fires after the customization options sidebar is rendered.
Parameters:
$product_id(int) – The current product ID
Viewer-Only Mode Hooks
dprcu_before_viewer_canvas
Fires before the viewer canvas is rendered (viewer-only mode).
Parameters:
$product_id(int) – The current product ID
dprcu_after_viewer_canvas_container
Fires after the canvas container in viewer mode (before sidebar).
Parameters:
$product_id(int) – The current product ID
dprcu_after_viewer_canvas
Fires after the viewer canvas is rendered (viewer-only mode).
Parameters:
$product_id(int) – The current product ID
Script & Style Hooks
dprcu_before_enqueue_scripts
Fires before scripts and styles are enqueued for the customizer.
Parameters:
$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.
Parameters:
$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
Example:
add_action( 'dprcu_after_enqueue_scripts', function( $product_id, $is_viewer_only, $is_customizer, $config ) {
// Enqueue custom scripts that depend on customizer
wp_enqueue_script( 'my-custom-script', plugin_url( 'js/custom.js' ), array( 'dprcu-customizer-bundle' ) );
}, 10, 4 );Setup & Product Hooks
dprcu_setup_product_hooks
Fires when product hooks are being set up for the customizer.
Parameters:
$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.
Parameters: None
Example – In Theme Template:
<?php
// woocommerce/single-product.php
if ( is_product() ) {
echo '<div class="customizer-wrapper">';
do_action( 'dprcu_display_customizer' );
echo '</div>';
}
?>Order & Cart Hooks
dprcu_before_add_order_item_meta
Fires before customizer data is added to an order line item.
Parameters:
$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.
Parameters:
$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
Example:
add_action( 'dprcu_after_add_order_item_meta', function( $item, $cart_item_key, $values, $order ) {
// Log or track customization data for this order
error_log( 'Customization added to order: ' . $order->get_id() );
}, 10, 4 );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.