How to Add Quick View Option for WooCommerce Products?

Quick View & Buy for WooCommerce allows your customers to quickly view products in customized popup and directly add to cart them on the shop page

1. Download the .zip file for Quick View & Buy for WooCommerce.
2. Go to: WordPress Admin > Plugins > Add New to upload the file you downloaded with Choose File
3. Now, Install and Activate the extension.

More information at: Install and Activate Plugins/Extensions

Go to WooCommerce > Settings > Quick Product View. Here, you will find all the configuration settings for Quick View.

To configure the general settings, go to WooCommerce > Settings > Quick Product View, then click on General.

Here, you can adjust the following options:

1. Enable/Disable: Toggle this setting to activate or deactivate the plugin.
2. Quick View Button Placement: Choose where the quick view button appears:
   • After the “Add to Cart” button
   • Before the “Add to Cart” button
   • After the product title
   • Before the product title
   • On product hover
3. Close Quick View: Enable this option to automatically close the quick view popup when a product is added to the cart.
4. Redirect to Checkout: Automatically redirect customers to the checkout page after adding a product to the cart from the quick view popup.
5. Add Custom CSS: Insert custom CSS for styling adjustments.
6. Add Custom JS: Add custom JavaScript for additional functionality.

Navigate to WooCommerce > Settings , then click on Quick View Content.

Here, you can choose to show or hide the following product details in quick view:

1. Product Title: Show or hide the product title.
2. Quantity Box & Add to Cart Button: Allow customers to adjust the quantity and add the product to the cart.
3. Product Prices: Show or hide the product price.
4. Product Rating: Display or hide the product rating.
5. Product SKU: Show or hide the product SKU.
6. Product Featured Image: Display or hide the main product image.
7. Gallery Images: Show or hide additional product images from the gallery.
8. Product Categories: Display or hide product categories.
9. Product Tags: Show or hide product tags.
10. Product Description: Enable or disable the product description.
11. Related Products: Show or hide related products.

To personalize the appearance of the Quick-view Button, navigate to:
WooCommerce > Settings > Customization & Colors.

Here you will find the following settings:

1. Display Quick View Button As: Choose between Text, Icon, or Both (Text & Icon).
2. Button Text: Set the text for the Quick View button.
3. Button Icon: Select an icon for the Quick View button.
4. Button Text Color: Choose the color for the button text.
5. Button Background Color: Set the background color of the button.
6. Button Hover Color: Define the color displayed when hovering over the button.
7. Button Radius: Adjust the border radius for a rounded or square button.
8. Button Font Style: Select a font style for the Quick View button text.

To personalize the appearance of the Quick Product View popup, navigate to:
WooCommerce > Settings > Customization & Colors, scroll down and you will find the following settings.

1. Quick View Animation: Choose an animation effect for the popup (Popup, Slide, Zoom, or Fade).
2. Preview Window Size: Select the size of the Quick View popup.
3. Space Between Image & Product Information: Adjust the spacing between the product image and its details.
4. Product Featured Image Size: Set the size of the featured image displayed in the Quick View popup.
5. Quick View Background Color: Choose the background color of the Quick View popup.
6. Quick View Border Color: Set the border color for the Quick View popup.

Please Note: If you change the popup size, you’ll also need to change the product image size to make it look right.