Products Counter Block

A text component that displays the range of products currently shown and the total number of results.

What It Does

The Products Counter block shows customers how many products they’re viewing out of the total available (e.g., “Showing 1-12 of 48 products”). It updates automatically when customers filter, sort, or paginate through products.

Use cases:

• Product listing pages
• Search results pages
• Collection/category pages
• Shop pages with pagination
• Filtered product views

How to Add It

Requirements: Must be used inside a Products block.

1. Add a Products block to your page
2. Click + inside the Products block
3. Search for “Products counter”
4. Click to insert

Block Settings

Display Format

Choose how to display the product count:

Format options:

• Range format: “Showing 1-12 of 48 products” (default)
• Total only: “48 products”
• Current page: “Page 1 of 4”
• Custom format: Use placeholders like {start}, {end}, {total}

Example custom formats:

• "Viewing {start}-{end} of {total} items"
• "{total} results found"
• "Products {start} to {end}"

Text Customization

Product label:

• “products” (default)
• “items”
• “results”
• Custom text (supports singular/plural)

Examples:

• “Showing 1-12 of 48 products”
• “Showing 1-12 of 48 items”
• “Displaying 1-12 of 48 results”

Positioning

Dropzone: Place in specific layout positions within Products block:

• Above products (default)
• Below products
• Sidebar
• Toolbar (horizontal layout with sort/filters)

Visibility Options

Show/hide when:

• Always show counter
• Hide when no results
• Hide when only one page of results
• Hide when fewer than X products

Customization

Styling the Counter

/* Counter container */
.wpe-commerce-products-counter {
  font-size: 0.875rem;
  color: #666;
  padding: 0.5rem 0;
}

/* Bold the numbers */
.wpe-commerce-products-counter strong {
  color: #333;
  font-weight: 600;
}

/* Align to right side */
.wpe-commerce-products-counter {
  text-align: right;
}

Toolbar Integration

/* Horizontal toolbar with sort + counter */
.wpe-commerce-products-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid #eee;
}

.wpe-commerce-products-toolbar .wpe-commerce-products-sort-control {
  flex: 0 0 auto;
}

.wpe-commerce-products-toolbar .wpe-commerce-products-counter {
  flex: 0 0 auto;
  margin-left: auto;
}

Mobile Responsive

/* Hide counter on mobile to save space */
@media (max-width: 768px) {
  .wpe-commerce-products-counter {
    display: none;
  }
}

/* Or show simplified version on mobile */
@media (max-width: 768px) {
  .wpe-commerce-products-counter {
    font-size: 0.75rem;
    text-align: center;
  }
}

Common Patterns

Toolbar Position

Horizontal bar with sort dropdown and counter:

Products block
├── Products Sort (Above products dropzone)
├── Products Counter (Above products dropzone)
├── Products Grid
└── Products Pagination

Result:

[Sort by: Price ▼]              Showing 1-12 of 48 products
[Product] [Product] [Product]

Sidebar Position

Counter at top of sidebar filters:

Products block
├── Products Counter (Sidebar dropzone)
├── Products Filters (Sidebar dropzone)
└── Products Grid (Main area)

Result:

Sidebar:               Main Area:
48 products found      [Product] [Product]
[Filters...]           [Product] [Product]

Below Pagination

Counter shows context for pagination:

Products block
├── Products Grid
├── Products Pagination (Below products dropzone)
└── Products Counter (Below products dropzone)

Result:

[Product] [Product] [Product]
[« Previous] [1] [2] [3] [4] [Next »]
Showing 13-24 of 48 products

How It Works

Dynamic Updates

The counter automatically updates when:

1. Customer filters products

   • Before: “Showing 1-12 of 48 products”
   • After filtering: “Showing 1-8 of 8 products”

2. Customer sorts products

   • Order changes, count stays same
   • “Showing 1-12 of 48 products” (different products shown)

3. Customer paginates

   • Page 1: “Showing 1-12 of 48 products”
   • Page 2: “Showing 13-24 of 48 products”
   • Page 4: “Showing 37-48 of 48 products”

4. Customer searches

   • Before: “Showing 1-12 of 200 products”
   • After search: “Showing 1-5 of 5 products”

Count Calculation

Start number:

(current_page - 1) × products_per_page + 1

End number:

min(current_page × products_per_page, total_products)

Examples:

• Page 1, 12 per page, 48 total: 1-12 of 48
• Page 2, 12 per page, 48 total: 13-24 of 48
• Page 4, 12 per page, 48 total: 37-48 of 48
• Page 1, 12 per page, 5 total: 1-5 of 5

Block Context

Must be used inside:

• Products block

Uses context from Products block:

• wpe-commerce/productsDropzones - Available layout positions
• wpe-commerce/productsFullPayload - Current product data and pagination
• wpe-commerce/productsIsFetching - Loading state

Does not work:

• Standalone (requires parent Products block)
• Inside Single Product block
• Outside Products block

Technical Details

Block name: wpe-commerce/products-count

Attributes:

• dropzone (string) - Layout position
• format (string) - Display format template
• label (string) - Product label text
• showWhenEmpty (boolean) - Show when no results

Supports:

• Alignment
• Typography (font size, weight, color)
• Custom CSS classes
• Spacing (padding, margin)

Does not support:

• Background color from block UI (use custom CSS)
• Border controls from block UI (use custom CSS)

Troubleshooting

Counter not updating

Check:

1. Block is inside Products block
2. Products block is fetching data correctly
3. JavaScript is not blocked/errored
4. Browser console for errors

Fix:

• Hard refresh page (Cmd+Shift+R / Ctrl+Shift+F5)
• Check browser console for JavaScript errors
• Verify Products block displays products correctly

Wrong product count shown

Common causes:

Showing “1-12 of 12” when more products exist:

• Products block not loading all results
• Pagination not configured on Products block
• BigCommerce API returning limited results

Showing “1-12 of 0”:

• Products block data not loaded yet
• Counter rendering before data fetch completes
• Check for JavaScript errors

Fix:

1. Edit Products block settings
2. Verify “Products per page” setting
3. Ensure pagination is enabled if needed
4. Check that BigCommerce connection is working

Counter shows during loading

Issue: Counter briefly shows “0-0 of 0” while products load.

Fix with CSS:

/* Hide counter while products are fetching */
.wpe-commerce-products-container.is-loading .wpe-commerce-products-counter {
  opacity: 0.5;
}

/* Or hide completely */
.wpe-commerce-products-container.is-loading .wpe-commerce-products-counter {
  display: none;
}

Counter text not customizing

Check:

1. Using correct attribute format
2. Placeholders are spelled correctly: {start}, {end}, {total}
3. Curly braces used (not parentheses or square brackets)

Valid placeholders:

• {start} - First product number on current page
• {end} - Last product number on current page
• {total} - Total products matching current filters

Invalid examples:

• (start) - Wrong brackets
• {Start} - Wrong capitalization
• {count} - Not a valid placeholder

Counter disappears on filter

If counter vanishes when customer applies filters:

Check:

1. “Hide when no results” setting
2. Filters returning 0 products
3. Counter visibility conditions

Fix:

• Edit Products Counter block
• Uncheck “Hide when no results” if you want it always visible
• Or add CSS to show “0 products found” message

Related Blocks

• Products - Parent container block
• Products Sort - Sort product results
• Products Filters - Filter products by attributes
• Products Pagination - Navigate between pages
• Products Grid - Display products in grid layout