How to add quick view in WooCommerce
Do you want to include the quick view feature on your site? Learn how to add and customize a quick view button on your WooCommerce store.
In every WooCommerce shop, customers can see detailed information about the products on the product pages. However, they can’t see the description, variations, and other information attached to the product on the default shop page. When shoppers are on the shop page, they have to click on the product image or link to go to the product page to see more information about that product. This isn’t ideal because it adds a step to the purchase process and if customers want to keep on browsing your products, they have to go back to the shop page.
However, you can add a quick view button on the WooCommerce shop page and improve users’ experience. That way, shoppers will be able to see all the information about a product without leaving the shop page. Let’s have a closer look at what a quick button view does and how to add it to your store.
What is a quick view button?
A quick view button allows customers to see the details of a product right on the shop page and without having to open the product page of each item they’re interested in. This way, shoppers can navigate through the products from the shop page improving the purchase experience. When the user clicks on the quick view button, a pop-up will open displaying all the relevant information about the product on the same page. There’s no need to reload the shop page or redirect users to another page.
How to add a quick view button to the WooCommerce shop page
The easiest way to add a quick view button to your store is to use a plugin. For this demo, we’ll use Direct Checkout, one of the best checkout plugins for WooCommerce out there. Even though Direct Checkout has a free version, you’ll need the premium version to add quick view buttons. You can choose any of the 3 premium plans that start at just 19 USD (one-time payment).
Installing and activating Direct Checkout
First, install Direct Checkout. You need to get the free version from here and one of the premium versions from this link. Keep in mind that you need to install and activate both the free and premium version of the plugin to unlock the quick view feature. After you install both, go to WooCommerce > Direct Checkout > Archives and activate the Add quick view button option. In this section, you can also replace the default text of the Add to cart button. Note that this won’t affect the behavior of the quick view button in any way. That’s it! You’ve just added a quick view button to your WooCommerce shop page! This is how the button looks if you’re using the StoreFront theme: And when you click on the quick view button, the modal pop-up will appear and look similar to this: Note that all the product information is displayed in the quick view pop-up. Even the Add to cart button is there, which allows customers to add products to their carts right from the pop-up. Now, let’s take it a step further and see how to customize the quick view button with a bit of CSS.
How to customize WooCommerce quick view
In this section, you’ll learn how to customize both the quick view button and the quick view modal pop-up using a bit of CSS. CSS scripts are very useful for many tasks so even if you’re a beginner, it’s worth learning a few basic CSS concepts. Now, let’s have a look at how to customize different elements of both the quick view button and the quick view modal pop-up.
Note that you should paste the following codes in the style.css file of the child theme or the Additional CSS box of the theme customizer. If you don’t have a child theme, you can check out this post to create one or use one of these plugins.
3.1 Edit the quick view button
Change the width of the quick view button
li.product .qlwcdc_quick_view.button{
width: 40%;
}
Edit the background color
li.product .qlwcdc_quick_view.button{
background: #79b0f7;
}
Edit the icon color
li.product .qlwcdc_quick_view.button{
color:red;
}
Add rounded borders
li.product .qlwcdc_quick_view.button{
border-radius: 5px;
}
Use an image as a button
li.product .qlwcdc_quick_view.button{
width:75px;
content:url('https://pbs.twimg.com/profile_images/476389199621275648/G6c2Zoe__400x400.jpeg');
}
Replace icon with text
li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
content: "quick view text";
color:white;
background:black;
padding:10px;
}
Add hover effect
li.product .qlwcdc_quick_view.button:hover{
color:black;
background:yellow;
}
3.2) Edit the quick view modal pop-up
Now, let’s see some code to customize the quick view modal pop-up.
Change the background-color
#qlwcdc_quick_view_modal>div>div>div.modal-body{
background:greenyellow;
}
Hide product meta
#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div .summary .product_meta{
display:none;
}
Hide quantity and add to cart
#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div>div.summary>form.cart{
We’ve just had a look at different scripts to customize different aspects of the quick view button in WooCommerce. If you want to learn more about what you can do with CSS, check out this guide.
display:none;
}
Sample CSS scripts
Now that you’ve learned how to add and make basic customizations to the quick view in WooCommerce, let’s take it a step further. Below you’ll find three examples to edit the quick view button and add a bit of flavor to your shop page.
Circle button with custom icon
li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
font-style:normal;
font-family: "Font Awesome 5 Free";
content: "\f002";
color:white;
background:black;
padding: 15px;
border-radius:50%;
}
Styled text button
li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
font-style:normal;
content: "view";
color:black;
background:#eeeeee;
padding:8px 18px;
border:3px solid brown;
border-radius:15px 3px;
}
Using an image as a button
li.product > a.button.add_to_cart_button{
bottom:30px;
position:relative;
}
li.product .qlwcdc_quick_view.button{
background:transparent;
width:85px;
content:url('https://icons.iconarchive.com/icons/iynque/flurry-extras-9/512/Quick-Look-Droplet-icon.png');
}
Conclusion
All in all, by adding a quick view button you will improve your customers’ buying experience. They will be able to see the main details of the product directly on the shop page without having to open the product page of each item they want to see. The easiest and more convenient way to add a quick view button in WooCommerce is to use the Direct Checkout plugin. This tool allows you to add the quick view button on the shop page in a few clicks. Then, if you want to take it a step further and customize both the button and the pop-up, you can use a bit of CSS.
Do you know any other ways to include a quick view button in your store? Did you have any issues following our guide? Let us know in the comments section below and we’ll do our best to help you out.
For more information on how to customize your store, we recommend you check out the following guides:
2 Comments
Add comment Cancel reply
You must be logged in to post a comment.
Replace icon with text – doesnt work for me 🙁
Use an image as a button – shows the button NOT alligned with previous button