Case study: improving WooCommerce product visibility with optimized shop and category layouts

Case study: improving WooCommerce product visibility with optimized shop and category layouts

Issue background

A retail client requested an adjustment to the product display layout on their WooCommerce-powered website. The main concern was that both the Shop and Category pages were displaying too few products before the “Load More” button appeared.

This layout issue was especially noticeable on mobile devices, where only a handful of products were visible without scrolling or clicking “Load More.” The limited view made it harder for customers to browse efficiently and reduced product engagement.

The goal was to increase the number of visible products per page on both desktop and mobile while maintaining a balanced grid layout and site performance.

Diagnosis

Freshy’s development team reviewed the theme settings and plugin configurations to identify where the product limit was being controlled. The following findings emerged:

• The site was using a custom theme integrated with WooCommerce that defined a default product limit of 16 items per page.
• The limit was enforced at the query level using the WooCommerce loop_shop_per_page filter, and was not editable through the standard WordPress admin interface.
• No visual builder or layout plugin overrides were in place, meaning the setting needed to be changed programmatically.
• The “Load More” functionality was powered by AJAX, so the new configuration had to preserve pagination logic to prevent infinite loading errors.

Given that there was no active conflict with caching or CSS, the issue was purely theme-level — requiring a backend adjustment.

Resolution steps

Freshy’s developer implemented and tested the following solution:

1. Adjusted WooCommerce product query limit
   Added a code snippet in the site’s custom functionality plugin to increase the default product count:

   add_filter( 'loop_shop_per_page', function( $cols ) {
       return 24; // Show 24 products per page
   }, 20 );

   This modification ensured WooCommerce displayed 24 products per page across both the Shop and Category views.

2. Verified responsive layout
   Tested the updated layout on multiple screen sizes. Confirmed that the product grid maintained consistent spacing and didn’t break the row alignment on smaller devices.
3. Performance testing
   Checked page load times and “Load More” responsiveness using GTmetrix. Confirmed that the increase in product count did not significantly impact performance or cause slow AJAX reloads.
4. Client validation
   Shared the updated Shop and Category layouts with the client for review. Received approval after confirming that more products were visible at once and the scrolling experience improved on both desktop and mobile.

Final outcome

The WooCommerce product visibility enhancement was completed successfully. The Shop and Category pages now display 24 products per page, striking a balance between visibility and performance.

Users can now browse more products at a glance, resulting in:

• Improved user experience — fewer clicks and scrolls to view the catalog.
• Higher engagement — customers see more products before deciding to click “Load More.”
• Better conversion flow — faster access to relevant products increases browsing time and potential cart additions.

The change required no additional plugins or theme replacements, keeping the site lightweight and optimized.

Need help optimizing your WooCommerce store layout?

If your online store feels limited by its layout, pagination, or product visibility, Freshy can customize your WooCommerce templates to improve user experience and performance — without heavy plugins or theme bloat.
👉 Contact Freshy to optimize your WooCommerce site today.