Skip to content

How to View Product Details in a Product Listing on WooCommerce

womans-eyes

You land on a shop or category page on a WooCommerce site. You are almost sure the product you see is what you need, but you are not exactly certain.

So what do you do? You want to click through to the product page.

You need a few more details.

Or perhaps you are perusing a list of products via category. It looks like the one, but, still, you are not sure. When you click on it, you realize that the one next to it on that page was the one you really wanted. You go back. Now you have to scroll through them again to find it.

What if you could get that info then and there?

What I have described above is what your customer may be experiencing or thinking. And it can be frustrating.

Viewing Product Details While On the Shop or Category Page

I’m going to show you two different plugins that offer your customers this option, but in a modal or popup view.

WooCommerce QuickTray Plugin

The WooCommerce QuickTray plugin is simple. There is no setup; all you do is install and activate. Once you have done that, you will see a Quickview button on your products listed, either on your shop page, a category page or in search results.

Just click the button and it opens in in a tray directly in your WooCommerce shop, catalog, or product category page.

If you want to change the button text from quickview, the site provides the code snippet to do that.

WooCommerce Quickview Plugin

On the other hand, you might want something like the WooCommerce Quickview plugin. This time it opens in a modal and has a bit more customization and control to it.

Trigger Settings

First we will look at how to trigger the view.

Trigger Method

You have the option for modal to appear either by clicking the button, or by hovering over it.

Trigger Positioning

You can choose a few places to display and position the button by the product, as well as fine tune the margins.

Trigger Styling

Unlike the other plugin, you can change the text of the button without code, have the button show up only on hover and choose an icon for it.

Plus options for a flat or bordered button, some padding, border radius and setting the colors.

Popup Settings

There are several customization you can do to the popup as well.

Popup General Settings

Interestingly, you have the option to navigate between the other products on the page via the popup, which is a cool feature. Also, some control via the overlay behind the popup.

Popup Imagery

You can control the slider of the images as you would any slider gallery.

Popup Content

This is a great option that lets you show what content you want to in the popup. It depends on how much you want to display, so I would test it. For example, if your full descriptions are pretty long, you may want to stick with the short ones.

You also can choose the button colors that will let them add it to cart via the popup window.

If we go to our shop page, you see the button is now added to the products for a Quickview.

And if we click on it we get the popup:

As you can see, both of these plugins offer solutions but are very different as far as how the user interacts with them.

It might be that you are already considering the pros and cons for your site. But whatever you decide, whether it’s the Quick Tray or Quickview plugin, it gives your customers an easier way to dive deeper into the product without leaving the page they are on.

Your thoughts...