Addonify Quick View Pro

Addonify Quick View Pro adds a quick view button to WooCommerce product loops. Selecting it opens a popup modal with an AJAX-loaded product summary, so shoppers can inspect an item while browsing the catalog and follow a link to its full detail page.

Choose the preview content

Set the modal to display a product picture or gallery, title, price, excerpt, add to cart button, and product detail link. Pro settings add related products, navigation between products, social sharing, viewed-product analytics, and AJAX add to cart.

Configure the modal and storefront styling

Set the quick view button label and icon, pick a spinner, set the content row direction, and configure opening and closing animations. Quick view can be disabled on mobile. The modal can close when a visitor presses Escape or clicks outside it, and the close button can be shown or hidden.

Style the quick view button text, background, border, and radius. Appearance controls also cover the modal box, overlay, text, border, radius, and CSS z-index. Adjust spinner color and size, gallery borders and icons, product image borders, thumbnail spacing and count per row, plus colors for titles, prices, rating stars, and modal buttons. Title and price font sizes and title font weight can also be set.

Use a shortcode or developer controls

To show a quick view button for one product, use [addonify_quick_view_button id="1" label="Quick View" classes="btn" icon="icon_one" icon_position="left"]. The attributes set the product ID, button label, CSS classes, icon, and icon position. Available icon values execute from icon_one through icon_six; the position can be left or right.

For custom implementations, developers can add custom quick view buttons, use hooks and filters, override plugin templates, or work with the JavaScript API. Custom CSS can be added in the admin options.

Set up product previews

Install and activate the plugin on a WordPress website running WooCommerce, then use the plugin settings to choose modal content, appearance, and behavior for product loops. Use the shortcode when a button is needed for a specific product.