woocommerce/docs/product-editor-development/product-editor-extensibilit...

74 lines
4.4 KiB
Markdown
Raw Normal View History

# Product Editor Extensibility Guidelines
## Form Extensibility
Our research shows that merchants think in terms of tasks and goals while creating new products in Woo. For example, adding or editing a product price is a separate task from uploading images or managing inventory.
For this reason, the new product form features tabs that correspond with these tasks. Simply speaking, they are separate views where different form features live. As a developer, you can add your extension to any of these views and offer merchants the information and tools they need to create better, more successful products.
There are several ways to extend the new product form: from a single field to a whole section containing multiple fields and tables. These extension points are tightly linked to the form structure, giving you plenty of freedom to create a great user experience.
## Product form tabs
2023-10-11 19:16:32 +00:00
The new product form consists of groups displayed as tabs. Each is a separate view and may contain any number of sections. All groups serve a specific purpose, allowing merchants to quickly find the information theyre looking for (both in default Woo features and extensions).
* **General**: Essential product information, including the name, image, and description. This tab is also where key features live for non-standard product types: downloads, groups, links, etc.
* **Organization**: This tab contains all the data used to organize and categorize product information: from categories to attributes. Best for extensions that provide new ways to describe products, e.g., product identifiers, statuses, special tags, etc.
* **Pricing**: List price, sale price, and tax options. Best for extensions that allow merchants to set up additional payment methods (e.g., Subscriptions) or add advanced pricing schemes, like wholesale.
* **Inventory**: Basic inventory settings and stock management options. Here merchants come to update the quantity at hand or mark the product as out of stock. Best for extensions that enable conditional inventory management, dropshipping options, or various restrictions.
* **Shipping**: All the information merchants need to enter to present customers with accurate shipping rates at checkout. Best for physical product details that may impact shipping (e.g. capacity or volume), additional shipping carrier settings, or custom shipping options.
2023-10-11 19:16:32 +00:00
* **Variations**: Contains product options and variations. Allows merchants to create variations and set up their attributes, such as color, size, or material. Best for extensions that add new types of variations or allow merchants to manage them in a different way.
## Where should your extension go?
Depending on the type of your extension (and your use case), you can pick an interface location that best suits how users will interact with it.
To choose, put yourself in the merchants shoes: where would you go to find this feature? What is it related to? Adding your extension to a group of similar features will help merchants navigate the form and make it easier for them to find your extension.
2023-10-11 19:16:32 +00:00
### Fields
2023-10-11 19:16:32 +00:00
Field extensions are the simplest type of extension. They can add new, replace, and expand existing form fields in any section, and hide fields.
2023-10-06 14:49:10 +00:00
#### ✅ What they are for
* Single-field, supplementary features
* Showing or hiding form elements depending on specific conditions
2023-10-06 14:49:10 +00:00
#### ❌ What they arent for
* Multi-field or multi-step forms
* Complex tables
#### Use cases
* Adding extra product details, f.e. volume under Shipping
* Entering custom data, f.e. color or date and time
* Selecting from a third-party system, f.e. warranty type
2023-10-11 19:16:32 +00:00
### Sections
2023-10-11 19:16:32 +00:00
Sections are significant parts of the form that may consist of multiple fields. They should be used sparsely throughout the form, so merchants are not overwhelmed with options while filling out the information about their products.
2023-10-06 14:49:10 +00:00
#### ✅ What they are for
* Complex forms with multiple fields, tables, and list items
* Standalone features that that doesnt build off of anything else
* Extensions that rely on user-created items, such as tags or attributes
2023-10-06 14:49:10 +00:00
#### ❌ What they arent for
* Simple extensions with 1-2 fields
* Read-only descriptions, setup guides, and advertisements
* Multi-step setup wizards and external content
#### Use cases
* Adding product labels with a robust interactive preview
* Managing product warranty options
* Creating product packages and bundles