How to Add Quick View in WooCommerce

When customers visit your online store, they generally like to quickly browse through all the products. If they find a product of interest, they will click to view the details of the product.

For traditional online stores, if customers want to view the details of the product, they need to enter the product page, after that, if they want to see other products, they need to go back to the shop page again.

After several times back and forth between the shop page and the product page, customers may forget which products they have viewed and miss the products they are looking for. Moreover, it takes time to load each product page, which may cause the customer losing interest and eventually leave your store.

This tutorial will guide you how to add a quick view button to the products in your WooCommerce store. You can add the button on top of the product image, show the button persistently or only on mouse hover. You can also add the button before or after the product name or the Add to Cart button.

When clicked, the quick view button will display the product details in a quick view lightbox. Customers can view product details, check product options and add the product to the shopping cart via Ajax. If they want to go back shopping, they can simply close the lightbox or use the navigation arrows or products thumbnail carousel to navigate through other products.
Continue reading