Product Search Results Template

Overview

The Product Search Results template controls the layout and design of your product search results page. This template provides a block-based foundation for displaying search results, filters, and product grids.

This is one of two core templates provided by Commerce Connect (the other is Single Product template).

What It Controls

The Product Search Results template defines:

• Product grid layout - How search results are displayed (grid columns, spacing, card design)
• Filter sidebar - Where filters appear and which filter types are shown
• Search controls - Sort options, result count, active filters display
• Page structure - Header, main content area, sidebar arrangement

Default Layout

Out of the box, the Product Search Results template includes:

Main Content Area

• Products Grid - Displays matching products in a responsive grid
• Products Count - Shows total number of results (“Showing 24 products”)
• Products Sort Control - Dropdown for sorting (price, name, newest)

Sidebar

• Products Filters - Complete filter system with:
  • Price range filter
  • Category filter
  • Brand filter
  • Color/size/attribute filters (based on your BigCommerce product setup)
• Products Filter Selections - Active filter tags showing applied filters

Search Header

• Products Search Label - Displays current search term (“Results for: coffee table”)

How to Customize

Access the Template

1. Navigate to Appearance > Site Editor in WordPress® admin
2. Click Templates in the left sidebar
3. Filter by Author is: wpe-mustang to show Commerce Connect templates
4. Click Product Search Results to open the template

Editing the Template

The template is fully editable using WordPress®‘s block editor:

Change Grid Layout

1. Select the Products Grid block
2. In the right sidebar, adjust:
   • Columns - Number of products per row (2, 3, 4, or 6 columns)
   • Gap - Spacing between products
   • Alignment - Full width, wide, or contained

Customize Filters

1. Select the Products Filters block in the sidebar
2. Toggle individual filters on/off:
   • Show/hide price filter
   • Show/hide category filter
   • Show/hide brand filter
   • Show/hide attribute filters
3. Adjust filter display order by dragging blocks

Modify Sort Options

1. Select the Products Sort Control block
2. Choose which sort options to display:
   • Price: Low to High
   • Price: High to Low
   • Name: A-Z
   • Newest First
   • Best Selling

Add Custom Content

Mix Commerce Connect blocks with regular WordPress® blocks:

• Add a Heading block above results
• Insert a Paragraph block for search tips
• Include a Columns block for featured categories
• Add a Spacer block for layout control

Example Customizations

2-Column Grid with Large Product Cards

1. Select Products Grid block
2. Set Columns to 2
3. Set Gap to Large (32px)
4. Select individual product card blocks inside
5. Adjust product image size to Large

Horizontal Filter Bar Instead of Sidebar

1. Create a new Group block above the products grid
2. Set the group to Row layout direction
3. Move filter controls into this horizontal group
4. Remove the sidebar container

Add Search Suggestions

1. Above the products grid, add a Heading block
2. Below it, add a Categories block showing popular categories
3. Add a Paragraph block: “Popular searches: coffee tables, linen shirts, candles”

Working with Blocks

Available Blocks

You can use any of these blocks in the Product Search Results template:

Product Collection Blocks:

• Products - Main grid container
• Products Grid - Grid layout
• Products Count - Result count
• Products Sort Control - Sort dropdown
• Products Filters - Filter system
• Products Filter Control - Individual filters
• Products Filter Selections - Active filters
• Products Search Label - Search term display

Standard WordPress® Blocks:

• Heading, Paragraph, Image, Spacer, Separator
• Columns, Group, Row, Stack
• Buttons, List, Quote

Block Settings

Each Commerce Connect block includes:

• Layout settings - Columns, spacing, alignment, width
• Display options - Toggle visibility of elements
• Style settings - Colors, typography, borders, shadows
• Advanced settings - Custom CSS classes, HTML attributes

Workflow

Step-by-Step Customization

1. Plan your layout

   • Sketch the desired search results page structure
   • Decide on grid columns, filter placement, and custom content

2. Open the template

   • Navigate to Appearance > Site Editor > Templates
   • Filter by wpe-mustang author
   • Click Product Search Results

3. Modify the structure

   • Adjust the products grid (columns, spacing)
   • Configure which filters appear in the sidebar
   • Customize sort options and result count display

4. Add custom content

   • Insert headings, paragraphs, or images
   • Add categories or featured products
   • Include search tips or promotional banners

5. Style the blocks

   • Apply colors and typography
   • Set spacing and padding
   • Add borders or shadows

6. Preview your changes

   • Click Preview to see the live search results page
   • Test with different search terms
   • Verify filters work correctly

7. Publish the template

   • Click Save to publish your changes
   • All product search results will now use this layout

Customization Examples

Example 1: Minimal Search Results (No Sidebar)

Remove the sidebar and show only essential elements:

1. Delete the Products Filters sidebar block
2. Add a horizontal Group block above the grid
3. Move Products Sort Control and Products Count into this group
4. Set the group to Row layout with Space Between justification
5. Increase grid columns to 4 for more products per row

Example 2: Filter-First Layout

Emphasize filtering for large catalogs:

1. Move Products Filters above the products grid
2. Set filters to horizontal layout (Row direction)
3. Add a Heading block: “Narrow Your Search”
4. Show Products Filter Selections prominently above results
5. Use 3-column grid to show more products

Example 3: Search Results with Category Suggestions

Help users discover related categories:

1. Below the search label, add a Heading: “Related Categories”
2. Insert a Categories block showing relevant categories
3. Add a Separator block for visual division
4. Below that, show the standard products grid with filters

Advanced Customization

Custom CSS

Target the search results template with custom CSS:

/* Search results container */
.wp-block-commerce-connect-products {
  max-width: 1400px;
  margin: 0 auto;
}

/* Products grid spacing */
.products__grid {
  gap: 3rem;
}

/* Filter sidebar styling */
.wp-block-commerce-connect-products-filters {
  background: #f9f9f9;
  padding: 2rem;
  border-radius: 8px;
}

/* Search label */
.wp-block-commerce-connect-products-search-label {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

Add custom CSS in Appearance > Customize > Additional CSS.

Template Parts

Break the search results template into reusable parts:

1. Create a Template Part for the filter sidebar
2. Create a Template Part for the search header
3. Reuse these parts in other templates (category pages, shop page)

Dynamic Content

Combine search results with dynamic WordPress® content:

• Add a Query Loop block to show blog posts related to the search term
• Insert a Latest Posts block showing recent articles
• Include a Custom HTML block for third-party search widgets

Troubleshooting

Filters Not Appearing

Cause: Filter blocks may be hidden or removed from template.

Solution:

1. Open the Product Search Results template in Site Editor
2. Ensure Products Filters block exists
3. Check that individual filter controls are enabled
4. Verify your BigCommerce products have filterable attributes

Grid Layout Broken

Cause: Conflicting CSS from theme or plugins.

Solution:

1. Inspect the page with browser DevTools
2. Look for CSS conflicts on .products__grid class
3. Add custom CSS to override conflicting styles
4. Consider switching to a block-based theme for better compatibility

Search Results Not Updating

Cause: Template changes not saved or caching issue.

Solution:

1. Ensure you clicked Save in the Site Editor
2. Clear your site cache (WP Engine cache, CDN cache)
3. Hard refresh your browser (Cmd+Shift+R)
4. Check that product sync is active (Commerce Connect > Settings > Products)

Best Practices

Design

• Use 3-4 column grids for optimal product display on desktop
• Show 2 columns on mobile using responsive settings
• Keep filters visible - Don’t hide them behind a toggle on desktop
• Display active filters prominently so users can easily remove them

Performance

• Limit products per page to 24-48 for faster loading
• Use image optimization - BigCommerce serves optimized images via CDN
• Enable pagination instead of infinite scroll for large result sets
• Cache the template - WP Engine automatically caches this template

User Experience

• Show result count so users know how many products matched
• Provide clear sort options - Price and relevance are most common
• Display “No results” message when search returns nothing
• Suggest related products or categories when no exact matches

Related Documentation

• Single Product template - The other core plugin template
• Products Block - Main products grid block
• Products Filters Block - Filter system
• Site Editor Guide - Using the WordPress® Site Editor
• Block Customization - Styling blocks with CSS

Next Steps

• Customize the Single Product template
• Explore all available blocks →
• Learn about product sync →