The Product Template block defines how individual products are displayed within a Product Query block. It contains the blocks that show product information for each product in an order.
Adding a Product Template Block
- Add a Product Query block first
- The Product Template block will be added automatically
Note: This block only works within Product Query blocks.
Adding Product Information Blocks
Inside the Product Template, add blocks to display product information:
Available Product Blocks
- Product Title: Display the product name
- Product Quantity: Show how many were ordered
- Product Unit Price: Display price per item
- Product Line Total: Show total for this product line
- Product Description: Display product description (if available)
Default Template Structure
The Product Template comes with a default structure:
- Product Title
- Product Unit Price
- Product Quantity
- Product Line Total
You can customize this structure by adding, removing, or reordering blocks.
Styling Options
Colors
- Background Color: Set background color for the product template
- Text Color: Set default text color
- Link Color: Set color for links
Typography
- Font Size: Control the size of text
- Font Family: Choose a font family
- Font Weight: Make text bold or regular
- Font Style: Apply italic styling
- Line Height: Control vertical spacing
- Letter Spacing: Adjust spacing between characters
- Text Transform: Uppercase, lowercase, or capitalize
- Text Decoration: Add underline or other decorations
Spacing
- Padding: Add internal spacing around product content
- Block Gap: Control spacing between product information blocks
Borders
- Border Color: Choose a border color
- Border Radius: Round the corners
- Border Style: Solid, dashed, dotted, etc.
- Border Width: Set border thickness
Layout Options
Product Display
Design how products are displayed:
- List Format: Products displayed as a list (default)
- Custom Layout: Use columns or other layout blocks for custom designs
Spacing Between Products
Control spacing between multiple products:
- Adjust block gap settings
- Use spacer blocks if needed
Best Practices
- Complete Information: Include all relevant product details
- Clear Layout: Make product information easy to scan
- Consistent Styling: Style all products consistently
- Mobile-Friendly: Ensure product information is readable on mobile
- Visual Hierarchy: Use typography and spacing to create clear hierarchy
Examples
Example 1: Simple Product List
Structure:
- Product Title (H3)
- Quantity: X
- Price: $X.XX
- Total: $X.XX
Example 2: Detailed Product Card
Structure:
- Product Title (H3, bold)
- Product Description (if available)
- Quantity: X | Price: $X.XX | Total: $X.XX
Troubleshooting
Template Not Displaying
- Verify the block is inside a Product Query block
- Check that product information blocks are added
- Ensure product data is available from the form entry
Product Information Missing
- Verify product information blocks are properly added
- Check that products have the required data
- Ensure the form entry contains product information
Styling Issues
- Check that styling options are properly configured
- Test in multiple email clients
- Some CSS may have limited support in email
Additional resources
Use the links below for more information and guidance on adding blocks. Keep in mind that these articles are general information related to the WordPress Editor and building with blocks. Email Customizer does not utilize all blocks or functionality due to the limited capabilities of emails.
WordPress Editor