On the lookout for methods to change the quantity of merchandise that seem per web page in your WooCommerce retailer?
The default quantity of merchandise that seem on a WooCommerce Store web page is 16, unfold throughout 3-Four rows. Nonetheless, this sort of format will not be a great match for a lot of WooCommerce web sites.
Say, as an example, you will have elevated your product picture dimension and added product particulars or e-newsletter packing containers to the Store web page. Since there are 16 merchandise on the web page, it’s going to look cluttered and unprofessional.
An environment friendly means to repair this downside is to lower the quantity of merchandise on the Store web page and in addition modify the quantity of rows that seem per web page.
On this tutorial, I’ll present you ways to change the quantity of merchandise and rows that WooCommerce reveals in your Store and catalog pages.
WooCommerce’s Default Choices
WooCommerce has a fundamental characteristic that allows you to change the quantity of merchandise and rows in your Store web page. You may entry it from the Look → Customise → WooCommerce → Product Catalog menu in your WordPress admin space.
In the screenshot beneath, you may see what it seems like with Automattic’s (the maintainer of WordPress) _s base theme, which doesn’t add any additional choices to the Customizer:
On this tutorial, I’ll present you a extra versatile resolution — our free Botiga WooCommerce theme.
As well as to having the choice to change the rows and columns utilizing an intuitive slider, you can even select between a grid- and list-style product catalog format.
Plus, you may outline totally different ‘Product per row’ and ‘Rows per web page’ values for pill and cell screens, which considerably improves the buyer expertise of consumers who entry your retailer from small-screen units:
Now let’s see how to use the free Botiga theme to change the quantity of merchandise displayed per web page in your WooCommerce retailer.
1. Set up and Activate the Botiga Theme
To put in and activate Botiga, open your WordPress dashboard, go to Look → Themes → Add New, and enter “Botiga” into the search bar.
As soon as the theme seems on the display screen, click on the Set up, then the Activate buttons:
Alternatively, you may obtain Botiga from our web site then go to Look → Themes → Add New and click on the Add Theme button.
As soon as the file uploader reveals up on the display screen, add the theme by clicking the Select File button:
Then, click on the Set up and Activate buttons to set up and activate the theme:
2. Import a Botiga Starter Web site (Non-compulsory)
Starter websites are pre-built web site designs you can import with a couple of clicks.
Botiga starter websites are identified for his or her elegant {and professional} designs that work seamlessly with the WordPress block editor (Gutenberg) and the Elementor web page builder. These web sites are crafted for conversion.
Importing a Botiga starter web site will not be a compulsory step, however it might probably assist quite a bit with organising your WooCommerce retailer.
You may preview the starter websites by going to Botiga → Starter Websites and clicking the Preview buttons:
To import a starter web site to your WooCommerce retailer, click on the Import button — for this tutorial, I’ll set up the free Magnificence demo.
Subsequent, select between the Gutenberg and Elementor variations, relying on the way you need to customise your web site:
Now, resolve whether or not you need to import the complete web site, which incorporates photos, headlines, texts, and so on., or simply placeholder content material.
If you happen to don’t have any choice, I like to recommend that you simply import the complete web site together with all the content material, widgets, and Customizer configurations, as you may nonetheless take away or change the parts later:
In the final step, you’re proven the plugins Botiga desires to set up in your web site.
You even have the choice to deselect some of the non-essential plugins earlier than beginning the import course of:
It would take Botiga a pair of seconds to import the starter web site. When the course of is over, open your web site to take a look at what your new design seems like.
3. Open the Customizer
You may change the quantity of merchandise and rows showing in your Store web page from the WordPress Customizer. Botiga has added its personal choices to the Customizer throughout the set up course of (Step 1).
To open the Customizer, click on the Look menu in your WordPress admin space and choose the Customise choice.
WordPress will take you to your homepage the place the Customizer will seem on the left of the display screen:
4. Change the Number of Products and Rows
To vary the quantity of merchandise displayed per web page in your Store and different catalog pages, click on the WooCommerce → Product Catalog choice in the Customizer:
On the subsequent panel, click on the Structure tab to open the format settings of the product catalog.
The primary two choices you’ll see are the Products Per Row and Rows Per Page choices.
Configuring these two choices will change the quantity of merchandise and rows that seem per web page on the Store and catalog pages of your WooCommerce retailer.
You too can arrange totally different numbers of merchandise and rows for cell and pill customers by clicking the pill and cell icons in the top-right nook of the Structure panel and configuring the Products Per Row and Rows Per Page choices belonging to the cell and pill views:
As soon as the choices are configured, click on the Publish button at the high of the Customizer to save the settings.
5. Customise Your Store Page Even Additional
Botiga has another choices in the Structure panel that allow you to customise your Store web page format.
For instance, the default WooCommerce Store web page reveals merchandise in a grid format. With Botiga, you may change the Store web page format from grid to checklist.
The checklist format permits you to add extra particulars to your product playing cards.
To vary the format kind of your Store web page, go to Look → Customizer → WooCommerce → Product Catalog → Structure → Structure Kind and choose the Listing choice:
Botiga additionally has an choice that allows you to add a sidebar to the left or proper aspect of your Store web page as a way to present a e-newsletter field, a ‘Newest Posts’ widget, a ‘Prime Rated Products’ widget, or different supporting content material subsequent to your product catalog.
So as to add a sidebar to your Store web page, scroll down in the Structure panel, discover the Sidebar Structure setting, and choose one of the accessible sidebar layouts:
As soon as the configurations are accomplished, click on the Publish button at the high of the Customizer to save the adjustments.
6. Test Your Store Page
Though the Customizer reveals adjustments in actual time, your Store web page can nonetheless find yourself trying unappealing once you shut the Customizer panel.
So I like to recommend that you simply take a look at your Store web page with out the Customizer being open in your display screen.
If you happen to don’t like what you see, return to the Customizer and configure the Products Per Row, Rows Per Page, and the different product catalog choices in the Structure panel.
That’s it. You’ve now modified the quantity of merchandise and rows that seem in your WooCommerce Store web page.
Abstract
Modifying the quantity of merchandise and rows in your WooCommerce Store web page could be vital when you’re making an attempt to enhance the design and conversion price of your retailer.
Botiga, our quick, user-friendly, and feature-packed theme constructed for WooCommerce web sites permits you to change the quantity of merchandise and rows in your product catalog whereas additionally enabling you to swap to an inventory format, add a sidebar to the Store web page, and extra.
You may change the quantity of merchandise and rows on the Store and different catalog pages in your WooCommerce retailer by following these steps:
- Set up and activate the free Botiga theme.
- Import a starter web site (optionally available).
- Open the Customizer.
- Change the quantity of merchandise and rows in your product catalog.
- Change the format and/or add a sidebar to your Store web page.
- Test the Store web page and make additional modifications if wanted.
Obtain our free Botiga theme and create a feature-rich, user-friendly, conversion-optimized WooCommerce retailer.
Do you will have any questions on how to change the quantity of merchandise and rows on a WooCommerce Store web page? Tell us in the remark part beneath.
