The Quick View module allows customers to get an overview of a product without having to open the product page.
The product summary shows up in a fully customizable pop-up modal. This module is completely responsive and has a mobile-friendly UI.
Here’s an example of what the Quick View modal looks like on the frontend of a WooCommerce store:
And this is what the buttons look like on the Shop page (you can configure the button design):
Below, we’ll see how to set up Merchant’s Quick View module.
1. Open the Module
Open your Merchant dashboard by clicking the Merchant menu in the left sidebar of your WordPress admin area.
In the Convert More section, click the Quick View module to open its settings page:
2. Customize Your Quick View Buttons
To configure the look and feel of your quick view buttons, scroll down to the Settings section on the module’s admin page.
You have access to the following options:
- Button type – This option allows you to choose between three button types: Text, Icon, and Icon + text.
- Button text – If you chose the Text or Icon + text button type, here you can change the label on the button (default value: ‘Quick view’).
- Button icon – If you chose the Icon or Icon + text button type, here you can choose between two stylish icons: an eye and a shopping cart.
- Button position – This option allows you to decide where the buttons will appear in the modal. The available options are Before – Add to cart, After – Add to cart, and Overlay.
- Button position top – If you chose the Overlay option, here you can set the distance between the top of the modal and the button (default value: 50%).
- Button position left – If you chose the Overlay option, here you can set the distance between the left of the modal and the button (default value: 50%).
- Icon color – This is the color of the quick view icon (default value: #ffffff).
- Icon color hover – This is the color of the quick view icon when a customer hovers the mouse over it (default value: #ffffff).
- Button text color – This is the color of the quick view text (default value: #ffffff).
- Button text color hover – This is the color of the quick view text when a customer hovers the mouse over it (default value: #ffffff).
- Button border color – This is the border color of the quick view button (default value: #212121).
- Button border color hover – This is the border color of the quick view button when a customer hovers the mouse over it (default value: #414141).
- Button background color – Here, you can change the background color of your quick view buttons (default value: #212121).
- Button background color hover – Here, you can change the background color of your quick view buttons when a customer hovers the mouse over them (default value: #414141).
Once the settings are configured, click the Save button in the top-right corner of the page.
3. Configure Your Quick View Modals
Below the Settings, you’ll find a Modal section. Here, you can customize the design and layout of the Quick View lightbox that pops up when a visitor clicks a Quick View button.
You have access to the following options:
- Modal width – Here, you can define the width of the lightbox (default value: 1000px).
- Modal height – Here, you can define the height of the lightbox (default value: 500px).
- Place product image – This option lets you choose between three locations for the product image: left (Thumbs at left), right (Thumbs at right), and bottom (Thumbs at bottom).
- Zoom effect on image – This toggle allows you to enable or disable a zoom effect on the product image.
- Place product description – Here, you can select the location of the product description. The available options are Top and Bottom.
- Description style – Here, you can set whether you want to show the full product description or just a short description.
- Show quantity selector – This option lets you add a quantity selector to the modal.
- Show buy now button – This option lets you show or hide the Buy Now button in the modal.
- Show suggested products – Here, you can enable or disable product recommendations in the modal. If you enable this option, you can also choose the basis of the recommendations, depending on the Merchant modules you have activated. The available options are Bulk Discounts, Buy X, Get Y, and Frequently Bought Together.
- Suggested products placement – If you enabled the Show suggested products option, here you can configure the location of your product recommendations in the modal. The available options are Before Add to Cart and After Add to Cart.
- Sale price color – This is the text color of the sale price in the modal (default value: #212121).
- Regular price color – This is the text color of the regular price in the modal (default value: #999999).
If you’ve changed any of the default values, click the Save button in the top-right corner of the page.
4. Enable the Module
If you’re happy with the design, click the Enable button at the top of the page to activate the module:
