Get 20% off at WooCommerce During Our Marathon
Celebrate 48-hours of content.
Includes bundles; can’t be used with other coupons or on products already on sale; expires April 5, 2019 midnight PST
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.
You need a few more details.
So what do you do? You want to click through to the product page.
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.
First we will look at how to trigger the view.
You have the option for modal to appear either by clicking the button, or by hovering over it.
You can choose a few places to display and position the button by the product, as well as fine tune the margins.
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.
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.
You can control the slider of the images as you would any slider gallery.
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.