Extending the product form with generic fields

We have large list of generic fields that a plugin can use to extend the new product form. You can find the full list here. Each field contains documentation for what attributes the field supports.

Using a generic block

Using a generic block is pretty easy. We have created an template API that allows you to add new fields, the API refers to them as blocks. There are a couple actions that allow us to interact with these templates. There is the woocommerce_layout_template_after_instantiation that is triggered when a new template is registered. There are also other actions triggered when a specific field/block is added ( see block addition and removal ).

Let’s say we want to add something to the basic details section, we can do so by making use of the above mentioned hook:

This will add a number field called Animal age to each template that has a basic-details section.

		add_action(
	'woocommerce_layout_template_after_instantiation',
	function( $layout_template_id, $layout_template_area, $layout_template ) {
	    $basic_details = $layout_template->get_section_by_id( 'basic-details' );

        if ( $basic_details ) {
	        $basic_details->add_block(
        		[
        			'id' 	     => 'example-tutorial-animal-age',
                    // This orders the field, core fields are separated by sums of 10.
	            	'order'	     => 40,
	            	'blockName'  => 'woocommerce/product-number-field',
	            	'attributes' => [
                        // Attributes specific for the product-number-field.
	            		'label' => 'Animal age',
	            		'property' => 'meta_data.animal_age',
	            		'suffix' => 'Yrs',
	            		'placeholder' => 'Age of animal',
	            		'required' => true,
	            		'min' => 1,
	            		'max' => 20
	            	],
                ]
            );
        }
	},
	10,
	3
);

	

Dynamically hiding or showing the generic field

It is also possible to dynamically hide or show your field if data on the product form changes. We can do this by adding a hideCondition ( plural ). For example if we wanted to hide our field if the product price is higher than 20, we can do so by adding this expression:

		'hideConditions' => array(
	array(
		'expression' => 'editedProduct.regular_price >= 20',
	),
),

	

The hideConditions also support targeting meta data by using dot notation. You can do so by writing an expression like this: ! editedProduct.meta_data.animal_type that will hide a field if the animal_type meta data value doesn’t exist.