Common
Getting Started
Updates
Writing & Editing
Categories & Taxonomies
Editor Blocks
How To’s
Features
Translations
JetPack
3rd Party API
Troubleshooting
Development
About The Theme

Customizing Product Catalog

Settings included in this section allow you to change the layout and customize every element of the WooCommerce shop and category (archive) pages.

Shop Page Display

The WooCommerce Shop Page can display Products, Categories, or both. However, it is recommended to select only one to have a clean look.

Customizing WooCommerce shop page display
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the Shop page display drop-down menu.

  5. Select Products or Categories from the drop-down.

  6. Preview your selection instantly.

  7. Click the Publish button to save the changes.

Category Display

The WooCommerce Shop Page can display Products, Categories, or both. However, it is recommended to select only one to have a clean look.

Customizing WooCommerce shop category display
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the Category display drop-down menu.

  5. Select Show products or Show subcategories from the drop-down.

  6. Preview your selection instantly.

  7. Click the Publish button to save the changes.

Default Product Sorting

This option allows you to control the order in which products are viewed on Shop and Category pages. Visitors still have the option to sort a different way, if desired.

Customizing default product sorting settings
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the Default product sorting and select one of the following options from the drop-down menu:

    • Default sorting (custom ordering + name)

    • Popularity (sales)

    • Average rating

    • Sort by most recent

    • Sort by price (asc)

    • Sort by price (desc)

  5. Preview your selection instantly.

  6. Click the Publish button to save the changes.

Products Per Row

The following option allows you to choose the number of items that appear in a single row on Shop and Category pages.

While editing this field consider the following options to have a clean look on your shop and category pages:

  • Size of product image.

  • Space on a computer/laptop, tablet or mobile device.

  • Optimal experience for a customer viewing and buying your products.

Customizing the number of products should be shown per row
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the Products per row number field.

  5. Use arrows to increase/decrease the number of products.

  6. Preview your selection instantly.

  7. Click the Publish button to save the changes.

Products Per Page

The following option allows you to choose the number of rows that appear on Shop and Category pages.

While editing this field consider the following options to have a clean look on your shop and category pages:

  • Size of product images.

  • Number of products you sell.

  • Space on a computer/laptop, tablet or mobile device.

  • Optimal experience for a customer viewing and buying your products.

Customizing the number of products should be shown per page
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the Products per row number field.

  5. Use arrows to increase/decrease the number of rows.

  6. Preview your selection instantly.

  7. Click the Publish button to save the changes.

Products Per Row (Mobile)

Customizing the number of products should be shown per row in mobile
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the Products per row (mobile) switch field.

  5. Select how many products should be shown per row in mobile.

  6. Preview your selection instantly.

  7. Click the Publish button to save the changes.

Content Layout

Modifying the content layout of the archive pages in your shop
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the Content layout swtich field.

  5. Choose how to layout the archive pages of your shop from the available options below:

  6. Preview your selection instantly.

  7. Click the Publish button to save the changes.

Sidebar Position

Modifying the sidebar position within the archive pages in your shop
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the Sidebar position swtich field.

  5. Choose how to display sidebar within the archive pages of your shop from the available options below:

  6. Preview your selection instantly.

  7. Click the Publish button to save the changes.

To see the effects view the page in either mobile or tablet screen size.

Items Layout

Modifying the layout of the product items in shop loop - Default
Modifying the layout of the product items in shop loop - List
Modifying the layout of the product items in shop loop - Classic
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the Items layout swtich field.

  5. Choose how to layout the product items of your shop from the available options below:

  6. Preview your selection instantly.

  7. Click the Publish button to save the changes.

Product Count

Toggle the visibility of the results count
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the Product count toggle field.

  5. Toggle the visibility of the result count - Showing x - x of x results.

  6. Preview your selection instantly.

  7. Click the Publish button to save the changes.

Product Sorting

Toggle the visibility of the drop-down select field for ordering
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the Product sorting toggle field.

  5. Toggle the visibility of the drop-down select field for ordering.

  6. Preview your selection instantly.

  7. Click the Publish button to save the changes.

Sale Badge

Toggle the visibility of the "Sale" flash from items that are on sale
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the Sale badge toggle field.

  5. Toggle the visibility of the Sale flash from items that are on sale.

  6. Preview your selection instantly.

  7. Click the Publish button to save the changes.

Sale % Discount

Toggle to display the sale product discount as a percentage
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the Sale % discount toggle field.

  5. Toggle to display the discount as a percentage.

  6. Preview your selection instantly.

  7. Click the Publish button to save the changes.

Sold Out Badge

Toggle the visibility of the "Sold Out" flash from items that are out of stock
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the Sold out badge toggle field.

  5. Toggle the visibility of the Sold Out flash from items that are out of stock.

  6. Preview your selection instantly.

  7. Click the Publish button to save the changes.

Toggle the visibility of the "Popular" flash from items that are featured
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the Popular badge toggle field.

  5. Toggle the visibility of the Popular flash from items that are featured.

  6. Preview your selection instantly.

  7. Click the Publish button to save the changes.

New Badge

Toggle the visibility of the "New" flash from the items that are newly arrived
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the New badge toggle field.

  5. Toggle the visibility of the New flash from items that are newly arrived.

  6. Preview your selection instantly.

  7. Click the Publish button to save the changes.

Newness Badge Days

Alter number of days that the "New" badge will be shown
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the Display the "New" badge for how many days number field.

  5. By default, the badge will be shown on products that were published in the last 30 days; However, you can enter any valid integer to alter this.

  6. Preview your selection instantly.

  7. Click the Publish button to save the changes.

Category Badge

Toggle the visbility of the "Cagtegory" flash from items that submitted as a parent or child category
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the Category badge toggle field.

  5. Toggle the visibility of the Category flash from items that submitted as a parent or child category.

  6. Preview your selection instantly.

  7. Click the Publish button to save the changes.

Add to Cart

Toggle the visibility of the add to cart buttons
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the Add to cart toggle field.

  5. Toggle the visibility of the add to cart buttons.

  6. Preview your selection instantly.

  7. Click the Publish button to save the changes.

Quick View

Toggle the visibility of the "Quick View" buttons
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the Quick view toggle field.

  5. Toggle the visibility of the product quick view (modal widnow) buttons.

  6. Preview your selection instantly.

  7. Click the Publish button to save the changes.

Toggle the visibility of the product catalog thumbnail from the view
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the Featured image toggle field.

  5. Toggle the visibility of the product catalog thumbnail from the view.

  6. Preview your selection instantly.

  7. Click the Publish button to save the changes.

Toggle to add a secondary product thumbnail on archive products
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the Featured image flipper toggle field.

  5. Toggle to add a secondary product thumbnail on archives that is revealed when you hover over the main product image.

  6. Preview your selection instantly.

  7. Click the Publish button to save the changes.

Prices

Toggle the visibility of the product prices from the view
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the Prices toggle field.

  5. Toggle the visibility of the product prices from the view.

  6. Preview your selection instantly.

  7. Click the Publish button to save the changes.

Star Ratings

Toggle the visibility of the product star ratings from the view
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the Ratings toggle field.

  5. Toggle the visibility of the product star ratings from the view.

  6. Preview your selection instantly.

  7. Click the Publish button to save the changes.

Categories

Toggle the visibility of the product categories from the view
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the Categories toggle field.

  5. Toggle the visibility of the product categories from the view.

  6. Preview your selection instantly.

  7. Click the Publish button to save the changes.

Description

Toggle the visibility of the product short description from the view
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Catalog section.

  4. Locate the Description toggle field.

  5. Toggle the visibility of the product short description from the view.

  6. Preview your selection instantly.

  7. Click the Publish button to save the changes.