How to Change the WooCommerce Shop Page Layout

The WooCommerce shop page layout – how many product columns, how many products per page, whether there is a sidebar – is controlled by a combination of your theme settings, WooCommerce settings, and optionally custom code. This guide covers all three levels so you can make the specific change you need.

Step 1: Products Per Page

Go to WooCommerce -> Settings -> Products -> Display. The “Products per page” setting controls how many products appear before pagination. The default is usually 12. For shops with many products, consider 24 or 36 (multiples of 3 and 4 to work with both 3 and 4 column grids). For shops with few products, show all of them on one page to avoid a paginated view with only 2-3 products on the second page.

Need help with your WordPress site? Describe your project and get a free estimate.

Step 2: Grid Columns (Theme-Dependent)

The number of product columns is usually controlled by your theme, not WooCommerce directly. Where to find the setting varies:

• Storefront – Customizer -> WooCommerce -> Product Catalog -> Products Per Row
• Astra – Customizer -> WooCommerce -> Shop -> Products Per Row
• OceanWP – Customizer -> WooCommerce -> General -> Product Columns
• Flatsome – Theme Options -> WooCommerce -> Shop Columns

If your theme does not have this setting, use CSS to control columns (see below).

Step 3: Remove or Add the Shop Sidebar

The WooCommerce shop sidebar is typically controlled by your theme’s widget areas. Go to Appearance -> Widgets and find the WooCommerce sidebar widget area. If it has widgets, a sidebar shows. Remove all widgets from it and the sidebar disappears, leaving full-width product display.

For Elementor users who want to build a custom shop page: go to Templates -> Theme Builder -> Archive -> Add New, select “Product Archive” as the template type, and design your shop page layout with Elementor widgets. This completely replaces the theme’s shop template.

CSS for Column Control

If your theme does not have a column count setting, control it with CSS:

/* 4 columns on desktop */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}

/* 2 columns on tablet */
@media (max-width: 768px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 1 column on mobile */
@media (max-width: 480px) {
  .woocommerce ul.products {
    grid-template-columns: 1fr !important;
  }
}

/* Remove the theme's column classes if they are interfering */
.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}

Changing the Product Sort Order Default

The default sort order on the shop page is set in WooCommerce -> Settings -> Products -> Display -> Default Product Sorting. Options: menu order (manual ordering), popularity, average rating, latest (newest first), price. Most shops benefit from “Popularity” as the default to show best-selling products first to new visitors.