Back to Woocommerce

Product Fields

packages/js/components/src/product-fields/README.md

10.8.0-dev913 B
Original Source

Product Fields

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

Example

js
// 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

js
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.