---
title: Add custom field in store add product page
description: "We have added React hook support in the Add Product page so developers can inject custom fields/components into the product form. Available hooks: ``` applyFilters( 'multivendorx_add_product_middle_section', null, product, setProduct, handleChange, productFields, typeFields, modules, setFeaturedImage)}{applyFilters( 'multivendorx_add_product_right_section', null, product, setProduct, handleChange, productFields,…"
url: "https://multivendorx.com/docs/code-snippet/add-custom-field-in-store-add-product-page/"
updated: "2026-05-15"
---

# Add custom field in store add product page

We have added React hook support in the Add Product page so developers can inject custom fields/components into the product form.
Available hooks:

```
applyFilters(    'multivendorx_add_product_middle_section',    null,    product,    setProduct,    handleChange,    productFields,    typeFields,    modules,    setFeaturedImage)}{applyFilters(    'multivendorx_add_product_right_section',    null,    product,    setProduct,    handleChange,    productFields,    setErrorMsg)}
```

These hooks are intended for extending the product form UI by adding custom React fields/components.
Available Arguments :

- `product` → Current product state object.
- `setProduct` → React state setter to update product values.
- `handleChange` → Shared field update handler.
- `productFields` → Enabled product field settings.
- `typeFields` → Product type configuration fields.
- `modules` → Active modules list.
- `setFeaturedImage` → Update featured image state.
- `setErrorMsg` → Show validation/error messages.

Example

```
addFilter(
    'multivendorx_add_product_middle_section',
    'my-plugin/custom-product-field',
    (
        content,
        product,
        setProduct
    ) => {
        return (
            <>
                {content}

                <div className="form-group">
                    <label>Custom Field</label>

                    <input
                        type="text"
                        value={product.custom_field || ''}
                        onChange={(e) => {
                            setProduct((prev) => ({
                                ...prev,
                                custom_field: e.target.value,
                            }));
                        }}
                    />
                </div>
            </>
        );
    }
);
```