woocommerce/packages/js/components/src/product-fields

Product Fields

Product Fields are used within the WooCommerce Admin product editor, for rendering new fields using PHP.

Example

// product-field.js
( function ( element ) {
	const el = element.createElement;

	registerProductField( 'number', {
		name: 'number',
		render: () => {
			return <InputControl type="number" />;
		},
	} );
} )( window.wp.element );

API

registerProductField

Registers a new product field provided a unique name and an object defining its behavior.

Usage

import { __ } from '@wordpress/i18n';
import { registerProductField } from '@woocommerce/components';

registerProductField( 'number', {
	name: 'number',
	render: () => {
		return <InputControl type="number" />;
	},
} );

Parameters

• fieldName string: Field name.
• settings Object: Field settings.
  • render ComponentType: React functional component to be rendered.