How To Add WooCommerce Pagination To Your Order Forms

How To Add WooCommerce Pagination To Your Order Forms

WooCommerce store owners like you are always seeking ways to make the online shopping experience better for your wholesale customers. One simple (yet effective) way to achieve this is by improving the presentation of your product catalog. By implementing smart WooCommerce pagination in your order form, you can make product browsing more intuitive for your B2B buyers. 

That’s where we come in! In this guide, we’ll teach you how to implement WooCommerce pagination in your store, along with key factors to consider. Let’s get straight into it! 

Understanding The Default Product Page In WooCommerce 

The default WooCommerce shop page typically presents product lists in a grid format, each item displayed as a thumbnail image with details like product name, price, and rating.  

Default WooCommerce product list
Default WooCommerce product list (click to zoom)

While this arrangement may suit the needs of individual shoppers, the case differs for wholesale customers. These clients prioritize convenience and efficiency and often lack the time to browse through extensive product listings. Thus, creating a dedicated wholesale ordering form is crucial if you want to give them the best purchase experience. 

WooCommerce wholesalers can leverage plugins like Wholesale Order Form to create intuitive bulk ordering forms for B2B buyers. This powerful plugin allows you to customize every aspect of your order form and implement pagination to make online shopping more seamless. Here’s an example of a bulk order form made using the plugin:

Sample wholesale order form
Sample wholesale order form (click to zoom)

What Is WooCommerce Pagination? 

WooCommerce pagination allows you to organize an extensive product list into easily navigable pages within your e-commerce store. So, instead of displaying all your offerings in one page, you divide them into multiple pages with a set number of products. Take a look at this example from iHerb’s website:

WooCommerce pagination
Pagination example (click to zoom)

This approach offers several advantages for you and your wholesale customers. Firstly, it can help improve your website performance by reducing the number of data loaded at once. This ensures smoother navigation as customers explore your offerings.

WooCommerce pagination also simplifies product browsing for your customers and gives them greater control over the purchase experience. By knowing the number of results per page, they can make more informed choices instead of infinitely going through an updatable list.

WooCommerce Pagination vs Lazy Loading 

Wholesale Order Form allows you to implement both pagination and lazy loading in your bulk order forms. However, you might be wondering what approach best suits your wholesale business. We’re here to help out! Let’s walk through their differences and review key factors to consider so you can make an informed choice. 

As we’ve learned, WooCommerce pagination divides your product catalog into multiple pages, with each page displaying a set number of products. Wholesale customers enjoy a clear navigation system, letting them browse through your catalog systematically. 

Lazy loading, on the other hand, automatically loads products as buyers scroll down your order form. In this approach, your product listings are loaded on-demand, allowing wholesale customers to infinitely scroll through the page. 

When deciding on the best approach, consider the following factors: 

  • Product catalog size: WooCommerce pagination can work well for extensive product catalogs, helping you organize product presentations without overwhelming your customers. On the other hand, lazy loading can be effective for smaller catalogs, where wholesale customers can immediately access your listings. 
  • User preference: Consider gathering feedback or conducting surveys to better understand the preferences of your wholesale customers. Some customers prefer the structured layout of pagination, while others may prefer having an uninterrupted product browsing experience. 
  • Website performance goals: Both approaches offer advantages for website performance. WooCommerce pagination reduces initial load time for large catalogs – with distinct pages, it minimizes the amount of data loaded at once. On the other hand, lazy loading reduces server load by loading content only when needed.

Feel free to experiment and use different approaches to determine what will work best for your business. With Wholesale Order Form, you can create as many bulk ordering forms as you need so you can tailor your approach to different customer segments or product categories. 

How To Implement WooCommerce Pagination To Your Bulk Order Form 

Now that we’ve learned about WooCommerce pagination and how it can help you improve the customer experience, let’s dive into how you can implement it for your business!

For this tutorial, we’ll assume that you: 

  • Already have a functional WooCommerce store with products
  • Installed and activated Wholesale Order Form

If you haven’t done so already, you can get our plugin here or learn more with our getting started guide. So, with that out of the way, let’s get cracking! 

Step 1: Create your wholesale order form 

Wholesale Order Form makes it simple for you to get started. Firstly, navigate to Wholesale > Order Forms and click “Add Form”.

Creating your first wholesale order form
Creating your first wholesale order form (click to zoom)

Immediately, the plugin sets up a default bulk order form for you:

Default order form
A default order form is automatically generated for you (click to zoom)

Don’t forget to give your order form a name before modifying the settings.

Step 2: Add pagination and configure settings 

The plugin features an intuitive drag-and-drop builder to help you customize your order form. You’ll notice that the default form already integrates a pagination element out of the box:

WooCommerce pagination is automatically integrated to your default order form
WooCommerce pagination is automatically integrated to your default order form (click to zoom)

However, you can re-arrange the elements any way you’d like or add additional ones as needed. Check out this complete guide about customizing your order form. 

To configure your WooCommerce pagination settings, navigate to “Settings”. This will give you the option to modify several aspects of your form, including the number of products your form will display per page. In this example, let’s set it to 15 products per page: 

Modifying WooCommerce pagination settings
Modifying WooCommerce pagination settings (click to zoom)

Let’s take a closer look. If you scroll down, you can also set included or excluded products and categories. This feature is handy if you want to create product order forms for exclusive items or categories only or modify the visibility of your listings for wholesale customers. 

Additional settings on your wholesale order form
Wholesale Order Form also enables you to set included and excluded products and categories to your order forms (click to zoom)

Step 3 (Optional): Edit Form permissions 

One of Wholesale Order Form’s most powerful features is the form permission settings– this allows you to modify access to your order forms and make them available only for eligible wholesale customers. To access this feature, navigate to settings and click the “Edit” button beside Form Permissions. 

In the Form Permissions screen, you can select the user roles you to grant access to your order form. For example, you can select the default “Wholesale Customer” role to make sure the form is only available to wholesale customers. 

Configuring form permissions
Configuring form permissions (click to zoom)

Important Note: The default “Wholesale Customer” role is automatically created for you upon installing Wholesale Prices, Wholesale Order Form’s sister plugin. However, with the plugin’s premium version, you can make as many wholesale customer roles as you like to further customize access permissions on your WooCommerce store. Learn more about this functionality here

You can also modify the “Access Denied” message on this screen to inform customers about the restricted access and provide guidance on how they can proceed. For example, you can add a note saying: 

Sample access denied message
Sample access denied message (click to zoom)

Then, click on “Publish” to save your changes!  

Step 4: Save your changes and publish your form! 

Almost there! Once you’re satisfied with your changes, you can click on “Publish” beside the Form Editor to make your order form live. The plugin enables you to place the form anywhere on your website using a shortcode. This shortcode is automatically generated for you, as you can see below: 

Wholesale Order Form automatically generates a shortcode for you
Wholesale Order Form automatically generates a shortcode for you (click to zoom)

To publish your form, simply copy the shortcode, paste it into a shortcode block on your desired webpage, and click Update. 

Publishing your wholesale order form
Publishing your wholesale order form (click to zoom)

Congratulations, you’ve successfully made your first order form with a pagination feature! This is how it will look like for your wholesale customers:

Sample wholesale order form for wholesale customers
Sample wholesale order form for wholesale customers (click to zoom)

You can make as many order forms as you like by repeating the process. 

Conclusion  

How you present your products on your WooCommerce store impacts the purchase experience. Implementing pagination is one of the simplest ways to make product browsing more seamless for your valued B2B clients. In this article, we’ve explored how you can easily do this using Wholesale Order Form.

To recap, let’s walk through the steps below: 

  1. Create your order form
  2. Add pagination and configure its settings
  3. Edit form permissions (optional)
  4. Save your changes

With Wholesale Order Form, you can easily create bulk order forms that simplify bulk purchasing for your customers. This powerful plugin features an intuitive drag-and-drop builder, making the process a breeze for you! 

Do you have questions about implementing WooCommerce pagination on your order form? Let us know in the comment section below! 

The post How To Add WooCommerce Pagination To Your Order Forms appeared first on Wholesale Suite.