WooCommerce is a plugin that adds a store to your WordPress website. Owned by Automattic, the people behind WordPress.com, and supported by more than 300 employees, it’s considered the top option for aspiring e-commerce store owners and existing enterprise-level e-commerce operations alike.

Building your site with WordPress and WooCommerce gives you complete ownership over your store, with a flexible framework for building a system and design that’s as unique as your dream.

Today we’re going to talk about the WooCommerce Shop page, why you may want to build one, and how to customize it.

What is a WooCommerce Shop page?

The WooCommerce Shop page is included by default and is the archive page for the product page type. This simply means that it will show all of your published products for visitors to scroll through. It’s essentially your online showroom, where visitors view your catalog. You can display items individually, by category, or both, with categories and products on a single page.

Why build a custom WooCommerce Shop page?

The default WooCommerce Shop page is a good option for many stores and helps you get up and running quickly. However customizing this page provides a curated experience for buyers that can lead to more sales for you and a more streamlined journey for your shoppers.

So let’s begin with reasons you may want to customize your Shop page.

1. Make it quick and easy for shoppers

The faster your visitors can find what they’re looking for — and get the information they need to feel comfortable making a purchase — the better. A well-organized store keeps shoppers from feeling overwhelmed.

In this example from The Hidden Grounds, there’s a category filter list on their sidebar so shoppers can quickly jump to any category. The Quick View and Select Options buttons make it easy to learn more, choose variations, and add to cart without leaving the Shop page.

Greene King lets shoppers choose quantities and add items to their cart directly from the Shop page. They also added content sections to the Shop page that promote their personalization options.

2. Provide an experience tailored to your products and audience

What you’re selling — and who you’re selling to — affects the amount and type of product information your customers need to make a decision. The approaches below let you provide an experience tailored to your audiences and their needs.

For well-known brands and products, shoppers may not need to know anything more than item availability and price. In this case, the faster someone can find and add items to their cart, the better. A customer may want to add multiple products to their cart without leaving the Shop page, then proceed directly to checkout.

For new and unfamiliar items — or product categories where shoppers need detailed information like food ingredients or accessory specifications — you may want to display information right there on the Shop page.

Here are some examples of how you might modify your shop page based on the products you sell or your audience:

• Add filters for large catalogs of products, or items that get very granular. Perhaps you sell replacement parts that shoppers need to find based on their size, color, SKU, etc.
• Focus on images if you sell items that are more visual. Clothing stores, for example, might want to showcase larger photos or allow people to scroll through an image carousel directly on the Shop page.
• Present products in a table. If you sell items that aren’t reliant on visuals, you may want to take images out of the equation entirely. Instead of a more traditional product grid, use a table presenting key information. This is a particularly good setup for service-based businesses or wholesale stores with customers who add a lot of items to their cart at once.
• Include badges specific to your products. For example, if you sell food, you might have badges for “vegan” or “nut-free.” This helps shoppers immediately see what fits their needs (and what doesn’t.)

This example from My LAB BOX uses a mix of tables categorized by type of test so visitors can quickly scan options and add them to their cart. Bonus: They also use badges to highlight special attributes (“new”, “popular”).

3. Highlight featured products and promotions

Editing your WooCommerce Shop page lets you grab your customers’ attention and direct their interest towards featured products and categories, promotional offers, and things like free shipping or satisfaction guarantees.

Block themes really shine in this case. Use the Top Rated Products block to put your best foot forward, the On Sale Products block to highlight discounted options, or the Hand Picked Products block to have a section of items you can quickly swap out based on the season, current events, or other situation.

4. Reflect your brand and personality

The default Shop page template has a clean and professional appearance, so many site owners choose to use it without any personalization.

That’s fine, but customizing your Shop page can help you stand out from competitors, present a unified look across your site and other company profiles, and build confidence by featuring reviews and other trust symbols.

Daelmans’ Shop page is an excellent reflection of their brand design. Every detail — even the red bar that appears when someone hovers over a product — perfectly fits the style of their entire site.

And The Kind Pen added stars below each product to show how well-reviewed they are. Plus, there’s a slick little callout to the left where curious shoppers can click to read even more reviews to ease any hesitation they may have.

See more examples of what WooCommerce store owners have done with their Shop pages on the WooCommerce Showcase.

How to customize your WooCommerce Shop page

Okay, so how do you make changes to your Shop page? There are several options that you can choose from, depending on how your site is built and your experience level.

1. Customize your Shop page using the WooCommerce Customizer

The WooCommerce section of the Customizer includes tabs for Store Notice, Product Catalog, Product Images, and Checkout. This is the simplest way to make basic changes to your Shop page.

To find it, go to Appearance → Customize → WooCommerce.

Customize the WooCommerce Store Notice

The Store Notice appears to site visitors in an overlay bar at the very bottom of your site (some themes may place it at the top). The bar appears sitewide with an option to dismiss it. The feature is a great way to let visitors know about a current promotion, a featured product category, an upcoming event, or a storewide policy like free shipping for orders over a certain amount.

The Store Notice tab has a field for you to enter text and HTML tags for formatting and linking. Click the Enable Store Notice checkbox to activate the feature.

Customize the WooCommerce Product Catalog

The Product Catalog tab has dropdown menus for managing aspects of your Shop and Product Category pages.

If you have a large number of items in your store, a single Shop page can be overwhelming to visitors. Use the Shop Page Display menu to select what should appear on the page — categories, products, or both. The Category option will display a grid of thumbnails representing the categories available on your store.

Use the Default Product Sorting menu to manage the display of items on the Shop page. It defaults to Custom ordering + name, but you can also sort by:

• Popularity (sales)
• Average Rating
• Most Recent
• Price (ascending)
• Price (descending)

To set a custom order for the default option, go to Products → All Products. Then, click the Sorting tab at the top.

Next, select a category, product type, stock status, or any combination of the three. Click Filter. Now you can drag and drop products however you’d like.

Customize the WooCommerce Shop page product images

The Product Images tab lets you customize the size and display of product images on the Shop page. There are three options:

• 1:1 (cropped to a square)
• Custom aspect ratio
• Uncropped (displayed using the aspect ratio in which images were uploaded)

When you publish your changes, thumbnails in the new image sizes are generated automatically.

2. Customize your Shop page using the Gutenberg Block Editor

If you’re using a block theme, you can edit and customize your WooCommerce Shop page with the Site Editor. Always back up your WordPress site before making edits to your Shop page template.

To customize your page, go to Appearance → Editor and choose Browse all templates from the dropdown menu at the top center of the page.

Click to edit the Product Catalog template.

The Product Catalog template consists of the header, the footer, and the body area. Click into the header or footer areas to edit their contents and add new blocks as desired, like an image or paragraph block.

By default, the body of the page simply has the Product Grid block, which will display the product image, title, price, etc.

Add blocks above and below the Product Grid block to customize your shop page template. You can use any block type, including 20+ WooCommerce Blocks, located in a dedicated section of the Block Inserter for easier browsing.

Use the Best Selling Products and Top Rated Products blocks to promote your most popular items. Use the All Reviews block to include customer testimonials on the page.

The custom Shop page below uses a Columns block to create the content area and sidebar layout. An All Products block loads the catalog into the main area, while filter blocks in the sidebar let the customer quickly find what they’re looking for.

The All Products block settings — accessed via the gear icon at the top right — include tools for adjusting the grid layout, hiding the sorting dropdown, and setting the default product ordering.

You can edit the All Products block to customize your WooCommerce Shop page further. Click on the block, then on the Edit icon.

To manage their settings, you can then click on elements within the example product — like Product Image and Product Title.

You can rearrange the contents displayed for items in the grid. For example, you can move the Add to Cart button above the product ratings. Click to select an element, then use the up/down arrows to move its placement in the layout.

3. Customize your shop page using WooCommerce extensions

Extensions are types of plugins created specifically for WooCommerce stores. You can use them to improve the shopping experience and enhance your Shop page’s content and features.

We’re going to go through a few examples. For more extensions, visit the extension library.

Product Filters for WooCommerce

With Product Filters for WooCommerce, you can allow customers to filter your products based on several criteria, including the category, price, average rating, and stock status.

Filters make a catalog of thousands of items accessible, since shoppers can use them to get relevant results quickly and easily. The extension uses AJAX to update results without the need for visitors to refresh the page.

Filtering options can display in multiple ways — checkboxes, radio buttons, price sliders, size charts, and color lists. They can be based on tags, allowing you to create custom filters like “Staff favorites.”

WooCommerce Quick View

WooCommerce Quick View lets your shoppers learn more about products, choose between variations, and add items to their cart without leaving the main Shop page.

The extension adds Quick View buttons to your Shop page that will trigger a pop up window when clicked. The window contains essential product information, plus the ability to choose between variations and add items to their cart. This speeds up the shopping experience, as visitors can compare products and make selections without having to load multiple new pages.

WooCommerce Advanced Product Labels

WooCommerce Advanced Product Labels adds visual flair to your shop page to catch customers’ attention. You create custom labels to showcase new products, sale items, bestsellers, and more.

Labels can be applied globally, to a specific product, or a group of items based on conditions.

You can set a wide variety of conditions for each label. Add a “New” label for all items added within the last two weeks. Display a “Sale” label for discounted items. Or showcase the items that shoppers purchase the most with a “Bestseller” label.

Conditions include product category, type, price, stock status, popularity, shipping class, featured status, and more. You can even create conditions based on tags for flexible custom groups.

There are six label graphics to help your shoppers browse visually, or you can upload your own label images. Select from a predefined color palette or apply custom colors to match your brand. A live preview option lets you see how labels will look to shoppers.

Product Tables for WooCommerce

Product Tables for WooCommerce lets you display your catalog in a table format for easy reference and comparison on a single page. The column titles are customizable, and you can select a default sort order.

The extension supports variable products, with dropdown menus to select variations. Each row has an Add to Cart button and a checkbox for adding multiple items to cart simultaneously.

Shoppers can use the fields above the table to filter their results based on category and price range. They can also filter by variation attributes like size or color. The filtering is done via AJAX, so it’s quick, with no page refresh required.

You can create as many customized product tables as you want, and use shortcodes to add them to your Shop page. Choose how much product data to display and configure options down to each individual table.

This extension is excellent for any store where customers choose multiple items from a list — like a B2B wholesaler or restaurant displaying menu items for online ordering.

4. Customize your Shop page manually (using code and hooks)

Hooks allow you to customize templates — like the Shop page — without any of the risks that come with editing core files. WooCommerce uses the template file archive-product.php for the Shop page. You can find a list of available hooks on the WooCommerce Action and Filter Hook reference page.

Always back up your site before making any changes — when you modify site code, even one mistake can cause major problems. Jetpack VaultPress Backup is an excellent option, because it saves your site each time a change is made. Then, if your site is down, you can quickly and easily restore a version from right before you made your edits.

Also, never edit the plugin files directly, since future updates will overwrite your work. Instead, add your custom code to your child theme’s functions.php file or use a plugin like Code Snippets.

Here are some customizations you can make to your Shop page using hooks and code:

Hide the shop page result count and default sorting dropdown menu

These page elements are convenient for shoppers but aren’t very useful for stores with only a few items. Add this code to hide them from your Shop page.

// Hide the shop page result count

remove_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );

// Hide the shop page default sorting menu     

remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

You can also hide these elements using CSS code. Go to Appearance → Customize → Additional CSS and add the following code:

.woocommerce-result-count {

display: none;

}

.woocommerce-ordering select {

display: none;

}

Change the number of products per row on your Shop page.

Use this code to override the default number of products per row. Set a higher number to increase the number of products visible on the page without scrolling. Set a lower number, and each product’s image will appear larger for a more detailed view.

In this example, we set the number to two items per row:

// Change the number of products per row on the shop page

add_filter('loop_shop_columns', 'loop_columns', 999);

if (!function_exists('loop_columns')) {

    function loop_columns() {

        return 2; // 2 products per row

    }

}

Move the product titles above the product images on your Shop page.

Use this code to move your product titles from below each row of product images to above them. This layout change gives you a design option to stand out from other stores and puts your titles higher on the page, so shoppers see them without scrolling.

// Move the product title above the product image

add_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_title', 10 );

remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );

Make your prices stand out. 

Make your prices stand out to shoppers by adding the following code to the Additional CSS field in the Customizer. This style change is helpful if the price point is important to your customers. In this example, the price is bolded and set to the color blue.

.wc-block-grid__product {

font-weight: bold;

color: blue;

}

Add some color to your product image borders.

This code adds a colored border to your product image. Here the border is set to 2px wide and the color is orange.

.wc-block-grid__products .wc-block-grid__product-image img {

border: 2px solid #f27c21;

}

Frequently asked questions about customizing the WooCommerce Shop page

What is the WooCommerce shop page?

When you install WooCommerce, it creates several pages by default, including Shop. The default URL is /shop/, but you can choose a different option via WooCommerce → Settings → Product → General. For example, if you’re selling memberships, you could change the default Shop page to one titled “Memberships.”

WooCommerce uses your Shop page name in the URL path for your products: yoursite.com/shop/product-category/product-name/. Go to Settings → Permalinks to customize the URL structure for your Shop and products.

What is the best way to customize a WooCommerce Shop page?

The best way for you to customize your Shop page depends on considerations like your budget for extensions, your comfort level with coding, and your familiarity with blocks and the Site Editor.

You can use the WooCommerce documentation library and blog to enhance your knowledge of WooCommerce and how to customize it.

Should I back up my site before editing the Shop page template?

WordPress does not store a revision history of templates like it does pages and posts. For this reason, you should always back up your site before editing the WooCommerce Shop page template.

How do I boost my Shop page’s loading speed?

Jetpack Boost is the speed optimization plugin for WordPress that beat five top-performance plugins in a head-to-head test.

It specifically targets key areas related to the user experience. These are some of the same things measured by Google when determining site rankings, so an improvement in this area might also help you attract more traffic.

Jetpack Boost can defer the parsing of JavaScript that’s not essential, optimize CSS delivery, and implement lazy loading on your site.

Simply install and activate the plugin, then go to Jetpack → Boost. You can see your performance scores and toggle acceleration features for debugging and speed-testing purposes from one convenient screen.

What else can I do to enhance my WooCommerce Shop page?

Below are more ways you can enhance and optimize your WooCommerce Shop page.

Customize your Shop page’s “Add to Cart” behavior

Speed up the shopping process for your customers by allowing them to add items to their cart directly from the Shop page and then immediately redirecting them to the cart page. You’ll do this through the options found by going to WooCommerce Settings → Products → General.

Check Enable AJAX add to cart buttons to display on archives to display Add to Cart buttons on the main Shop page.

Check Redirect to the cart page after successful addition, and shoppers will go directly to the Cart page after adding an item. This option is great for stores where customers generally don’t need to stay on the Shop page to add more items.

Set a custom product placeholder image

If WooCommerce doesn’t have a photo for one of your SKUs, it will use a default placeholder image.

You can update the Placeholder image to use a custom graphic like your logo. This way, if there’s ever a product without a picture in your store, WooCommerce will show your branded image vs. the default placeholder.

Go to WooCommerce Settings → Products → General and enter the image URL or attachment ID into the Placeholder image field. Save your changes to update the default image.

Improve the speed of your WooCommerce store

A one-second delay in mobile loading times can reduce conversion rates by 20%. So improving your site speed can have an immediate impact on sales.