Optimizing Product Display: Mastering 'Items Per Page' in WooCommerce Blocks

In e-commerce, product catalog presentation is paramount. A well-organized grid enhances user experience and influences conversions. Many WooCommerce store owners using the block editor face a challenge: the elusive "items per page" setting for the Product Collection block, especially when integrated into site design. This article explains why these settings may vanish and provides actionable strategies to optimize product pages for customer engagement and sales.

The Disappearing Act: Understanding Product Collection Block Settings

Store owners report that after updates or specific configurations, control over products displayed per page in the Product Collection block seems to disappear. While "items per row" remains, the crucial "items per page" option becomes inaccessible, leading to suboptimal display and an unexpectedly low product count. This can make a shop feel "unusable," forcing excessive scrolling.

The root cause lies in how WooCommerce blocks interact with WordPress "template parts." When a Product Collection block becomes a reusable template part, WooCommerce, by design, strips "query-level settings." "Items per page" is a query-level parameter, influencing the database query. "Items per row" is a layout property, generally preserved. This distinction, while logical for development, creates usability hurdles for store owners needing granular control.

Impact on User Experience and Conversion

An insufficient number of products per page significantly impacts your e-commerce store: increased friction from excessive scrolling, reduced product discovery, higher bounce rates, and ultimately, lost sales. Optimizing product density is a strategic decision directly affecting your bottom line.

Strategic Solutions for Regaining Control

Fortunately, store owners have several methods to manage the "items per page" setting effectively, balancing reusability with precise control.

1. Direct Block Implementation: The Simplest Approach

The most straightforward way to retain full control over "items per page" is to use the Product Collection block directly within your page or template, without converting it into a template part. All query-level settings remain accessible in the block's sidebar. Use this for specific catalog pages or landing pages requiring unique product display. Simply add the block and adjust "Items per page" from its sidebar.

2. Unlinking Template Parts: A Situational Workaround

If you've converted a Product Collection block into a template part and need to adjust its "items per page" for a specific instance, you can temporarily "unlink" it. This converts the template part back into a standalone block for that page, resurfacing individual settings. Use this for a quick fix or if that instance no longer needs to be tied to the global template. Navigate to the page, select the template part, and choose "Detach block from template part" (wording may vary). Once detached, "Items per page" should reappear. Unlinking means future template part updates won't apply to this detached instance.

3. Advanced Customization: Hardcoding postsPerPage

For store owners comfortable with code or working with a developer, hardcoding the postsPerPage attribute directly into the block's markup offers precise and permanent control, bypassing dynamic settings. Use this for fixed product counts across multiple block instances or within a custom theme. To implement via the Block Editor's Code editor: Add a Product Collection block. Switch to "Code editor" view. Locate the block's HTML comment (e.g., ). Add or modify the postsPerPage attribute:

Switch back to visual editor. This method requires careful handling; direct code edits can be overwritten if not managed within a child theme. Always back up your site.

Beyond the Settings: Optimizing Your Product Display

While controlling "items per page" is crucial, it's one piece of a larger puzzle. Ensure high-quality product images, compelling descriptions, and responsive design. Consider features like infinite scroll or "load more" buttons for smoother browsing.

Looking Ahead: Enhancing Block Flexibility

The desire for more flexible global settings for "products per page" within blocks, or template-level overrides even with template parts, is a common request. As the WordPress and WooCommerce block ecosystems evolve, we anticipate refinements balancing reusability with granular control. By understanding these mechanics and applying strategic solutions, you can overcome disappearing settings and ensure your product pages deliver an optimal, conversion-focused browsing experience.