# How to Add Pagination to Your WooCommerce Shop Page Shortcode: A Beginner’s Guide
Want to display your WooCommerce products using a shortcode but struggling with endless scrolling? Pagination is the solution! This guide will walk you through adding pagination to your WooCommerce shop page shortcode, making your product pages cleaner, more user-friendly, and better for SEO.
Why Use Pagination?
Imagine an online store with hundreds of products crammed onto a single page. It’s overwhelming, right? Pagination breaks your product listings into manageable pages, making it easier for customers to browse and find what they need. This improves the user experience and, consequently, your website’s SEO. Search engines reward sites that are easy to navigate and provide a good user experience. A slow-loading, cluttered page will hurt your rankings.
The Problem: WooCommerce Shortcode’s Default Behavior
The standard WooCommerce shop page shortcode, `[product_category category=”your-category”]`, doesn’t include pagination by default. This means all products within the specified category are displayed on a single page, potentially causing performance issues and a poor user experience.
The Solution: Adding Pagination with a Custom Function
We’ll create a custom function in your `functions.php` file (or a custom plugin) to add pagination to your WooCommerce shop shortcode. This method gives you full control and is more flexible than relying on plugins.
Step 1: Accessing your `functions.php` file
You can add this custom code either to your theme’s `functions.php` file (be Learn more about How To Add Custom Sidebar In Woocommerce cautious, as theme updates can overwrite this file) or better yet, create a custom plugin. Creating a plugin is recommended for easier maintenance and updates.
Step 2: Adding the Custom Function
Add the following code to your Check out this post: How To Enable Lightbox In Woocommerce 2019 `functions.php` file or your custom plugin’s main file:
'', 'per_page' => 12, // Adjust as needed ), $atts );
$args = array(
‘post_type’ => ‘product’,
‘category’ => $atts[‘category’],
‘posts_per_page’ => $atts[‘per_page’],
);
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) : ?>
have_posts() ) : $loop->the_post(); ?>
<?php // Pagination
echo paginate_links( array(
‘base’ => str_replace( 999999999, ‘%#%’, esc_url( get_pagenum_link( 999999999 ) ) ),
‘format’ => ‘?paged=%#%’,
‘current’ => max( 1, get_query_var( ‘paged’ Check out this post: How To Upload Products To Woocommerce ) ),
‘total’ => $loop->max_num_pages,
‘type’ => ‘plain’,
‘prev_next’ => true,
‘prev_text’ => __(‘« Previous’),
‘next_text’ => __(‘Next »’),
) );
else : ?>
<?php endif;
wp_reset_postdata();
}
add_shortcode( ‘paginated_products’, ‘wc_add_pagination_to_shortcode’ );
?>
Explanation:
- `wc_add_pagination_to_shortcode`: This is the name of our custom function.
- `shortcode_atts`: This sets default attributes for the shortcode. You can adjust `per_page` to control how many products appear per page.
- `WP_Query`: This is used to query WooCommerce products.
- `paginate_links`: This function generates the pagination links.
- No products showing: Double-check your category slug.
- Pagination not working: Ensure you’ve added the code correctly to your `functions.php` or a custom plugin. Explore this article on How To Do Mass Product Category Updates With WordPress Woocommerce Clear your browser cache and try again.
- Styling Issues: You might need to customize the CSS to match your theme’s style. The pagination links are generated using the `paginate_links` function, which provides basic styling.
Step 3: Using the Shortcode
Now, instead of using `[product_category category=”your-category”]`, use your new shortcode:
`[paginated_products category=”your-category”]`
Replace `”your-category”` with the actual slug of your product category.
Troubleshooting
By following these steps, you’ll successfully implement pagination for your WooCommerce shop page shortcode, creating a much more user-friendly and SEO-friendly shopping experience. Remember to always back up your files before making any changes to your website.
