Add WooCommerce Reviews Pagination – Limit WooCommerce Reviews

In case you are building a WordPress Theme from Scratch, and you are using WooCommerce, you should consider Adding WooCommerce Reviews Pagination to Limit your WooCommerce Reviews. Obviously, nobody will notice anything at the beginning, but once your WooCommerce Products get some reviews, you will face a serious performance issue.

Avoid an excessive DOM size

Here’s an example DOM of WooCommerce Reviews List:

We have +10 DOM elements per review. What if we had +100 reviews? BANG, you get this cool Google Lighthouse error:

This is going to affect your users, especially Mobile Traffic, and there is nothing new here, this is a very old problem, we had it with our Blog Posts and even Social Media Posts and the solution is easy – Don’t render everything at once, and use a Pagination (Either clicks on a specific page – Next, or Previous, or Infinite Scroll).

How to add WooCommerce Reviews Pagination?

• Go to your WordPress Dashboard
• From the Settings menu, choose Discussion
• Under Other comment settings, check the “Break comments into pages with…” option with the configuration that suits your website/situation

How to Limit WooCommerce Product Reviews to X?

• Follow the steps mentioned above
• Under the Other comment settings, change the value of “Break comments into pages with X” to the number you want (Assuming 10)
• Choose which Reviews Page you want to display by default – “First” (Oldest) or “Last” (Newest)
• Finally, choose which sorting style you want; Older at the top, or Newer at the top

After limiting your WooCommerce Product Reviews, you will notice that your Google Lighthouse Performance score has been increased – It was 80 and becomes 91 in my case!

Broken WooCommerce Reviews Pagination Style

It’s very natural to get a broken WooCommerce Pagination, especially if you’re building your WordPress Theme from scratch where no styles given (and so many overwriting). It might be looking like this:

For me, I already have a dedicated style file for WooCommerce-related Pages/Styles, and I will use the WooCommerce Pagination DOM to give it a custom style, check its DOM elements:

Here’s how my pretty basic styles look like:

If you’re interested, here’s the CSS Code (Easy to convert to SASS/LESS):

/** Reviews Pagination **/
 nav.woocommerce-pagination {
     margin-top: 1rem;
}
 nav.woocommerce-pagination .page-numbers li {
     display: inline-block;
     margin: 5px;
}
 nav.woocommerce-pagination .page-numbers li span.page-numbers.current {
     background: #000;
     color: #fff;
     padding: 6px;
     font-weight: bold;
}
 nav.woocommerce-pagination .page-numbers li a.page-numbers {
     padding: 5px;
}

That’s it for today’s article. I hope you find it helpful!