How To Remove Woocommerce Pagination

How to Remove WooCommerce Pagination: A Beginner-Friendly Guide

WooCommerce is a fantastic platform for building your online store. But sometimes, you might want to tweak its default settings to better suit your brand and the way you want customers to browse your products. One common customization is removing the pagination on your shop and category pages. Pagination, those little page numbers at the bottom, can sometimes make the browsing experience feel clunky, especially if you have a smaller number of products or prefer a more visually seamless flow.

This article will walk you through different methods to remove WooCommerce pagination, making it super easy, even if you’re new to WordPress and coding. We’ll cover various approaches, so you can choose the one that best fits your comfort level.

Why Remove WooCommerce Pagination?

Before diving into *how*, let’s quickly understand *why* you might want to remove pagination:

Improved User Experience (UX): If you have a relatively small product catalog, pagination might feel unnecessary. Removing it can lead to a smoother, more engaging browsing experience. Think of it like scrolling through a single, visually appealing page versus clicking “Next,” “Next,” “Next.”
Better Mobile Experience: On mobile devices, excessive clicking can be frustrating. A single scrolling page often provides a superior experience.
Infinite Scroll (or “Load More” Button) Implementation: Removing pagination allows you to replace it with alternatives like infinite scrolling or a “Load More” button, which can further enhance UX. Imagine scrolling through a social media feed – that’s similar to how infinite scrolling works.
Aesthetic Preference: You might simply prefer a cleaner, less cluttered look for your shop pages.

Methods to Remove WooCommerce Pagination

Here are a few ways to eliminate pagination from your WooCommerce store. We’ll start with the easiest and move to more code-based solutions.

#### 1. Adjusting Products Per Page (Often the Easiest Solution)

Sometimes, you don’t need to completely remove pagination, just reduce its visibility. WooCommerce automatically paginates content when the number of products exceeds the configured “products per page” setting. If you increase this setting to be equal to or greater than the total number of products you display, pagination will disappear.

How to do it:

1. Go to WordPress Dashboard > Appearance > Customize.

2. Navigate to WooCommerce > Product Catalog.

3. Look for the “Products per row” and “Rows per page” settings. Multiply these two numbers together. The result will be your current “Products per Page” value.

4. Increase the “Rows per page” number until the resulting “Products per page” is greater than the total number of products you have in that category. For example, if you have a total of 20 products and your current “Products per page” is 12 (3 products per row * 4 rows per page), increase the “Rows per page” to at least 7 (3 products per row * 7 rows per page = 21 products per page).

5. Click “Publish”.

This is the simplest method and works well if you only have a limited number of products. If your product catalog is frequently updated, you may need to adjust this setting periodically.

#### 2. Using a Code Snippet (Recommended for Most Users)

This method involves adding a small snippet of code to your theme’s `functions.php` file (or, even better, a child theme’s `functions.php` file to prevent your changes from being overwritten during theme updates, or a dedicated plugin for code snippets).

Caution: Editing the `functions.php` file directly can be risky. If you make a mistake, it could break your website. Always back up your website before making any code changes!

Steps:

1. Access your `functions.php` file. This can be done through:

File Manager (cPanel): Log in to your web hosting account’s cPanel and navigate to the File Manager. Find your WordPress installation directory (usually `public_html`). Then, navigate to `wp-content/themes/[your-theme-name]/functions.php`. If you are using a child theme, navigate to the child theme’s directory instead.
FTP Client (e.g., FileZilla): Connect to your website using an FTP client and navigate to the same file path.
Code Snippets Plugin: The safest and recommended method. Install a plugin like “Code Snippets” (available in the WordPress plugin directory). This allows you to add code snippets without directly modifying theme files.

2. Add the following code snippet:

add_filter( 'woocommerce_pagination_args', 'remove_woocommerce_pagination' );

function remove_woocommerce_pagination( $args ) {

$args[‘total’] = 0;

return $args;

}

3. Save the changes. If using File Manager or FTP, save the `functions.php` file. If using a Code Snippets plugin, activate the snippet.

Explanation of the Code:

`add_filter( ‘woocommerce_pagination_args’, ‘remove_woocommerce_pagination’ );`: This line tells WordPress to “hook” into the WooCommerce pagination arguments and apply a custom function (`remove_woocommerce_pagination`).
`function remove_woocommerce_pagination( $args ) { … }`: This defines the custom function.
`$args[‘total’] = 0;`: This is the key line. It sets the total number of pages for the pagination to 0, effectively removing the pagination links because WooCommerce thinks there’s only one page.
`return $args;`: This returns the modified arguments back to WooCommerce.

Real-Life Example: Let’s say you have a fashion store with a limited-time collection of 15 t-shirts. You want customers to see all shirts on a single page for a clean look. This code snippet is perfect.

#### 3. Using CSS (Less Recommended but Can Work in Specific Cases)

You can use CSS to hide the pagination elements, but this is generally not recommended as the underlying code is still generating the pagination, even if it’s not visible. It’s a less efficient approach. Use this only if you have a very specific reason and understand the limitations.

How to do it:

1. Go to WordPress Dashboard > Appearance > Customize > Additional CSS.

2. Add the following CSS code:

.woocommerce ul.page-numbers {

display: none !important;

}

3. Click “Publish”.

Why it’s less recommended: While this hides the pagination visually, the code is still running behind the scenes, which could potentially impact performance slightly. Plus, screen readers would still announce the pagination elements, which isn’t ideal for accessibility.

#### 4. Theme-Specific Options (Check Your Theme Settings)

Some WooCommerce themes come with built-in options to control pagination. Check your theme’s settings panel (usually located under “Appearance > Theme Options” or something similar) to see if there’s a specific setting to disable or customize pagination. This is the easiest method if your theme supports it.

Choosing the Right Method

Few Products & Customizer Comfort: If you have a small number of products and are comfortable with the WordPress Customizer, adjusting the “Products per page” setting (Method 1) is the easiest.
General Use, Simple Solution: For most users, the code snippet method (Method 2) is the recommended approach. It’s clean, effective, and doesn’t rely on CSS tricks. Use a Code Snippets plugin for safety.
Specific CSS Requirements: Use CSS (Method 3) only if you have a very specific visual requirement and understand the limitations.
Theme Flexibility: If your theme offers pagination control, use its built-in settings (Method 4) for the easiest solution.

Replacing Pagination (Optional)

Removing pagination is often the first step in implementing alternative browsing experiences:

Infinite Scroll: Plugins like “YITH WooCommerce Infinite Scrolling” allow users to load more products as they scroll down the page.
“Load More” Button: Plugins like “Ajax Load More” add a button that, when clicked, loads the next set of products.

These options can offer a more modern and engaging browsing experience for your customers.

Conclusion

Removing WooCommerce pagination is a relatively simple task that can significantly improve the user experience of your online store. Choose the method that best suits your skill level and your store’s needs. Remember to always back up your website before making any code changes. Good luck!