Order Details
The Order Details Block displays a comprehensive table of all order information including products, quantities, prices, totals, payment, and shipping methods.
Overview#
Block Name: Order Details
Category: RedFox Thank You
Purpose: Display complete order information in a formatted table
Available In: Free and Pro
What It Does#
This block shows:
- Product List – All items in the order with images
- Quantities – How many of each item
- Prices – Individual and line totals
- Order Totals – Subtotal, tax, shipping, total
- Payment Method – How customer paid
- Shipping Method – Delivery method chosen
When to Use#
Use This Block:
- On every thank you page (recommended)
- To show complete order breakdown
- For order confirmation pages
Use Order Info Instead:
- When you need only specific data (order number, date, total)
- For custom layouts with individual data points
- In headers or summaries
Block Settings#
Title Settings#
Control the block title appearance:
- Show Title: Toggle to show/hide the block title (default: on)
- Heading Level: Choose the semantic heading level (H1–H6) for SEO and accessibility (default: H2). Only visible when the title is enabled.
Display Options#
Control what information to display:
- Show Product Images: Toggle to show/hide product images in the table (default: on)
- Product Image Size: Adjust the size of product images in pixels (range: 30–150, default: 50). Only visible when product images are enabled.
- Show Subtotal: Toggle to show/hide the subtotal row (default: on)
- Show Payment Method: Toggle to show/hide the payment method row (default: on)
Each toggle includes a reset button to restore the default value.
Style Settings#
All style controls are found in the Styles tab of the block inspector panel.
Text#
Control general table text styling:
- Font Size: Adjust size for better readability
- Line Height: Improve spacing between lines
- Color: Match your brand colors
- Text Alignment: Left, Center, or Right
Responsive Support: Supported.
Title Text#
Control the block title styling:
- Font Size: Adjust title size for better hierarchy
- Line Height: Control spacing for title text
- Color: Set distinct color for the title
- Text Alignment: Left, Center, or Right
Responsive Support: Supported.
Note: Only visible when the title is enabled in Title Settings.
Table Header Text Pro#
Control the table header row text styling (e.g., “Product”, “Total”). Automatically available when the Pro version is active.
- Font Size: Adjust header text size
- Line Height: Control spacing between header lines
- Color: Set distinct color for table headers
- Text Alignment: Left, Center, or Right
Pro typography options:
- Font Family
Pro— Access to 1,000+ Google Fonts - Font Weight
Pro— Light (300) to Extra Bold (800), dynamically updates based on selected font - Font Style
Pro— Toggle italic styling - Text Decoration
Pro— Underline, Strikethrough, or None - Letter Spacing
Pro— Fine-tune spacing between characters (-10 to 10) - Word Spacing
Pro— Adjust spacing between words (-10 to 50) - Text Transform
Pro— Uppercase, Lowercase, Capitalize, or None
Responsive Support: Supported.
Product Name Text Pro#
Control the product name text styling in the table. Automatically available when the Pro version is active.
- Font Size, Line Height, Color, Text Alignment
Pro typography options: Font Family, Font Weight, Font Style, Text Decoration, Letter Spacing, Word Spacing, Text Transform.
Responsive Support: Supported.
Product Price Text Pro#
Control the product price text styling. Automatically available when the Pro version is active.
- Font Size, Line Height, Color, Text Alignment
Pro typography options: Font Family, Font Weight, Font Style, Text Decoration, Letter Spacing, Word Spacing, Text Transform.
Responsive Support: Supported.
Quantity Text Pro#
Control the quantity column text styling. Automatically available when the Pro version is active.
- Font Size, Line Height, Color, Text Alignment
Pro typography options: Font Family, Font Weight, Font Style, Text Decoration, Letter Spacing, Word Spacing, Text Transform.
Responsive Support: Supported.
Summary Labels Text Pro#
Control the summary section label text styling (e.g., “Subtotal:”, “Tax:”, “Shipping:”). Automatically available when the Pro version is active. Only visible when Show Subtotal is enabled.
- Font Size, Line Height, Color, Text Alignment
Pro typography options: Font Family, Font Weight, Font Style, Text Decoration, Letter Spacing, Word Spacing, Text Transform.
Responsive Support: Supported.
Summary Values Text Pro#
Control the summary section value text styling (e.g., “$25.00”, “$5.00”). Automatically available when the Pro version is active. Only visible when Show Subtotal is enabled.
- Font Size, Line Height, Color, Text Alignment
Pro typography options: Font Family, Font Weight, Font Style, Text Decoration, Letter Spacing, Word Spacing, Text Transform.
Responsive Support: Supported.
Grand Total Text Pro#
Control the grand total row text styling. Automatically available when the Pro version is active. Only visible when Show Subtotal is enabled.
- Font Size, Line Height, Color, Text Alignment
Pro typography options: Font Family, Font Weight, Font Style, Text Decoration, Letter Spacing, Word Spacing, Text Transform.
Responsive Support: Supported.
Payment Label Text Pro#
Control the payment method label text styling (e.g., “Payment Method:”). Automatically available when the Pro version is active. Only visible when Show Payment Method is enabled.
- Font Size, Line Height, Color, Text Alignment
Pro typography options: Font Family, Font Weight, Font Style, Text Decoration, Letter Spacing, Word Spacing, Text Transform.
Responsive Support: Supported.
Payment Value Text Pro#
Control the payment method value text styling (e.g., “Credit Card”, “PayPal”). Automatically available when the Pro version is active. Only visible when Show Payment Method is enabled.
- Font Size, Line Height, Color, Text Alignment
Pro typography options: Font Family, Font Weight, Font Style, Text Decoration, Letter Spacing, Word Spacing, Text Transform.
Responsive Support: Supported.
Background#
Customize the block background:
Free:
- Background Color — Color picker with custom hex values
Pro:
- Background Image
Pro— Upload or select from media library with size, position, repeat, and attachment options - Background Gradient
Pro— Linear and radial gradients with pro-exclusive presets - Background Overlay
Pro— Color or gradient overlay with blend modes
Responsive Support: Supported.
Spacing#
Control block spacing:
- Padding: Internal space (inside the block) — Top, Right, Bottom, Left
- Margin: External space (around the block) — Top, Right, Bottom, Left
Features: Linked/unlinked sides, presets, box model visualization, auto values.
Responsive Support: Supported.
Table Colors#
Customize the table appearance:
- Border Color: Color of table borders
- Header Text Color: Text color in the table header row
- Total Row Color: Background color for the total row
Responsive Support: Supported.
Product Image Pro#
Customize the product image appearance. Automatically available when the Pro version is active. Only visible when Show Product Images is enabled.
- Spacing — Padding and margin around product images
- Border — Border width, style, color, individual sides, and border radius
- Box Shadow — Color, horizontal/vertical offset, blur, spread, and inset toggle
Responsive Support: Supported.
Border Pro#
Add and customize borders. Automatically available when the Pro version is active.
- Border Width — Set width in pixels or other units
- Border Style — Solid, Dashed, Dotted, and more
- Border Color — Full color picker
- Individual Sides — Set borders per side or all at once
- Border Radius — Round corners individually or all at once
Responsive Support: Supported.
Box Shadow Pro#
Add depth and dimension. Automatically available when the Pro version is active.
- Color — Shadow color with full color picker
- Horizontal Offset — Range: -100 to 100 (default: 0px)
- Vertical Offset — Range: -100 to 100 (default: 2px)
- Blur — Range: 0 to 200 (default: 4px)
- Spread — Range: -100 to 100 (default: 0px)
- Inset — Toggle for inner shadow
Set a shadow color to get started — sensible defaults are applied automatically.
Responsive Support: Supported.
Sizing Pro#
Control block dimensions with precision. Automatically available when the Pro version is active.
- Width / Height
- Min Width / Min Height
- Max Width / Max Height
Responsive Support: Supported.
Free vs Pro Comparison#
| Feature | Free | Pro |
|---|---|---|
| Title Settings (Show, Heading Level) | ✅ | ✅ |
| Display Options (Images, Subtotal, Payment) | ✅ | ✅ |
| Product Image Size | ✅ | ✅ |
| Text (Font Size, Line Height, Color, Alignment) | ✅ | ✅ |
| Title Text Styling | ✅ | ✅ |
| Table Colors (Border, Header, Total Row) | ✅ | ✅ |
| Background Color | ✅ | ✅ |
| Spacing (Padding & Margin) | ✅ | ✅ |
| Table Header Typography | ❌ | ✅ |
| Product Name Typography | ❌ | ✅ |
| Product Price Typography | ❌ | ✅ |
| Quantity Typography | ❌ | ✅ |
| Summary Labels/Values Typography | ❌ | ✅ |
| Grand Total Typography | ❌ | ✅ |
| Payment Label/Value Typography | ❌ | ✅ |
| Product Image Styling (Border, Shadow, Spacing) | ❌ | ✅ |
| Background Image, Gradient, Overlay | ❌ | ✅ |
| Border & Border Radius | ❌ | ✅ |
| Box Shadow | ❌ | ✅ |
| Sizing (Width, Height, Min/Max) | ❌ | ✅ |
Comparison with Order Info#
| Feature | Order Details | Order Info |
|---|---|---|
| Shows complete order table | ✅ Yes | ❌ No |
| Individual data fields | ❌ No | ✅ Yes |
| Product list with images | ✅ Yes | ❌ No |
| Custom layouts | ❌ Limited | ✅ Yes |
| Ease of use | ✅ Easy | Requires setup |
| Best for | Full order breakdown | Custom designs |