View Product Page

General informations about the plugin

The plugin activation involves the addition of the “Quick View” button for each product on the “Shop” page.

Quick view button on Shop page

By clicking on the button, you will have access to product information that will show in a modal window, avoiding a new page upload.

Quick view modal window

In case you had issues with the image size in the quick view, we suggest you
regenerate all thumbnails of the products in the shop.

For all details related to shown product information, we suggest referring to this page of the documentation.

General options

From the General tab, you will be able to configure the global settings of the plugin behavior and the button options.

General Options

General options
  • Enable Quick View: this is the option you must enable to add the quick view feature to your products;
  • Enable Quick View on mobile: enable this option to add the quick view feature on mobile devices;
  • Enable Quick View on wishlist: (requires YITH Wishlist to be installed) enable this option to add the quick view feature on the wishlist table;
  • Enable lightbox: enable this option to open the complete detail of the product image, inserted in the quick view window, right inside a new lightbox;
Quick view lightbox
General settings
  • Quick view navigation: this enables the navigation in the Quick View mode so that users can browse products without leaving the modal window. You can also enable the navigation of products belonging to the same category;
  • Quick View Navigation Style: choose the navigation style from Slide and Rotate;
Slide
Slide
Rotate
Rotate
  • Quick View Type: choose how to show the quick view from Modal window and Cascading;
Cascading
Cascading

By choosing Modal window, you can configure the following options:

  • Select modal effect: select the effect for the modal window by choosing from Slide in, Fade in or Scale up;
  • Modal window loading: enable this option to activate the overlay when loading the modal window;
  • Modal Loading Text: enter the text to show during the modal window loading;
  • Modal Width: set the width for the modal window;
  • Modal Height: set the height for the modal window.

By choosing Cascading, you can choose the behavior to apply when closing the quick view from:

Cascading option
  • Close quick view and stay in the same row;
  • Close quick view and scroll to the row of selected product.

Button options

In this section, you can set up the quick view button options:

  • Quick View Button Type: choose the button type from button or icon;
  • Quick View Button Label: enter the text to show in the quick view button;
  • Quick View Button Position: choose where to show the button. Available options are: After Add to cart button and Inside product image.

Elements to show

From the tab Product, you can choose the product information to show right inside the “quick view” modal window from the following:

Content options
  • image
  • name
  • rating
  • price
  • excerpt
  • product meta

Furthermore, you can enable the option to show the full description rather than the short description.

Images and thumbnails

In case you had issues with the image size right inside the quick view, we suggest you regenerate all thumbnails of the products of your shop.

For the product images, you can set the width and height through the dedicated options.

Product image options

With regard to thumbnails, the plugin’s default behavior implies that all product thumbnails show in a classic mode, as provided by WooCommerce. However, you can choose to show them with the “Slider” mode or completely hide them.

Thumbnails type
Quick view - thumbnails with classic mode

Image zoom

If you are using YITH WooCommerce Zoom Magnifier, you can enable the zoom function on the product image in the quick view window by activating the option Enable image zoom.

Image zoom
Image zoom in quick view

This function will not be available if the “slider” modality has been selected.

Redirect to product page

If you want to redirect users to the product page from the quick view, you can show the button View details and enter the text for the button.

View details

Add to cart options

“Add to cart” button can be added right inside the modal window to allow users to add the product directly from the section they are visiting.
If you want this process to take place in Ajax, enable “Enable Ajax Add To Cart”.

Add to cart options

If you want the popup to close automatically after the add to cart action, enable the option Close popup after “Add to cart”.

On the contrary, if you want to redirect users to the “Checkout” page after they added the product to the cart, enable the option “Redirect to checkout after add to cart”.

Share

To let users share the Quick View content on social networks, you must enable the option Enable share and select the socials you want to show. The social networks available are Facebook, Twitter, and Pinterest, alternatively, they can send an email.

Share options
Share options

Style

From the tab Style of the plugin panel, you will be able to configure the colors of buttons and texts of the quick view.

General style options 

General style
  • Modal Window Background Color: the overlay color for the background;
  • ‘Quick View’ Button Color: the color of the Quick View button;
  • Quick View’ Button Text Color: the color of the text for the Quick View button;
  • ‘Quick View’ Button Hover Color: the color of the Quick View button on hover;
  • ‘Quick View’ Button Hover Text Color: the color of the text for the Quick View button on hover.

Content style

Content style options
  • Main Text Color: the color of the main text;
  • Star Color: the color of rating stars;
  • ‘Add to Cart’ Button Color: the color of Add to cart button;
  • ‘Add to Cart’ Button Text Color: the color of the text for Add to cart button;
  • ‘Add to Cart’ Button Hover Color: the color of Add to cart button on hover;
  • ‘Add to Cart’ Button Hover Text Color: the color of the text for Add to cart button on hover;
  • ‘View Details’ Button Color: the color of View details button;
  • ‘View Details’ Button Text Color: the color of the text for View details button;
  • ‘View Details’ Button Hover Color: the color of View details button on hover;
  • ‘View Details’ Button Hover Text Color: the color of View details button on hover.

Shortcode

The “yith_quick_view” shortcode allows displaying a button/icon that opens a quick view popup of a specific product on any page and it both works for the free and premium version.
The shortcode accepts the following parameters:

  • product_id: the product ID to show in the modal window
  • type: [icon/button] choose whether to show a button or an icon (available only for the premium version)
  • label: button label

Example of the shortcode use
[yith_quick_view product_id=51562 type=”button” label=”Quick View”]