The Shop Page in WooCommerce is the main storefront where all products are displayed, acting as a catalog for customers to browse. 

The Sidebar and Filters allow shoppers to refine their search using options like price range, categories, tags, or attributes (e.g., size, color, material). 

Category Pages group similar products together, making it easier for customers to find specific types of items, like “Office Chairs” or “Organic Vegetables,” without scrolling through everything in the shop.

1. Store Catalog/Shop page

Let’s start with your shop page which can also be called your catalog.

To get there, hover your mouse over “Store Appearance” located on the left sidebar of your store dashboard, and then click on “store styling”. 

Wait for the page to load and then click on the Shop page located in the menu within the header of the website. 

You will be taken to the store page where you will see a list of all the products that you have uploaded so far.

Your store will have a sidebar on the left where we are going to add all of the filters and categories. The left sidebar is used to improve user navigation and experience on your store.

Next to the sidebar, you have the main section where your products are listed in columns and rows. Your customer can also sort the products based on their popularity, their rating, the latest products, and based on the price.

Editing the Sidebar

Let’s start by editing your sidebar.

You can edit the sidebar by clicking on any of the blue pencil icons. A panel on the left will open where you can edit or add any of the widgets.

Currently, we already have 5 sidebar widgets displayed.

We have the filter by price widget that allows the customer to choose a price range that will fit within their budget. When they choose the range and click on the filter, only the products within that range will be displayed.

The second widget is going to be the product categories. From here they will have a birdseye view of all the types of products your store provides. When they click on a category, the store will automatically filter the products to only show the products of the chosen categories.

The third and fourth widget is a “Filter products by attribute” widget that allows your customer to filter the products based on the attributes that you have set. On the store, we currently only have products that use the size attribute so you will not see any color options.

Also, it is very important to note that only global attributes and their values will be displayed on the store page.

Next, we have the widget called “Products by rating list” which shows the products with the most positive ratings. You can add or edit any widget you want in the sidebar.

Layout > General

Let’s customize the shop page layout by going to the “Layout” bar located to the left and then clicking on “General”.

We are going to leave out all of the settings except for “Products per row on mobile” under the Mobile Product Grid. You can choose to have one or two products displayed per row when the screen is on mobile view. We recommend keeping it to 2 products per row on mobile to use the vertical space more efficiently.

Layout > Sidebars

Next, we are going to go to the tab labeled “Sidebars” which still falls under the “layout” tab.

The first settings that you can change are going to be the width of the sidebar and the content where the products are listed. You can keep the width of both as default or you can change it a bit. Remember that the width is based on percentage and not pixels.

Next, you can change the position of the side to the left or right. You can also disable it completely. 

For “Product Category Widget Toggle” we can leave it enabled. The rest of the settings we leave as default.

Editing Shop Display

The next step is to go back to the “Layout” tab and then go to the tab labeled “Woocommerce”.

Layout > Woocommerce

The first setting allows us to change the general settings which we are going to leave as default. Go to the shop section where you can add or remove any of the elements.

You can add or remove any of the following elements:

• Shop heading
• Product results count
• Product sorting
• Sale % discount
• You can change the sale badge design to either a bubble or a circle.
• Rating
• Rating count
• Category
• Change on hover

You can also change the product card display to default or to slide up.

The button display also has several options such as showing it only on hover, making it stating, or removing them completely.

You can also change the text alignment to left or center.

Woocommerce > Product Catalog

The next step is to go to the “Woocommerce” tab located on the left sidebar and then go to the tab called “Product Catalog”.

You can choose to only display the products, only the categories, or both on the shop page. 

Under “Default product sorting” you can choose how the products will be sorted by default where you have up to 6 options to choose from.

You can also choose how many products you want to show per row and per column. Currently, it is set to 3 products per row and 4 rows per page.

2. Editing Category Pages

The category pages are the pages that will display the products that fall under a specific category. All product categories will also share the same template to keep the design consistent throughout your store.

To see what a category page is going to look like, you can click on any of the categories. In this case, we are going to click on “Accessories”.

Notice how the layout of the page changes.

In most cases, the sidebar on the left will stay the same, but some of the filters will be removed if none of the products share any of the attributes.

On top of the category page, you will notice a description of the category along with an image. To edit this information you will need to go to the dashboard of your store and go to categories under products.

From there you can edit the information of each category that exists on your store.

Next, you will find the products that are listed under this category. They will be displayed the same way as that on your store page because they inherit the same settings.

Let us show you how to edit the design of the category page.

First, go to the “Layout” tab and then go to “Woocommerce”.

Layout > Woocommerce

Then you need to scroll down until you reach the section labeled “Product Categories”. From there you can change the layout of the category description.

You can put it within the header which will remove the category image. You can also put it within the content of the page where the Category description and category image will be displayed.

You can individually toggle the settings to remove the description and image.