Addonify Quick View Pro for WooCommerce Product Previews

Preview products from the catalog

Addonify Quick View Pro includes a quick view button to WooCommerce product loops. Selecting it opens a popup modal with a product summary loaded using AJAX. The preview can include the product image or gallery, title, price, excerpt, add to cart button, and a link to the full product page. Choose which elements appear in the modal.

Pro settings let you display related products, move between products, enable social sharing, track viewed products with analytics, and add entries to the cart using AJAX from the modal.

Configure the button and modal

Set the quick view label and button icon, select a spinner, set the modal content row direction, and choose opening and closing animations. You can disable quick view on mobile devices, let visitors close the modal with the Escape key or an outside click, and show or conceal its close button.

Appearance options cover the button text, background, border, and radius; the modal box, overlay, text, border, and radius; and the modal CSS z-index. Further controls adjust spinner color and size, gallery borders and icons, product image borders, thumbnail gaps and the number of thumbnails per row. Set colors and typography for product titles, prices, rating stars, and modal buttons, including title and price font sizes and title font weight.

Shortcodes and developer controls

Use a shortcode to show a quick view button for a selected product. Its attributes set the product ID, button label, CSS classes, icon, and icon position. Developers can customize buttons, use hooks and filters, override add-on templates, and work with the JavaScript API. Custom CSS can be added from the settings page.

Install and configure

Install Addonify Quick View Pro on a WordPress site running WooCommerce. In the add-on settings, configure the quick view button, modal content, appearance, and behavior for product loops. For a button tied to a specific product, use the shortcode; add custom CSS if needed. Custom implementations can use the hooks and filters, template overrides, or JavaScript API.