How to Change WooCommerce Products Per Page with Divi
Are you using Divi and WooCommerce to power your online store, but finding the default number of products displayed per page isn’t optimal for your site’s design or user experience? This article will guide you through several methods to easily adjust the number of WooCommerce products shown per page within your Divi theme. We’ll explore both simple and more advanced techniques, catering to users of all technical skill levels.
Understanding the Problem and Available Solutions
WooCommerce, by default, displays a certain number of products per page. This setting can usually be adjusted within WooCommerce settings, but sometimes that’s not enough, particularly when working with the Divi theme’s flexible layout options. Changing the products per page directly through Divi allows for greater control and customization of your shop pages. We’ll look at three approaches:
* Using WooCommerce Settings (Simplest): This is the most straightforward method and often sufficient.
* Using a Divi Module (Intermediate): This provides more control within the Divi Builder.
* Using a Child Theme and Code (Advanced): This offers complete customization but requires coding knowledge.
Method 1: Modifying WooCommerce Settings
This is the quickest and easiest method. It’s often sufficient if you don’t need granular control over the number of products per page on different shop pages or categories.
1. Access WooCommerce Settings: Log into your WordPress dashboard and navigate to WooCommerce > Settings > Products > Display.
2. Adjust “Products per page”: Find the “Products per page” setting and enter your desired number.
3. Save Changes: Click the “Save changes” button at the bottom of the page.
This will change the number of products displayed on all your shop pages. If you need more specific control, proceed to the next methods.
Method 2: Utilizing a Divi Module (Recommended)
This method offers more flexibility, allowing you to control the products per page on a per-page basis using Divi’s built-in features. You’ll need to use the WooCommerce Products module.
1. Create or Edit a Shop Page: Open the Divi Builder on the page displaying your WooCommerce products.
2. Find the WooCommerce Products Module: Locate and select the WooCommerce Products module.
3. Access Module Settings: Click on the module settings.
4. Adjust “Number of Posts”: Look for the “Number of posts” setting. This controls how many products are displayed. Input your desired number.
5. Save and Update: Save the changes and update the page.
This approach provides more granular control and is highly recommended for its ease of use and impact.
Method 3: Child Theme and Custom Code (For Advanced Users)
This method involves creating a child theme and adding custom code. This is the most powerful approach but requires understanding of PHP and WordPress coding practices. Incorrectly implemented code can break your website.
1. Create a Child Theme: Create a child theme Check out this post: How To Center Woocommerce Shortcode On Page for your Divi theme to avoid losing your customizations upon Divi theme updates.
2. Edit `functions.php`: In your child theme’s `functions.php` file, add the following code. Replace `20` with your desired number of products per page.
add_filter( 'loop_shop_per_page', 'new_loop_shop_per_page', 20 ); function new_loop_shop_per_page( $cols ) { return 20; // This is the number of products per page }
3. Save and Test: Save the changes to your `functions.php` file. Test your website to ensure the changes are reflected correctly.
This method allows for complete control, but it’s only recommended for users with coding expertise.
Conclusion
Changing the number of products displayed per page in your WooCommerce store using Divi is achievable through various methods. Choosing the right approach depends on your technical skills and desired level of control. Start with the simplest method (WooCommerce settings) and move to more advanced techniques if needed. Remember to always back up your website before making any code changes. By following these steps, you can optimize your shop’s layout and user experience for better conversions.
