Adding a quick view feature to your WooCommerce store can enhance the user experience by allowing customers to preview product details without leaving the current page. This can help improve your store’s usability and potentially increase conversion rates. In this post, we’ll show you how to implement a WooCommerce quick view feature without using a plugin.
By the end of this guide, you’ll have a fully functional quick view feature on your WooCommerce store that allows customers to view product details in a modal window.
Step 1: Add Quick View Button
Next, we need to add a quick view button to the product loop. Add the following code to your functions.php file.
/*
* Snippet: How to Add WooCommerce Quick View Without a Plugin – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1261
* Tested with WooCommerce 10.7.0
* "Add quick view button to product loop"
*/
function wcsuccess_add_quick_view_button() {
echo '<a href="#" class="button quick-view" data-product_id="' . get_the_ID() . '">Quick View</a>';
}
add_action('woocommerce_after_shop_loop_item', 'wcsuccess_add_quick_view_button', 20);
This code adds a “Quick View” button to each product in the shop loop.
Step 2: Create Quick View Modal
Now, we need to create the HTML structure for the quick view modal. Add the following code to your theme’s footer.php file before the closing </body> tag.
/*
* Snippet: How to Add WooCommerce Quick View Without a Plugin – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1261
* Tested with WooCommerce 10.7.0
* "Quick view modal structure"
*/
?>
<div id="quick-view-modal" style="display:none;">
<div class="quick-view-content">
<span class="close-quick-view">×</span>
<div id="quick-view-product"></div>
</div>
</div>
<?php
This code creates a hidden modal that will be displayed when the quick view button is clicked.
Step 3: Handle Quick View Ajax Request
We need to handle the Ajax request to load product details into the quick view modal. Add the following code to your functions.php file.
/*
* Snippet: How to Add WooCommerce Quick View Without a Plugin – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1261
* Tested with WooCommerce 10.7.0
* "Handle quick view Ajax request"
*/
function wcsuccess_load_quick_view_product() {
$product_id = intval($_POST['product_id']);
$product = wc_get_product($product_id);
if ($product) {
wc_get_template_part('content', 'quick-view', array('product' => $product));
}
wp_die();
}
add_action('wp_ajax_wcsuccess_load_quick_view_product', 'wcsuccess_load_quick_view_product');
add_action('wp_ajax_nopriv_wcsuccess_load_quick_view_product', 'wcsuccess_load_quick_view_product');
This code handles the Ajax request to load the product details into the quick view modal.
Step 4: Create Quick View Template
Create a template file named content-quick-view.php in your theme directory and add the following code:
/*
* Snippet: How to Add WooCommerce Quick View Without a Plugin – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1261
* Tested with WooCommerce 10.7.0
* "Quick view template"
*/
global $product;
?>
<div class="quick-view-product">
<h2><?php echo $product->get_name(); ?></h2>
<div class="quick-view-image"><?php echo $product->get_image(); ?></div>
<div class="quick-view-price"><?php echo $product->get_price_html(); ?></div>
<div class="quick-view-description"><?php echo $product->get_short_description(); ?></div>
<a href="<?php echo $product->add_to_cart_url(); ?>" class="button"><?php echo $product->add_to_cart_text(); ?></a>
</div>
This template displays the product details in the quick view modal.
Step 5: Add JavaScript for Quick View Functionality
In your quick-view.js file, add the following code:
/*
* Snippet: How to Add WooCommerce Quick View Without a Plugin – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1261
* Tested with WooCommerce 10.7.0
* "JavaScript for quick view functionality"
*/
add_action('wp_footer', 'wcsuccess_quickview_js');
function wcsuccess_quickview_js(){
?>
jQuery(document).ready(function($) {
$('.quick-view').on('click', function(e) {
e.preventDefault();
var product_id = $(this).data('product_id');
$.ajax({
url: wcsuccess_ajax.url,
type: 'POST',
data: {
action: 'wcsuccess_load_quick_view_product',
product_id: product_id
},
success: function(response) {
$('#quick-view-product').html(response);
$('#quick-view-modal').fadeIn();
}
});
});
$('.close-quick-view').on('click', function() {
$('#quick-view-modal').fadeOut();
});
});
<?php
}
This JavaScript code handles the click event on the quick view button and sends an Ajax request to load the product details into the modal.
Step 6: Styling the Quick View Modal
In your theme.css file, add the following code:
/*
* Snippet: How to Add WooCommerce Quick View Without a Plugin – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1261
* Tested with WooCommerce 10.7.0
* "CSS for quick view modal"
*/
#quick-view-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.quick-view-content {
background: #fff;
padding: 20px;
max-width: 600px;
width: 100%;
position: relative;
}
.close-quick-view {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font-size: 24px;
}
This CSS styles the quick view modal to look good on your WooCommerce store.
Step 7: Testing and Debugging
After implementing the code, it’s essential to test the quick view functionality. Visit your WooCommerce store and click on the “Quick View” button for different products to ensure that the modal displays the product details correctly.
Conclusion
Adding a quick view feature to your WooCommerce store without using a plugin can significantly enhance the user experience and improve conversion rates. By following the steps outlined in this guide, you can create a custom quick view functionality tailored to your store’s needs.
Implementing this feature allows customers to preview product details quickly and easily, leading to a smoother shopping experience and potentially higher sales. Customize the provided code snippets to fit your specific requirements and enjoy the benefits of a more user-friendly WooCommerce store.
With this setup, you can offer a seamless shopping experience that keeps customers engaged and encourages them to make a purchase. Happy coding!
I have been working with WordPress and WooCommerce since 2012 and have developed a deep knowledge of the content management system. Since 2012, I have developed several plugins and designed dozens of websites utilising different frameworks, CMS’s and programming languages. I am proficient in PHP, Python, Java, C, C++, R and JavaScript with limited experience in Go, Kotlin and Swift.
Educationally, I have a Master’s degree in cyber security a Bachelor’s (Hons, First Class) in Applied Research and a Graduate Certificate in Data Science. I’m currently undertaking PhD studies investigating IoT cybersecurity. I recently graduated with First Class Honours and Masters of Information Technology, receiving the Executive Dean’s Award for studies undertaken in the 2021 and 2022 academic years. I have worked in the information technology industry for the past 11 years primarily as a software/web developer specific to design, optimisation, network management and security. My research interests are in the areas of Internet of Things (IoT), 5G and Beyond Networks, information security for wireless networks and software development.
Stay In Touch
Hi John
I am using this code but not working showing some error
how can resolve please help me
Thanks
Hi Sikandar,
That would be caused by not adding the js file or enqueuing the correct location. I updated the post so instead of needing to add the js file and enqueuing it, the scripts are adding to the footer of the page. This should resolve the problem you are experiencing