If you’re looking to customize the WooCommerce shop page on your ecommerce store, this article is for you. In this article, we’ll show you how to edit everything from:

  • Customizing the product filter dropdown/sidebar.
  • Show additional product images (with zoom, flip, and swipe hover effects).
  • Showing product variations as single products.
  • Changing the Add to Cart button and more.
Customize WooCommerce shop page

How you present the WooCommerce shop page to your customers is crucial to the success of your store. Customizing the WooCommerce shop page, allows you to organize your products meaningfully so that your customers can easily find what they’re looking for.

So in this post, we’ll show you different ways you can customize your WooCommerce shop page and how you can improve this page with the help of the following plugins:

These are perfect for store owners with a store built with or without using a page builder like Elementor. 

That being said, let’s see how you can customize the WooCommerce shop page of your online store. 

How to customize the WooCommerce shop page

The default WooCommerce install offers some flexibility in customizing your shop page. Including adding product filters, displaying product reviews and ratings, displaying additional products, etc.

However, if you’re looking for something extra, you can use plugins to help you customize the WooCommerce shop page further.

Below we’ve outlined 5 different ways you can customize the WooCommerce shop page to increase sales and your conversion rate. 

#1: Update your product filter dropdown/sidebar

The product filter on the shop or category page can usually be found in the sidebar of your WooCommerce store. This filter widget allows customers to be more specific when searching for products. When it’s working well, your product filters have the ability to increase your conversion rate and get customers to the checkout page, faster.

In particular, if you have product variations with attributes, the way customers filter using these could be much easier. They’re displayed as basic dropdowns and simple words with checkboxes. 

Standard WooCommerce product filters

The additional number of clicks a customer has to make before finding the product they’re looking for can discourage them from purchasing from you. 

We can do a lot better to improve how variable product attributes are displayed. Fortunately, there are solutions for this, and we’ll highlight them below. 

Replace each attribute dropdown with color and image swatches

One way to improve product attribute dropdowns is to replace them with attribute swatches. You can add color and image swatches to your shop’s filters using a plugin called WooCommerce Attribute Swatches

Product filters using WooCommerce Attribute Swatches

WooCommerce Attribute Swatches allows you to replace the standard WooCommerce dropdown filters with color and image swatches. Customers can simply click on the swatches to select their preferred attribute. 

WooCommerce Attribute Swatches

Turn your WooCommerce product options into color, image, or text swatches. Instantly enhance your customers' online experience.

Attribute swatches allow customers to quickly go through product variations and arrive at their preferred option faster. It also presents product attributes in a more visually-appealing way, improving customer experience. This increases the chance they’ll purchase from your store. 

Add color and image swatches below product images on the shop page

The standard WooCommerce setup allows you to only display product attributes on a single product page. With WooCommerce Attribute Swatches, you can change this and display product attributes on the shop page just below the product images as color or image swatches.

Customers will have an easier time navigating through product attributes and will find the product they want to purchase, faster. 

#2: Show additional product images on the shop page

Product images are essential to selling a product in an ecommerce store. They enable shoppers to understand the product better. So the more images you provide, the better customers will understand your product.

One of the biggest downsides of online shopping is that the customer doesn’t have the opportunity to physically interact with the product. Providing additional images on a product allows you to visually cover it from different angles. This helps alleviate some of the doubt from your customers about the authenticity of your product. 

additional product images on the shop page
Image Swap – Thumbnails example

Let’s say you’re selling shoes, you need to provide high-quality images of its view from the front, back, sides, top, and also the soles.  

Usually, a customer would have to go to the single product page to view additional images of it. But, there is an option to cut down the number of clicks required for a customer to view additional images of a product. You can do this by showing them on the shop or category pages

Add image hover effects to your shop page images

One way to show additional product images on the shop/categories page is by adding image hover effects

Fade on Hover
Image Swap – Fade on Hover Example

When you add product image hover effects to your WooCommerce store, the images of a product will flip/change when a customer hovers over it. This way, customers can quickly browse through a product’s gallery without visiting the product page. By default, you can’t add image hover effects to your product images on your WooCommerce store. But, there is a plugin for this. 

Image Swap for WooCommerce is a plugin that lets you add image flip and hover effects to your product images. Additional images of your products will be displayed without requiring the customer to navigate away from the shop page.

With this plugin, you can display alternative views of a single product on the shop page. When a customer hovers on the product image, it will change displaying the additional images one after another.

It offers up to 9 highly configurable image effects for transitions and general display, including:

  • Slide
  • Fade
  • Bullets
  • Thumbnails
  • Picture-in-picture, and more.

Image Swap for WooCommerce

Add image swap effects to your product archive pages. Slide, zoom, thumbnails, fade, flip, and more. Make your product collection easier to browse.

With these effects, customers can quickly flip through a product’s images and subsequently make a purchase decision a lot faster. It is relatively simple to use. All you need to do is install and activate the plugin and select your effects.

Adding image hover effects is just one way to reduce the clicks a customer will go through before making a purchase decision. You can go further and add product information on a preview popup (quickview). This will eliminate the need to visit individual product pages and increase the chances of a sale.

#3: Add a product preview or quickview to the shop page

A product quickview on the shop or category page makes it easier for customers to quickly view a summary of product information. It reduces the number of clicks required for a customer to be well-informed about a product, enough to make a purchase. 

When used efficiently, it can keep a customer on your shop page, where they can make more purchases because they won’t have to visit individual product pages. 

WooCommerce Quickview Gallery

Customers will have a seamless shopping experience and this has the potential to increase your average order value. Alternatively, customers can quickly go through your store’s offerings and even compare products and select the best option. 

Add a quickview product popup to the shop page

You can add a product preview on the shop page as a popup once a customer clicks on it. The standard WooCommerce setup does not allow you to add product previews to your shop page, but there is a plugin for this.

WooCommerce Quickview is a plugin that lets you add a product lightbox to product listing pages. A ‘Quickview’ button of products will be displayed on the shop page. This button will be displayed just below or next to the ‘Add to cart button’. 

WooCommerce Quickview

Quickly view any product from the catalog, without reloading the page. Encourage sales with easy and efficient product browsing.

The button is highly customizable, you can use your theme or child theme’s styling, change its position, color, and more.

Customize WooCommerce Quick View Button

Suppose the button has been automatically inserted where it shouldn’t be, you can completely remove it so that you insert it manually. The simplest way to do this is by using shortcode, you can also use HTML or PHP if you have coding experience.  

When customers click on this button, a mini version of the product’s page will be displayed.

As the store owner, you have the ability to customize the contents of the Quickview popup. It includes a variety of customization options including adding or removing the following:

  • Product description/product short description.
  • Product title.
  • The product price.
  • Product gallery.
  • Add to cart button.
  • Product star ratings.
  • Product categories, tags, and more.

#5: Show additional products on the WooCommerce shop page

Product variations usually appear as variable products on the shop page. This can be quite restrictive, especially if you have a lot of them.

Instead, you can separate them to be displayed as additional products (or as standalone products), which seamlessly expands your product catalog. Through this, you’ll also be able to make product variations more appealing to your customers.  

Display product variations as single products

The standard WooCommerce shop page layout displays product variations as options of the parent (variable) product. A customer can only access these variations on the product page. This alone adds to the number of clicks they have to go through to find their preferred option and make a purchase. You can leverage the capabilities of a plugin to display variable product options as single products (simple products). 

WooCommerce Show Single Variations allows you to display WooCommerce variable product options as individual products on the shop page. It also lets you do the same for category pages, search results, and filtered results.

show single variations

These product variations are displayed in the same way as simple products but are linked through to their parent product.

Customers will be able to directly add these variations to their cart, saving them a lot of clicks. A better customer experience is more likely to translate to more sales (and more revenue for you).  

WooCommerce Show Single Variations

Display individual product variations of a variable product in your product listings. Make it easy for your customers to view and filter product variations.

Show Single Variation allows you to manually change variation visibility. When installed and activated, WooCommerce Show Single Variations adds the following checkboxes to the ‘additional images’ tab in the variations section of a product:

  • Show in search results?
  • Show in filtered results?
  • Featured
  • Disable ‘Add to Cart’?
  • Listings only?
Preview of WooCommerce Show Single Variations plugin in action
How to display variations as single products

So if you want a given variation to appear on the product catalog, featured filter, and search results. All you have to do is follow these step by step instructions:

  • Navigate to the variations section of the parent product in your WordPress dashboard.
  • Select any of the variations. You should see the additional images tab with the checkboxes listed above.
  • Here, you can determine where a given product variation will appear in your WooCommerce shop by selecting the available checkboxes. 

As you can see, using Show Single Variations to display variable product options as individual products is very simple. 

Change the Add to Cart button

WooCommerce Show Single Variations also allows you to change the ‘Select Options’ button text for product variations to say ‘Add to Cart’ instead. This works well if you’d like customers to be able to make direct purchases on the shop page. So they can then go directly to the WooCommerce cart page. Rather than clicking through to the variable product page.

Alternatively, you could disable this feature and allow your customers to select other attributes on the single products page. Click the checkbox that says ‘Disable Add to Cart?’ on the variations tab of the product to do this.

Customize the WooCommerce shop page today

In this post, we’ve gone through some different ways you can customize your WooCommerce shop page. By using the following plugins, you’ll be able to provide a seamless and user-friendly customer experience. While also reducing the number of clicks they have to go through to purchase a product from your store. 

All without having to look for new WordPress themes, WooCommerce templates, or open up the WooCommerce customizer.