Customizing Product Archives

Last updated last month

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

Content Layout

Modify the 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 Archives 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.

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 Archives 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 Archives 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 Archives 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 Archives 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 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 Archives 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 Archives 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 best selling
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Archives section.

  4. Locate the Popular badge toggle field.

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

  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 Archives 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.

The badge will be shown on products that were published in the last 30 days.

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 Archives 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 Archives 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 Archives 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 Archives 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 archives that is revealed when user hovers over the main product image
  1. On the frontend, in the Admin bar, Customize.

  2. On the backend, click Appearance » Customize.

  3. Navigate to WooCommerce » Product Archives 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 Archives 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 Archives 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 Archives 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 Archives 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.