This module ensures a better shopping experience for customers. It displays a quick preview of the product without leaving the page they’re on. Therefore, shoppers can quickly purchase the product. It saves time and adds modernization to the website.
The “Quick View” module has two sections. ‘General’ and ‘Style.’
1) General #
Click on the General section.
1.1) Enable Quick View: To enable the quick view, click on the toggle button.
1.2) Shop Page Button Position: Select the button position “Before Add to Cart,” “After Add to Cart,” “Top on The Image,” or “Use Shortcode” or “Custom Position.”
1.3) Enter Hook Name: Users can add a hook name to display the button position. Example: woocommerce_after_shop_loop_item. Or copy the php code
<?php do_action( 'rtsb/modules/quick_view/frontend/display' ); ?> and paste it in your product query where you want to show the button.
1.4) Loop Hook Priority: You can set the hook priority.
1.5) Quick View Text: Insert the Tooltip text of the quick view icon.
Now, click on the “Save Changes” button to save all the updates.
2. Style #
Click on the Style section.
2.1) Modal Width (px): Customize the quick view button’s modal width. Example: 950px
2.2) Modal Height: Modify the quick view button’s modal height. Example: 450px
2.3) Modal Wrapper Padding: Select the quick view modal wrapper padding as your preference.
2.4) Modal Background Color: Choose the quick-view modal background color.
2.5) Modal Box Shadow Color: Select a quick-view modal box shadow color.
2.6) Modal Overly Color: Choose quick view modal overly color.
Now, click on the “Save Changes” button to save all the updates.
Quick View Front End #
Below, you can see the front-end appearance of quick view icon and quick view pop-up for a better experience.
