Products Grid

The Products Grid Block displays a grid of related or custom products on the thank you page, encouraging customers to discover and purchase additional items.

Overview#

Block Name: Products Grid
Category: RedFox Thank You
Purpose: Display a grid of product recommendations
Available In: Pro

What It Does#

This block shows:

• A configurable grid of WooCommerce products
• Product images with sale badges
• Product titles and star ratings
• Product prices
• Add to Cart buttons for quick purchasing
• View Cart button after adding items

Products can be sourced from various criteria including random selection, specific products, categories, tags, or based on the current order.

When to Use#

Use This Block When:

• Recommending related products after purchase
• Cross-selling or upselling additional items
• Displaying products from specific categories or tags
• Showing products related to what the customer just ordered

Use Products Grid (Theme) Instead When:

• You want product cards to match your theme’s default WooCommerce styling
• You prefer theme-controlled product appearance over custom styling

Use Products Slider Instead When:

• You have many products and want a carousel layout
• You want to save vertical space on the page

Block Settings#

Display Options#

Control which product information is shown:

• Show Title: Toggle to display or hide the section title (default: on)
• Show Image: Toggle to display product images (default: on)
• Show Product Title: Toggle to display product names (default: on)
• Show Price: Toggle to display product prices (default: on)
• Show Rating: Toggle to display star ratings (default: on)
• Show Add to Cart: Toggle to display the Add to Cart button (default: on)
• Show View Cart: Toggle to display the View Cart button after adding to cart (default: on)

Products Settings#

Control which products are displayed:

• Product Source: Choose how products are selected
  • Random — Randomly selected products
  • Selected — Manually pick specific products
  • Category — Products from specific categories
  • Order Category — Products from the same categories as the ordered items
  • Tag — Products with specific tags
  • Order Tag — Products with the same tags as the ordered items
  • Order Category or Tag — Products matching either the order’s categories or tags
• Number of Products: Set how many products to display (1–20, default: 4)
• Select Products: Choose specific products (visible when source is “Selected”)
• Select Categories: Choose product categories (visible when source is “Category”)
• Select Tags: Choose product tags (visible when source is “Tag”)
• Order Products By: Sort products by Date, Popularity, Price (Low to High), Price (High to Low), Rating, Title, or Random

Style Settings#

All style controls are found in the Styles tab of the block inspector panel.

Layout#

Control the grid layout:

• Layout Type: Grid or List
• Columns: Number of columns (1–6)
• Justify Content: Horizontal alignment of grid items
• Align Items: Vertical alignment of grid items
• Gap: Vertical and Horizontal spacing between rows. It can be linked or unlinked.
  • Row Gap: Vertical spacing between rows
  • Column Gap: Horizontal spacing between columns

Responsive Support: Supported.

Sale Badge#

Customize the sale badge appearance on product images:

• Position: Choose badge placement on the image
• Horizontal Gap: Distance from the horizontal edge
• Vertical Gap: Distance from the vertical edge
• Background Color: Badge background color
• Text Color: Badge text color
• Font Family: Choose from Google Fonts
• Font Weight: Light (300) to Extra Bold (800)
• Font Size: Adjust badge text size
• Line Height: Adjust badge text line height
• Padding: Internal spacing within the badge
• Border Radius: Round the badge corners

Responsive Support: Supported.

Title Text#

Control the section title styling:

• Font Family (Google Fonts) — Access to 1,000+ Google Fonts
• Font Weight — Light (300) to Extra Bold (800)
• Text Color — Set distinct color for the title
• Font Size — Adjust title size for better hierarchy
• Line Height — Control spacing for title text
• Letter Spacing — Fine-tune spacing between characters (-10 to 10)
• Word Spacing — Adjust spacing between words (-10 to 50)
• Font Style — Italic, Underline, Strikethrough
• Text Transform — Uppercase, Lowercase, Capitalize, or None
• Text Alignment — Left, Center, or Right

Responsive Support: Supported.

Note: Only visible when the title is enabled in Title Settings.

Product Title#

Control the product name text styling:

• Font Family (Google Fonts), Font Weight, Text Color, Font Size, Line Height, Letter Spacing, Word Spacing, Font Style, Text Transform, Text Alignment

Responsive Support: Supported.

Product Price#

Control the product price text styling:

• Font Family (Google Fonts), Font Weight, Text Color, Font Size, Line Height, Letter Spacing, Word Spacing, Font Style, Text Transform, Text Alignment

Responsive Support: Supported.

Add to Cart#

Style the Add to Cart button:

Background:

• Background Color — Button background color
• Gradient Background — Gradient background for the button

Text:

• Text Color — Button text color
• Font Family (Google Fonts), Font Weight, Font Size, Line Height, Letter Spacing, Word Spacing, Font Style, Text Transform, Text Alignment

Spacing:

• Padding — Internal spacing within the button
• Margin — External spacing around the button

Border:

• Border — Border width, style, color, individual sides
• Border Radius — Round corners individually or all at once

Box Shadow:

• Shadow Color, Horizontal Offset, Vertical Offset, Blur, Spread, Inset

Responsive Support: Supported.

View Cart#

Style the View Cart button:

Background:

• Background Color — Button background color
• Gradient Background — Gradient background for the button

Text:

• Text Color — Button text color
• Font Family (Google Fonts), Font Weight, Font Size, Line Height, Letter Spacing, Word Spacing, Font Style, Text Transform, Text Alignment

Spacing:

• Padding — Internal spacing within the button
• Margin — External spacing around the button

Border:

• Border — Border width, style, color, individual sides
• Border Radius — Round corners individually or all at once

Box Shadow:

• Shadow Color, Horizontal Offset, Vertical Offset, Blur, Spread, Inset

Responsive Support: Supported.

Product Card#

Customize the individual product card appearance:

• Background — Card background color
• Spacing — Padding and margin around the card
• Border — Border width, style, color, individual sides, and border radius
• Box Shadow — Color, horizontal/vertical offset, blur, spread, and inset toggle
• Image to Content Gap — Space between the product image and content
• Content to Button Gap — Space between the content area and the button

Responsive Support: Supported.

Product Image#

Customize the product image appearance:

• Spacing — Padding and margin around the image
• Border — Border width, style, color, individual sides, and border radius

Responsive Support: Supported.

Background#

Customize the block background:

• Background Color — Color picker with custom hex values
• Background Image — Upload or select from media library with size, position, repeat, and attachment options
• Background Gradient — Linear and radial gradients with presets
• Background Overlay — 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.

Sizing#

Control block dimensions with precision.

• Width / Height
• Min Width / Min Height
• Max Width / Max Height

Responsive Support: Supported.

Border#

Add and customize borders.

• 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#

Add depth and dimension.

• 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.

Comparison with Related Block#