From catalog click to product details

Addonify Quick View Pro adds a quick view button to WooCommerce product loops. Selecting it opens a modal with an AJAX-loaded product summary, so shoppers can inspect an item before visiting its full product page.

Choose preview content and actions

Configure the modal to display a product image or gallery, title, price, excerpt, add to cart button, and a link to the full product detail page. Pro adds related products and navigation between products. It can also enable social sharing, track viewed products with analytics, and allow AJAX add to cart in the modal.

Set modal behavior

Choose the quick view button label and icon, select a spinner, set the modal content row direction, and configure opening and closing animations. Quick view can be disabled on mobile devices. Visitors can close the modal with the Escape key or an outside click; you can also show or conceal its close button.

Style the button, modal, and product details

Appearance controls cover the quick view button text, background, border, and corner radius. For the modal, adjust the box and overlay colors, text and border colors, corner radius, and CSS z-index. Spinner controls include color and size.

Gallery settings cover borders and icons, product image borders, thumbnail spacing, and the number of thumbnails per row. You can also adjust colors for product titles, prices, rating stars, and other modal buttons. Typography settings include title and price font sizes and title font weight.

Use a shortcode or developer hooks

The [addonify_quick_view_button id="1" label="Quick View" classes="btn" icon="icon_one" icon_position="left"] shortcode displays a button for a selected product. Its attributes set the product ID, label, CSS classes, icon, and icon position. Available icon values execute from icon_one through icon_six; when an icon is set, its 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 from the admin settings page.

Install and configure

Install Addonify Quick View Pro on a WordPress website running WooCommerce, then configure the button, modal content, appearance, and behavior in the extension settings. Use a shortcode for a button tied to a specific product, or add custom CSS and developer integrations as needed.