WooCommerce Product Editor and product blocks | Voxycure Framework Developer Resources

#Product Editor v3 status

Do not use @woocommerce/product-editor, product-block-editor-v1, @woocommerce/create-product-editor-block, or editor APIs marked __experimental. Those belong to the retired beta and are not a future-safe Voxycure integration.

#Do not confuse these three editor surfaces

Surface	What developers customize	Current approach
WooCommerce Admin product editor	The form merchants use to edit price, stock, shipping, and custom product data.	Use the supported classic product editor hooks and WooCommerce CRUD today. Product Editor v3 has no stable public block API.
Single Product template editor	The storefront layout shoppers see for one product.	Build product-display blocks and insert them into the WooCommerce Single Product template in the Site Editor.
Product Collection and catalog blocks	Product grids, catalog queries, filters, Cart, and Checkout.	Use the documented WooCommerce Blocks extension surfaces for that specific block.

#WooCommerce version matrix

WooCommerce	Product editor state	What your code should do
10.8 and earlier	Old block-based editor beta may exist behind a feature flag.	Do not begin new integrations with its experimental APIs.
10.9	Deprecation window and warnings.	Remove beta-only imports, blocks, slots, and feature declarations.
11.0 and newer	Old beta editor and `@woocommerce/product-editor` are removed.	Use the Voxycure `editor => woocommerce` adapter, which wraps the stable classic editor and product CRUD.

#Theme or companion plugin?

The examples below can live in a theme because this guide targets theme developers. Product data usually belongs in a small companion plugin, however, so merchants can still edit the field after changing themes. The frontend display block and CSS naturally belong in the theme.

#1. Create the files

your-theme/
├── functions.php
├── inc/
│   ├── voxycure.php
│   └── blocks.php
└── blocks/
    └── product-delivery-note/
        ├── render.php
        └── style.css

#2. Load the integration from functions.php

WordPress loads the active theme’s functions.php. Load the child-theme-aware registration files; developers do not add WooCommerce rendering or save hooks themselves.

<?php

defined('ABSPATH') || exit;

require_once get_theme_file_path('inc/voxycure.php');
require_once get_theme_file_path('inc/blocks.php');

#3. Register the product field with Voxycure

Paste this into inc/voxycure.php. Voxycure detects the product post type and editor => woocommerce, renders the field in Product data → Inventory, verifies WooCommerce’s save nonce, sanitizes the submitted value by field type, checks the product-edit capability, and updates the same WC_Product object that WooCommerce saves.

<?php
/**
 * Register a product field through Voxycure Framework.
 * File: inc/voxycure.php
 */

defined('ABSPATH') || exit;

use Voxyframe\Core\Registry;

add_action('voxycure/register', function (Registry $registry): void {
    $registry->register_field_group('product-delivery', [
        'name'            => 'Delivery details',
        'post_types'      => ['product'],
        'editor'          => 'woocommerce',
        'woocommerce_tab' => 'inventory',
        'fields'          => [
            [
                'field_key'  => '_vc_delivery_note',
                'label'      => 'Delivery note',
                'type'       => 'text',
                'description' => 'Shown on the product page, for example “Usually ships in 2 days”.',
                'desc_tip'   => true,
                'placeholder' => 'Usually ships in 2 business days',
            ],
        ],
    ]);
});

Key	Purpose
`post_types => ['product']`	Connects the field group to WooCommerce products.
`editor => 'woocommerce'`	Uses the Voxycure WooCommerce adapter instead of the WordPress document settings panel.
`woocommerce_tab`	Choose `general`, `inventory`, `shipping`, `linked`, or `advanced`.
`field_key`	The stable product-meta key read through `WC_Product::get_meta()`.

#4. Test product saving

Open Products → Add New or edit a product.
Open Product data → Inventory.
Enter a value such as Usually ships in 2 business days.
Click Publish or Update.
Reload the product and confirm the value remains.

#5. Register a storefront product block

This is a Voxycure dynamic block for the storefront Site Editor—not an admin Product Editor v3 block. Paste it into inc/blocks.php. The woocommerce category only controls inserter grouping. Its editor_scope prevents the block from appearing in normal post, page, or product post editors.

<?php
/**
 * Register the frontend product delivery-note block.
 * File: inc/blocks.php
 */

defined('ABSPATH') || exit;

use Voxyframe\Core\Registry;

add_action('voxycure/register', function (Registry $registry): void {
    if (!class_exists('WooCommerce')) {
        return;
    }

    $registry->register_block('product-delivery-note', [
        'label'       => 'Product delivery note',
        'description' => 'Displays the delivery note saved on the current WooCommerce product.',
        'category'    => 'woocommerce',
        'icon'        => 'car',
        'keywords'    => ['product', 'delivery', 'shipping'],
        'template'    => get_theme_file_path('blocks/product-delivery-note/render.php'),
        'editor_scope' => ['editor_contexts' => ['core/edit-site']],
        'fields'      => [],
        'cache_ttl'   => 0,
    ]);
});

add_action('after_setup_theme', function (): void {
    wp_enqueue_block_style('voxyframe/product-delivery-note', [
        'handle' => 'my-theme-product-delivery-note',
        'src'    => get_theme_file_uri('blocks/product-delivery-note/style.css'),
        'path'   => get_theme_file_path('blocks/product-delivery-note/style.css'),
        'ver'    => wp_get_theme()->get('Version'),
    ]);
});

#6. Render the current product value

Paste this into blocks/product-delivery-note/render.php. It exits safely outside a valid product context and escapes the saved value at output.

<?php
/**
 * Render the delivery note for the product currently being displayed.
 * File: blocks/product-delivery-note/render.php
 */

defined('ABSPATH') || exit;

if (!function_exists('wc_get_product')) {
    return;
}

$product = wc_get_product(get_the_ID());
if (!$product instanceof WC_Product) {
    return;
}

$deliveryNote = (string) $product->get_meta('_vc_delivery_note', true);
if ($deliveryNote === '') {
    return;
}
?>
<div <?= get_block_wrapper_attributes(['class' => 'vc-product-delivery-note']) ?>>
    <strong><?= esc_html__('Delivery', 'my-theme') ?></strong>
    <span><?= esc_html($deliveryNote) ?></span>
</div>

#7. Add the block style

Paste this into blocks/product-delivery-note/style.css. WordPress can load it with the block in the editor and frontend.

.vc-product-delivery-note {
    display: flex;
    gap: .6rem;
    align-items: baseline;
    padding: 1rem 1.1rem;
    border: 1px solid currentColor;
    border-radius: .5rem;
}

.vc-product-delivery-note strong {
    font-weight: 600;
}

#8. Add it to the Single Product template

Open Appearance → Editor.
Open Design → Templates, then choose the WooCommerce Single Product template. Menu wording can differ slightly by WordPress version.
Insert Product delivery note where it should appear, such as below Product Price or Add to Cart.
Save the template and visit a product that has a delivery note.

The block may render empty when the editor has no preview product. On a real single-product request, it reads the current product through WooCommerce.

#What to do when Product Editor v3 ships

Wait for WooCommerce to publish a stable public extension API and migration guide. At that point, keep the existing WC_Product data key and replace only the admin field UI. The storefront block can continue reading _vc_delivery_note through WooCommerce CRUD.