How to Add a Quick View Popup in Magento 2

The modern technologies provide the full and fast access to different services and products from all over the world. Mobile banking and online stores simplify our life by protecting customer data, speeding up operations, studying customers' needs and offering the best services. Generally, online stores are constantly adding some features which can help improve the website performance and customer service. Longer delivery time can cool off the excitement of the purchase. Or the constant navigation to each product page for detailed information may be inconvenient and turn your customers away.

By default Magento 2 doesn't support the quick view functionality which can help users browse products without opening the product page itself. Adding the preview links will allow to display data within the popup on category pages directly. The Quick View extension for Magento 2 allows to preview product information on catalog and other pages. You can also modify the popup by removing or adding elements as well as creating the custom preview button.

Why do we need a quick view popup?

Give a quick access to product information. Quick View is a useful tool allowing customers to read product details or add products to the cart or wishlist within the popup. There is no need to make users wait until the product page reloads. Such kind of tool motivates customers to view more products in a short period of time helping them to make a quick purchase decision and provides flawless customer service.

Place the Quick View button anywhere on your website. The button is available over the product image aligned to the bottom. It's visible on category pages, search results, homepage, wishlists, related products, upsells and cross-sells. Thus your customers can preview products in one click without unnecessary reloading.

Fully quick view customization. You can easily change the quick view layout by showing or hiding the elements in the popup. Do you want to show the product information within the tabs only? Hide the rest of elements such as links, button "Add to Cart" by entering several commands in the general settings. The form is fully responsive, allowing users to preview the product on any devices.

Now let us guide you through the main settings of the extension.

How to Enable the Quick View Form

After the extension has been activated, the preview link will appear on each product image on Frontend. You can control the main settings following STORES > Settings > Configuration > ITORIS EXTENSIONS > Quick View. All settings can be configured for the certain store views.

For example, you are running multiple stores in French and German. You can easily translate the label for both French and German customers as well as change the button style or popup layout.

How to Customize the Button via CSS

Let's customize the quick view button via CSS. To add color to the button enter the following command in the "Button CSS Style" field in the general settings:

background:#0000FF; opacity:1; width:80%; margin-left:10%;

This is how the button will look on the catalog page:

How to Hide the Fields in the Popup

The default quick view popup displays the full information about the product such as short and full descriptions, stock statuses, the "add to wishlist" and "add to compare" buttons, tabs with reviews and additional information. If a product has related products, cross-sells or upsells they will be displayed in the popup accordingly. Now let's remove the fields in the popup.

A. Hide the "Add to Cart" button in the popup. Enter the command in the "Popup Layout Update XML" field in the general settings:

<referenceContainer name="product.info.addtocart.additional" remove="true" />

B. Hide the tabs in the popup. Enter the following command in the "Popup Layout Update XML" box in the general settings:

<move element="product.info.details" destination="qview.hidden" />
<move element="product.info.social" destination="qview.hidden" />

C. Remove the links in the popup. Enter the following command:

<referenceContainer name="product.info.social" remove="true" />

The Quick View extension for Magento 2 is a helpful tool that allows customers to save time and preview product information in the popup everywhere on your website. The preview popup displays all details, which are available on a separate product page. Users can also do the same actions such as submitting reviews, adding products to the wishlist and compare list, customizing and adding products to the shopping cart.