This recipe covers setting up custom fields for a product catalog, including individual product details, a flexible product description section, and global catalog settings via an options page.
Step 1: Create Product Detail Fields
- Go to Field Forge > New Field Group
- Title it Product Details
- Add the following fields:
| Field | Type | Settings |
|---|---|---|
| Price | Number | Required: Yes, Min: 0, Step: 0.01, Prepend: “$” |
| Sale Price | Number | Min: 0, Step: 0.01, Prepend: “$” |
| SKU | Text | Required: Yes, Placeholder: “PROD-001” |
| Availability | Select | Choices: In Stock, Out of Stock, Pre-Order, Discontinued |
| Product Gallery | Gallery (PRO) | Min: 1, Max: 20, Preview Size: Medium |
| Weight | Number | Append: “kg”, Step: 0.01 |
| Dimensions | Group (PRO) | Sub-fields: Length (Number), Width (Number), Height (Number) — all with Append: “cm” |
| Short Description | Textarea | Rows: 3, Character Limit: 200 |
| Features | Repeater (PRO) | Sub-fields: Feature Name (Text), Feature Value (Text) |
- Set Location Rules to Post Type is equal to Product (assumes you have a “Product” custom post type)
- Save the field group
Step 2: Create Flexible Product Sections
For rich product descriptions that content managers can customize per product:
- Create another field group titled Product Sections
- Add a Flexible Content field (PRO) labeled Product Content with name
product_content - Add the following layouts:
| Layout | Sub-fields | Purpose |
|---|---|---|
| Specs Table | Heading (Text), Specs (Repeater: Spec Name + Spec Value) | Technical specifications |
| Image with Text | Image (Image), Heading (Text), Body (WYSIWYG), Image Position (Select: Left/Right) | Feature highlight with photo |
| Video Demo | Title (Text), Video URL (oEmbed), Caption (Text) | Product demonstration video |
| Comparison Chart | Title (Text), Items (Repeater: Feature + Product 1 Value + Product 2 Value) | Side-by-side comparison |
| Downloads | Title (Text), Files (Repeater: Document Name + File) | Manuals, datasheets, PDFs |
- Set Location Rules to Post Type is equal to Product
- Save the field group
Step 3: Options Page for Global Catalog Settings
Global settings that apply to all products:
- Go to Field Forge > Options Pages (PRO)
- Create an options page titled Catalog Settings
- Create a field group titled Global Catalog Options with these fields:
| Field | Type | Purpose |
|---|---|---|
| Currency Symbol | Text | Default: “$” |
| Currency Position | Select | Before Price / After Price |
| Show Sale Badge | True/False | Toggle sale badges site-wide |
| Default Sort Order | Select | Price Low-High, Price High-Low, Name A-Z, Newest First |
| Products Per Page | Number | Default: 12, Min: 4, Max: 48 |
| Catalog Header Image | Image | Banner image for the catalog listing page |
| Out of Stock Message | Text | Custom message when a product is unavailable |
- Set Location Rules to Options Page is equal to Catalog Settings
- Save the field group
Step 4: Content Manager Workflow
Adding a new product:- Go to Products > Add New in the WordPress admin
- Enter the product title and any block editor content
- Scroll down to the “Product Details” metabox
- Enter the price, SKU, and availability status
- Upload product images to the gallery — drag to reorder, with the first image as the primary photo
- Fill in weight, dimensions, and features
- In the “Product Sections” metabox, click Add Layout to build the product description
- Add a Specs Table layout for technical details
- Add an Image with Text layout for a feature highlight
- Reorder sections by dragging
- Click Publish
—