Products Grid (Theme)

The Products Grid (Theme) Block displays a grid of products using your theme’s native WooCommerce product template, ensuring visual consistency with the rest of your store.

Overview#

Block Name: Products Grid (Theme)
Category: RedFox Thank You
Purpose: Display a product grid using theme-native styling
Available In: Pro

What It Does#

This block:

• Displays products in a grid layout using your theme’s WooCommerce product template
• Automatically inherits your theme’s product card styling, buttons, and layout
• Supports the same flexible product sourcing as the Products Grid block
• Ensures the thank you page products match the look and feel of the rest of your store

When to Use#

Use This Block When:

• You want product cards to match your theme’s default WooCommerce styling
• Maintaining visual consistency across your store is a priority
• Your theme has well-styled product templates you want to reuse
• You prefer minimal styling configuration

Use Products Grid Instead When:

• You want full control over product card styling (colors, typography, spacing, borders, shadows)
• You need custom sale badge styling
• You want to style product images, titles, and prices independently

Block Settings#

Display Settings#

Control the section title:

• Show Title: Toggle to display or hide the section title (default: on)

The title text can be edited directly in the block editor.

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

Note: Product card styling (images, titles, prices, buttons) is controlled entirely by your active theme. An info notice is displayed in the settings panel to indicate this.

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
• Row Gap: Vertical spacing between rows
• Column Gap: Horizontal spacing between columns
• Link Gaps: Toggle to link row and column gap values

Responsive Support: Supported — set different column counts and gaps per device.

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.

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 Products Grid#