3. Content
In this section of global plugin options you get a large selection of options related to the Quick View content and its appearance.
There are two tabs in this section: General and Style. First off, lets go through the General tab of the Content section and all the options found there.
General
Layout
First off, you can choose the type of the Quick View element you'd like to use.
There are three types of the Quick View element you can select: Pop-up (essentially a classic modal Quick View), Drop (which gets revealed below the corresponding product on click), and Sidebar.
In the event that you select the Pop-up Quick View type, you will get presented with options for adjusting the modal width, height, and you can also choose one of 8 appear effects which you can apply to the pop-up.
If you selected the Sidebar Quick View type, you can configure the Quick View element width and choose where you wish to position it (left or right).
The option that follows lets you choose a Quick View element type you wish to use on mobile devices.
This is also where you can enable the product navigation inside the Quick View element, which you can optionally limit only to the current product category.
Another option found here lets you choose between using a predefined Close icon for the element, and uploading a custom Close icon of your own choosing.
Quick View Product Features
Here you can enable displaying the relevant product information of your choosing in the Quick View element, including the product category, image, title, rating, price, excerpt, the 'Add to Cart' button, the 'Wishlist' button, product meta info, full description, product tabs, and a percent sign.
There's also an option for enabling an image zoom on hover feature inside the Quick View, and you can enable instantly loading AJAX-powered adding to cart straight from the Quick View form.
On top of that you can alter the product image and product summary width, choose between two product thumbnail image types (gallery or slider), and choose a position for the thumbnail images relative to the featured image.
Moreover, this is where you can enable a fixed 'View Details' button for products, and optionally input a label of your own for the button. By clicking this button, the user gets presented with a single page of that specific product.
You can also enable and configure certain additional features to be shown inside the Quick View element. You can display suggested products, additional details items, as well as the social share feature.
Suggested Products
If you enable displaying Suggested Products, you can choose which products you wish to show: Related Products, Upsells Products, and Cross-sells Products. In addition to this, you can input a title for the suggested products section, and set a heading tag for the title text.
Additional Details
In the event that you decide to include Additional Details items, you can add some text, input positions of line break in said text, and upload an icon for each of the items you wish to feature. You can also disable showing additional details on smaller screens here.
Share
If you enable the Social Share feature, you get presented with a set of options relating to the social share, including choosing between dropdown and list social share layouts, selecting a dropdown hover behavior, inputting a title for the social share section, and setting a heading tag for the title text.
Style
Quick View Content
This is where you can set up the appearance of your Quick View element. Firstly, you can set the background color, overlay background color, padding, border color, width, style and radius, star color, and finally star active color.
Close Icon
Next up, you can make visual adjustments to the Close icon. You can set a close icon color, hover color, as well as fill color, stroke color, fill hover color, and stroke hover color for the close SVG icon.
Add to Cart Button
The set of options that follows lets you configure the Quick View 'Add to Cart' button appearance. You can set a background color, background hover color, text color, text hover color, padding, margins, border color, border width, and border radius for the 'Add to Cart' button.
View Details Button
After that, you can make adjustments to the 'View Details' in the event that you enabled it. You can adjust the 'View Details' button background color, background hover color, text color, text hover color, padding, margins, border color, border width and border radius.
Social Share Style
The following set of options found here let you adjust visual aspects of the Social Share section inside the Quick View. You get options for modifying the section title color, icon color, and hover color.
Social Network Custom Style
The final set of options found here lets you choose between predefined and custom icons for each of the social platforms you enabled, and configure the icon fill color, stroke color, fill hover color, and stroke hover color for each respective social network.
