<p><span style="font-weight: 400">The WooCommerce pagination plugin provides three different pagination options to help you improve your website’s catalog browsing experience. Replace your current pagination with:</span></p>
<ul>
<li><strong>Infinite scroll</strong> ― load more products as customers scroll down the page.</li>
<li><strong>Ajax pagination</strong> ― enable Ajax pagination to load more products without page reloads.</li>
<li><strong>Load More button</strong> ― add an Ajax-based Load More button and allow customers to load more products with one click, without refreshing pages.</li>
</ul>
<hr class="wccom-product-heading__hr" />
<p><span style="font-weight: 400">Provide customers with WooCommerce pagination, infinite scroll, or load more buttons so that your customers no longer need to reload pages to navigate through the product catalog. Display ‘back-to-top” and “show less” buttons and make it easy for customers to scroll back to the top.</span></p>
<p><span style="font-weight: 400">Customers can easily navigate through the entire catalog by using one of three pagination methods provided by the WooCommerce product pagination plugin. It will improve website engagement and retention by decreasing load times and making content browsing seamless.</span></p>
<h2>Ajax Pagination and Infinite Scroll Features</h2>
<ul>
<li><span style="font-weight: 400">Three different product loading methods:</span></li>
</ul>
<ol>
<li><span style="font-weight: 400">Infinite scroll</span></li>
<li><span style="font-weight: 400">Ajax based pagination</span></li>
<li>Load more button</li>
</ol>
<ul>
<li><span style="font-weight: 400">Select the number of products to load initially</span></li>
<li>Choose the number of products to load on click</li>
<li><span style="font-weight: 400">Choose pagination style and type</span></li>
<li><span style="font-weight: 400">Upload custom “loading icon” for infinite scroll and load more button</span></li>
<li><span style="font-weight: 400">Customize position and color for Ajax pagination and infinite scrolling.</span></li>
<li><span style="font-weight: 400">Enable the “Back to Top” button</span></li>
<li><span style="font-weight: 400">Display the “Show Less” button when the Load More button is enabled</span></li>
<li><span style="font-weight: 400">Customize load more button text, background, and text color</span></li>
</ul>
<h3>Ajax-based pagination</h3>
<p><span style="font-weight: 400">WooCommerce load more products plugin enables you to replace the default pagination with an Ajax-based pagination style. It allows you to display more products without reloading the page. You can choose from different pagination types, such as arrows or next/previous.</span></p>
<p><img class="aligncenter wp-image-18734002842419 size-full" src="https://woocommerce.com/wp-content/uploads/2023/11/2023-11-10_15-50-22.png" alt="Ajax-based pagination" width="850" height="573" /></p>
<h3>Enable infinite product scroll</h3>
<p><span style="font-weight: 400">Load more products as the user scrolls down with the WooCommerce infinite scroll plugin. Choose how many products to display initially and select the number of products after which the footer will show and you can load more products if you want with the laid more button.</span></p>
<p><img class="aligncenter wp-image-18734002842422 size-full" src="https://woocommerce.com/wp-content/uploads/2023/11/2023-11-10_15-48-17.png" alt="Enable infinite product scroll" width="858" height="553" /></p>
<h3><b>Display Load More button</b></h3>
<p><span style="font-weight: 400">Instead of loading products on a scroll or with pagination, you can place an Ajax-based Load More button to let customers load more products with a single click. The WooCommerce pagination plugin allows you to upload the product loading icon and customize the text of the “Load More” button.</span></p>
<p><img class="aligncenter wp-image-18734002842424 size-full" src="https://woocommerce.com/wp-content/uploads/2023/11/2023-11-10_16-07-56.png" alt="Display Load More button" width="836" height="533" /></p>
<h3><strong>Choose from multiple pagination styles</strong></h3>
<p><span style="font-weight: 400">With the WooCommerce custom pagination plugin, you can choose from multiple Ajax pagination styles which include:</span></p>
<ul>
<li>Highlighting selected links</li>
<li>Large number of links</li>
<li>Custom input</li>
<li>Round corner pagination</li>
<li>Pagination link application</li>
<li>Simple application</li>
<li>Next and Previous links</li>
</ul>
<p><img class="aligncenter wp-image-18734002842421 size-full" src="https://woocommerce.com/wp-content/uploads/2023/11/image5-1.png" alt="Choose from multiple pagination styles" width="676" height="200" /></p>
<h3><b>Add a Show Less button</b></h3>
<p><span style="font-weight: 400">When you have enabled the “Load More” button, the WooCommerce infinite scroll plugin allows you to display a “Show Less” button. The “show less” button can be customized to fit your store’s theme.</span></p>
<p><img class="aligncenter wp-image-18734002842428 size-full" src="https://woocommerce.com/wp-content/uploads/2023/11/2023-11-10_16-08-48.png" alt="Add a Show Less button" width="822" height="542" /></p>
<h3><strong>Include a Back-to-Top icon</strong></h3>
<p><span style="font-weight: 400">The “back to top” option makes it easier for customers to scroll back up using the WooCommerce load more products plugin. It allows you to customize the “back to top” icon, and change the icon color, and position.</span></p>
<p><img class="aligncenter wp-image-18734002842430 size-full" src="https://woocommerce.com/wp-content/uploads/2023/11/2023-11-10_16-06-22.png" alt="Include a Back-to-Top icon" width="953" height="464" /></p>
<h3><b>Extensive customization options</b></h3>
<p><span style="font-weight: 400">The WooCommerce product pagination plugin empowers you with a wide range of customization options. You can choose the color, position, product loading icons, and text for each product loading type. Moreover, you can customize the “Load More” and “Back to Top” buttons as per your requirements.</span></p>

Ajax Pagination & Infinite Scroll

<p>Load products quickly with Ajax pagination, infinite scroll, and a Load More button.</p>

<ul class="wccom-tick-list-primary">
<li>Increase customer satisfaction and sales with an intuitive layout that separates products by subcategory</li>
<li>Select which category pages to alter, and which to render as normal</li>
<li>Easily configure the number of products per subcategory to display on the shop and catalog pages</li>
<li>Known compatibility with WooCommerce Themes and the Genesis Framework</li>
<li>Flexible, overrideable architecture allows customization and support for additional themes and frameworks</li>
</ul>
<hr class="wccom-product-heading__hr" />
<h2>Show Your Shop Catalog by Category and Subcategory</h2>
<p>The <strong>WooCommerce Nested Category Layout extension</strong> allows you to show products organized by category and sub-category on the shop and catalog pages. By breaking products up by subcategory, this plugin provides an intuitive and attractive catalog layout that your customers will appreciate. Here are before and after shots of the shop page using Nested Category Layout:</p>
<div class="twocol-one">
<figure id="attachment_1095323" aria-describedby="caption-attachment-1095323" style="width: 823px" class="wp-caption aligncenter"><a href="https://woocommerce.com/wp-content/uploads/2014/07/woocommerce-nested-category-layout-before.png"><img class="size-large wp-image-1095323" src="https://woocommerce.com/wp-content/uploads/2014/07/woocommerce-nested-category-layout-before.png?w=823" alt="WooCommerce Nested Category Layout Before" width="823" height="893" /></a><figcaption id="caption-attachment-1095323" class="wp-caption-text">Before</figcaption></figure>
</div><div class="twocol-one last">
<figure id="attachment_1095324" aria-describedby="caption-attachment-1095324" style="width: 822px" class="wp-caption aligncenter"><a href="https://woocommerce.com/wp-content/uploads/2014/07/woocommerce-nested-category-layout-after.png"><img class="size-large wp-image-1095324" src="https://woocommerce.com/wp-content/uploads/2014/07/woocommerce-nested-category-layout-after.png?w=822" alt="WooCommerce Nested Category Layout After" width="822" height="950" /></a><figcaption id="caption-attachment-1095324" class="wp-caption-text">After</figcaption></figure>
</div></p>
<p>WooCommerce typically allows you to show subcategories on shop and category pages (or subcategories and products, but this can look messy). While this is a handy option, it requires that customers click on categories, then subcategories to simply browse products and looks like this:</p>
<figure id="attachment_1095319" aria-describedby="caption-attachment-1095319" style="width: 586px" class="wp-caption aligncenter"><a href="https://woocommerce.com/wp-content/uploads/2014/07/woocommerce-typical-subcategories.png"><img class="size-large wp-image-1095319" src="https://woocommerce.com/wp-content/uploads/2014/07/woocommerce-typical-subcategories.png?w=586" alt="WooCommerce shop category layout" width="586" height="413" /></a><figcaption id="caption-attachment-1095319" class="wp-caption-text">Default WooCommerce Category View</figcaption></figure>
<p>However, the more barriers you put in the way of finding a product or purchasing, the more likely customers are to leave your site, so we’ve sought to fix that with this plugin. Nested Category Layout cleans this process up and makes it simpler for the user. Instead of requiring customers to click through categories, then subcategories to get to products, it simply creates list on the shop and/or category pages organized by category / subcategory, then allows customers to click a category / subcategory title if they want to see more products.</p>
<p>You can select which categories to nest and which to display normally and determine whether to show this layout on shop pages and category pages, or just on category pages. Want to see this in action? You can check out the <a href="http://demos.skyverge.com/product-category/nested-category-layout/" target="_blank" rel="noopener noreferrer">Demo Shop</a> that has the plugin running to get a feel for how the shop and catalog pages are changed.</p>
<h3>Flexible Display</h3>
<p>Don’t have a category for a product? No problem – Nested Category Layout will show these products at the top of the page, then show your categories and subcategories. If a product is in both the parent category and a subcategory, it will be displayed with the appropriate subcategory. If a product is only in a parent category, then it will be displayed in the parent category before subcategories are shown (like this):</p>
<p><a href="https://woocommerce.com/wp-content/uploads/2014/07/woocommerce-nested-category-layout-category-page.png"><img class="aligncenter size-large wp-image-1095268" src="https://woocommerce.com/wp-content/uploads/2014/07/woocommerce-nested-category-layout-category-page.png?w=609" alt="WooCommerce Nested Category Page" width="609" height="950" /></a></p>
<h3>How to Get Started</h3>
<ol>
<li>Purchase and download the extension 🙂</li>
<li>Upload and install into your WooCommerce store</li>
<li>Go to WooCommerce > Settings > Products and configure your options</li>
<li>Organize products into categories and subcategories</li>
<li>That’s it! Sit back and enjoy a flexible, intuitive catalog display!</li>
</ol>
<p><em>Need any more reason to buy? When you purchase a SkyVerge-developed extension, you’re getting the highest quality extensions for your WooCommerce store. Gain peace of mind by knowing that when you purchase our products, your store’s performance is as important to us as it is to you.</em></p>

Nested Category Layout

<p>Display products grouped by sub-category on the shop and catalog pages.</p>

Ajax Pagination & Infinite Scroll vs Nested Category Layout