<ul class="wccom-tick-list-primary">
<li data-sourcepos="3:1-3:94"><strong>Quick Product Preview:</strong> Allow customers to view product details in a popup without leaving the current page.</li>
<li><strong>Ajax Add-to-Cart:</strong> Enable purchases directly from the quick view popup without reloading the page.</li>
<li><strong>Quick-view Button Placement:</strong> Place the quick view button flexibly on product listings.</li>
<li data-sourcepos="5:1-5:83"><strong>Content Control:</strong> Select which product details appear in the quick view popup.</li>
<li data-sourcepos="7:1-7:79"><strong>Button Styling:</strong> Customize quick-view button appearance with colors, text, and icons.</li>
<li data-sourcepos="8:1-8:73"><strong>Popup Design:</strong> Customize popup animations, size, layout, and colors.</li>
<li><strong>Redirect to Checkout:</strong> Auto-close on add-to-cart and optional checkout redirection.</li>
<li><strong>Enable/Disable on Mobile Devices:</strong> Enable or disable quick view on Mobile Devices</li>
<li data-sourcepos="9:1-9:60"><strong>Advanced Customization:</strong> Add custom CSS and JavaScript.</li>
<li data-sourcepos="12:1-12:73"><strong>User-Friendly Interface:</strong> Makes product browsing easy and enjoyable.</li>
<li data-sourcepos="14:1-14:82"><strong>Fast & Easy Product Previews:</strong> Quick look at products without page loads.</li>
<li data-sourcepos="14:1-14:82"><strong>Extensive Theme Support:</strong> Compatible with numerous popular WooCommerce themes.</li>
<li data-sourcepos="13:1-13:83"><strong>Mobile-Friendly User Interface:</strong> Makes product browsing easy and enjoyable on all devices.</li>
</ul>
<hr />
<p data-pm-slice="1 1 []">Improve the way customers browse your WooCommerce store with the Quick View for WooCommerce — a feature-rich extension that lets customers preview product details in a sleek popup without leaving the current page. With just one click, shoppers can view essential information, add items to their cart via AJAX, and even proceed directly to checkout — all without interrupting their browsing flow.</p>
<p>This plugin offers full flexibility, including customizable button placement, popup design, content control, and mobile optimization. Whether you’re aiming to speed up product browsing, reduce cart abandonment, or boost conversions, Quick View for WooCommerce provides a fast, smooth, and user-friendly experience that keeps shoppers engaged and encourages more purchases.</p>
<h4><img class="alignnone size-full wp-image-18734005362808" src="https://woocommerce.com/wp-content/uploads/2025/03/12.gif" alt="Quick View for WooCommerce" width="980" height="551" /></h4>
<h4>AJAX Add to Cart</h4>
<p>With AJAX Add to Cart, customers can add products directly from the Quick View popup, eliminating page reloads.</p>
<h4><b>Auto-close quick view</b></h4>
<p>Choose to close Quick View automatically when an item is added to the cart.</p>
<h4><b>Redirect customers to checkout</b></h4>
<p>Instantly redirect customers to checkout when add-to-cart product from the Quick View.</p>
<h4>Place Quick View Button Anywhere</h4>
<p>Choose from five flexible Quick View button positions: before or after ‘Add to Cart’, before or after the product title, or directly on product hover.</p>
<p><img class="alignnone size-full wp-image-18734005357574" src="https://woocommerce.com/wp-content/uploads/2025/03/Frame-1-4.png" alt="WooCommerce Quick View Button Placement" width="980" height="463" /></p>
<h4>Quick View Content Control</h4>
<p>Select which product details appear in the Quick View popup, or hide unwanted information, like</p>
<ul class="wccom-tick-list-secondary">
<li>Show/Hide <strong>Product Title</strong></li>
<li>Show/Hide <strong>Quantity & Add to Cart</strong></li>
<li>Show/Hide <strong>Product Price</strong></li>
<li>Show/Hide <strong>Product Ratings</strong></li>
<li>Show/Hide<strong> Product SKU</strong></li>
<li>Show/Hide <strong>Images & Gallery</strong></li>
<li>Show/Hide <strong>Categories & Tags</strong></li>
<li>Show/Hide<strong> Product Description</strong></li>
<li>Show/Hide <strong>Related Product</strong><img class="alignnone size-full wp-image-18734005357576" src="https://woocommerce.com/wp-content/uploads/2025/03/Frame-2-4.png" alt="Show/Hide Content in Quick View WooCommerce" width="980" height="366" /></li>
</ul>
<h4 class="wp-block-heading">Customize Quick-view Button</h4>
<p>WooCommerce Quick View allows you to fully customize your Quick View button with adjustable colors, text, icons, and rounded corners.</p>
<p><img class="alignnone size-full wp-image-18734005357579" src="https://woocommerce.com/wp-content/uploads/2025/03/Frame-3-5.png" alt="Customize Quick View Button for WooCommerce" width="980" height="575" /></p>
<h4>Customize Quick View Popup</h4>
<p>Customize your Quick View popup with animation effects, layout adjustments, spacing controls, and color options using Quick View for WooCommerce.</p>
<p><img class="alignnone size-full wp-image-18734005357581" src="https://woocommerce.com/wp-content/uploads/2025/03/Group-11.png" alt="Customize Quick View Popup for WooCommerce" width="980" height="559" /></p>
<h3>Mobile-Optimized Experience</h3>
<p>Experience consistent and intuitive functionality across all devices, providing an optimal mobile browsing experience for your customers.</p>
<h3>Why Use Quick View & Buy for WooCommerce?</h3>
<ul class="wccom-tick-list-secondary">
<li><strong>Improving User Experience:</strong> Quick View for WooCommerce allows customers to quickly see product details without leaving the product listing page, making browsing faster and more efficient.  </li>
<li><strong>Boosting Conversions:</strong> By reducing the number of clicks and page loads required to view product information, it simplifies the buying process and encourages purchases.  </li>
<li><strong>Saving Time:</strong> Customers can quickly scan products and make decisions without having to navigate to individual product pages.</li>
<li><strong>Enhancing Mobile Shopping:</strong> Quick view popups are often optimized for mobile devices, providing a better experience for mobile users.</li>
<li><strong>Increasing Engagement:</strong> WooCommerce Instant View encourages customers to explore more products by providing a convenient way to view details.  </li>
<li><strong>Reducing Bounce Rate:</strong> By keeping customers on the listing page, it helps prevent them from leaving the site.</li>
</ul>

Quick View & Buy

<p>Allow customers to preview product details within a fully customizable popup and directly add items to their cart.</p>

<h2>Get more items in the cart by building urgency and trust with your customers</h2>
<div class="twocol-one" style="margin-bottom: 0">
<p>Product Badges helps you showcase key product details, limited-time offers, or important info directly on your product images. Choose from pre-made badges, upload your own, use a countdown timer, or create custom badges with text or code.</p>
<p>Use product badges to:</p>
<ul>
<li>Build urgency with countdowns and low-stock labels</li>
<li>Promote sales, shipping perks, or product features</li>
<li>Highlight categories, brands, or custom tags</li>
</ul>
<p>No image editing required. Just pick a badge and assign it to the products you want.</p>
<p>The built-in dashboard makes it simple to create, customize, and apply badges. Assign badges by product type, stock status, category, tag, shipping class, or manually for full control.</p>
<p>Badges can be shown on:</p>
<ul>
<li>All products or specific products</li>
<li>Sale or non-sale products</li>
<li>Out of stock, backorder, or featured products</li>
<li>Products in specific categories or with specific tags</li>
</ul>
<p style="font-style: italic">Read on to find out why you should use Product Badges and the great features included…</p>
</div>
<div class="twocol-one last" style="margin-bottom: 0">
<p><a href="https://woocommerce.com/wp-content/uploads/2020/10/product-badges-screenshot-display.jpg" target="_blank" rel="noopener"><img style="border: 1px solid #dedee0;border-radius: 5px" src="https://woocommerce.com/wp-content/uploads/2020/10/product-badges-screenshot-display.jpg" /></a></p>
<div class="woocommerce-message">
<div><strong>Jack, an ecommerce store owner said:</strong></div>
<div style="margin-top: 0.5em"><i>“I was previously wasting lots of time editing product images and adding badges, now I can easily create badges and assign them to specific products.”</i></div>
</div>
</div>
<hr style="clear: both" />
<h2>Features</h2>
<ul class="wccom-tick-list-secondary" style="line-height: 1.8em;margin-bottom: 18px">
<li><strong>Includes pre-made badges for holidays & events (such as Black Friday, Mother’s Day, Father’s Day, Halloween, and more!) </strong></li>
<li><strong>Upload your own custom product badge</strong></li>
<li><strong>Create custom countdown badges (e.g. “Ends in 3 days”)</strong></li>
<li>Add text badges with flexible styling options</li>
<li>Add multiple badges to the same product</li>
<li>Create custom badges with your own HTML/CSS</li>
<li>Easy-to-use dashboard to manage all your badges with ability to search badges and sort badges</li>
<li>Built-in compatibility mode for theme/plugin conflicts</li>
<li>SVG format for crisp badge rendering</li>
<li>Display badges site-wide, or assign them conditionally:</li>
<li>Assign badges to out of stock products</li>
<li>Assign badges to on backorder products</li>
<li>Assign badges to featured products</li>
<li>Assign badges to products in specific categories</li>
<li>Assign badges to products with specific tags</li>
<li>Assign badges to products with specific shipping classes</li>
<li>Assign badges to specific products</li>
</ul>
<p><strong>Ready to get started?</strong></p>
<p><a class="wccom-button is-primary" style="font-weight: 400;text-decoration: none;width: 130px" href="https://woocommerce.com/?add-to-cart=6662686" target="_blank" rel="noopener"><span class="wccom-button__text">Buy now</span></a></p>
<hr style="clear: both" />
<h2>Highlights</h2>
<p style="font-style: italic">Get these great features for your store…</p>
<div class="twocol-one" style="margin-bottom: 0">
<p><strong>Displayed across your WooCommerce store</strong><br />
Product badges appear directly on product images, wherever they’re shown.</p>
<p><a href="https://woocommerce.com/wp-content/uploads/2020/10/product-badges-screenshot-display.jpg" target="_blank" rel="noopener"><img style="border: 1px solid #dedee0;border-radius: 5px" src="https://woocommerce.com/wp-content/uploads/2020/10/product-badges-screenshot-display.jpg" /></a></p>
</div>
<div class="twocol-one last" style="margin-bottom: 0">
<h3><strong>Pre-made and seasonal badge sets</strong></h3>
<p>Choose from holiday, promo, and general-purpose badges ready to go.</p>
<p><a href="https://woocommerce.com/wp-content/uploads/2020/10/product-badges-screenshot-premade.jpg" target="_blank" rel="noopener"><img style="border: 1px solid #dedee0;border-radius: 5px" src="https://woocommerce.com/wp-content/uploads/2020/10/product-badges-screenshot-premade.jpg" /></a></p>
</div>
<div class="twocol-one" style="margin-bottom: 0">
<h3>Custom image product badges</h3>
<p>Upload your own icons or graphics for a fully branded look.</p>
<p><a href="https://woocommerce.com/wp-content/uploads/2020/10/product-badges-screenshot-image.jpg" target="_blank" rel="noopener"><img style="border: 1px solid #dedee0;border-radius: 5px" src="https://woocommerce.com/wp-content/uploads/2020/10/product-badges-screenshot-image.jpg" /></a></p>
</div>
<div class="twocol-one last" style="margin-bottom: 0">
<h3>Countdown badges</h3>
<p>Add urgency with badges that count down to a specific time or date.</p>
<p><a href="https://woocommerce.com/wp-content/uploads/2020/10/product-badges-screenshot-countdown.jpg" target="_blank" rel="noopener"><img style="border: 1px solid #dedee0;border-radius: 5px" src="https://woocommerce.com/wp-content/uploads/2020/10/product-badges-screenshot-countdown.jpg" /></a></p>
</div>
<div class="twocol-one" style="margin-bottom: 0">
<h3><strong>Text and code-based badges</strong></h3>
<p>Create fully custom badges using text styles or raw code.</p>
<p><a href="https://woocommerce.com/wp-content/uploads/2020/10/product-badges-screenshot-text.jpg" target="_blank" rel="noopener"><img style="border: 1px solid #dedee0;border-radius: 5px" src="https://woocommerce.com/wp-content/uploads/2020/10/product-badges-screenshot-text.jpg" /></a></p>
</div>
<div class="twocol-one last" style="margin-bottom: 0">
<h3>Code badges</h3>
<p>Code your own badge and style it with CSS.</p>
<p><a href="https://woocommerce.com/wp-content/uploads/2020/10/product-badges-screenshot-code.jpg" target="_blank" rel="noopener"><img style="border: 1px solid #dedee0;border-radius: 5px" src="https://woocommerce.com/wp-content/uploads/2020/10/product-badges-screenshot-code.jpg" /></a></p>
</div>
<div class="twocol-one" style="margin-bottom: 0">
<h3><strong>Easy badge manager</strong></h3>
<p>Create, organize, and assign badges from one friendly dashboard.</p>
<p><a href="https://woocommerce.com/wp-content/uploads/2020/10/badge-management-dashboard.jpg" target="_blank" rel="noopener"><img style="border: 1px solid #dedee0;border-radius: 5px" src="https://woocommerce.com/wp-content/uploads/2020/10/badge-management-dashboard.jpg" /></a></p>
</div>
<div class="twocol-one last" style="margin-bottom: 0">
<h3><strong>Multiple badge support</strong></h3>
<p>Display more than one badge per product when needed for unlimited flexibility</p>
<p><a href="https://woocommerce.com/wp-content/uploads/2020/10/product-badges-screenshot-multiple.jpg" target="_blank" rel="noopener"><img style="border: 1px solid #dedee0;border-radius: 5px" src="https://woocommerce.com/wp-content/uploads/2020/10/product-badges-screenshot-multiple.jpg" /></a></p>
</div>
<hr style="clear: both" />
<h2>Screenshots</h2>
<p class="jetpack-slideshow-noscript robots-nocontent">This slideshow requires JavaScript.</p><div id="gallery-0-1-slideshow" class="jetpack-slideshow-window jetpack-slideshow jetpack-slideshow-black" data-trans="fade" data-autostart="1" data-gallery="[{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2020\/10\/product-badges-screenshot-display.jpg","id":"18734000556421","title":"product-badges-screenshot-display","alt":"","caption":"","itemprop":"image"},{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2020\/10\/product-badges-screenshot-premade.jpg","id":"18734000556431","title":"product-badges-screenshot-premade","alt":"","caption":"","itemprop":"image"},{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2020\/10\/product-badges-screenshot-image.jpg","id":"18734000556605","title":"product-badges-screenshot-image","alt":"","caption":"","itemprop":"image"},{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2020\/10\/product-badges-screenshot-countdown.jpg","id":"18734000556500","title":"product-badges-screenshot-countdown","alt":"","caption":"","itemprop":"image"},{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2020\/10\/product-badges-screenshot-text.jpg","id":"18734000556606","title":"product-badges-screenshot-text","alt":"","caption":"","itemprop":"image"},{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2020\/10\/product-badges-screenshot-code.jpg","id":"18734000556504","title":"product-badges-screenshot-code","alt":"","caption":"","itemprop":"image"},{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2020\/10\/badge-management-dashboard.jpg","id":"18734003137990","title":"badge-management-dashboard","alt":"","caption":"","itemprop":"image"},{"src":"https:\/\/woocommerce.com\/wp-content\/uploads\/2020\/10\/product-badges-screenshot-multiple.jpg","id":"18734000556509","title":"product-badges-screenshot-multiple","alt":"","caption":"","itemprop":"image"}]"></div>
<hr style="clear: both" />
<div class="woocommerce-message">
<h2>Example usage</h2>
<p>Sophia manages a WooCommerce store selling electrical appliances, depending on the manufacturer the warranty could be 1 to 25 years. To help customers easily see this she creates a badge for each warranty period and assigns these badges to matching products. She has also created badges for each brand so her customers can see the brand logo on product images in addition to the warranty badge.</p>
</div>
<hr style="clear: both" />
<h2>More information</h2>
<ul>
<li><a href="https://woocommerce.com/document/product-badges/">Read our documentation</a> for an overview of the settings, options, frequently asked questions and more.</li>
<li><a href="http://kestrelwp.com/support" target="_blank" rel="noopener">Contact us if you have any questions</a> and we’ll be happy to help.</li>
</ul>
<hr style="clear: both" />
<h2>Ready to get started?</h2>
<p>Add Product Badges to your store and start nudging buyers toward the right products.</p>
<p><a class="wccom-button is-primary" style="font-weight: 400;text-decoration: none;width: 130px" href="https://woocommerce.com/?add-to-cart=6662686"><span class="wccom-button__text">Buy now</span></a></p>

Product Badges

<p>Highlight urgency, perks, or availability right on your product images.</p>

Quick View & Buy vs Product Badges