Plugin Download
Download WooCommerce Quick View Ultimate plugin from here.
Overview
WooCommerce Quick View Ultimate gives your customers a true supermarket shopping experience. In a supermarket shoppers browse products on the shelves, picking up the ones they are interested up, reading all the relevant information and either adding the item to their cart or putting it back on the shelf and continuing to browser. You can now give your customer exactly the same experience with Quick View Ultimate.
Installation
The plugin is available on a3 Dashboard > WooCommerce Plugin. Find the Quick View Ultimate plugin on the list, install and then activate it.
From your WordPress admin dashboard go to the WooCommerce menu. Click on it and you will see that the Quick View Ultimate menu item has been added to the menu list.
Plugin Settings
From this panel you can set up the plugin general settings.
Plugin Framework Global Settings
Image Legend:
1. Manual Check For New Plugin Version – This plugin supports auto upgrades via your WordPress auto updates. Updates show within 24 hours of release. This feature allows you to call any new version for immediate upgrades instead of having to wait until they show in your WordPress updates.
2. Google Fonts – By Default Google Fonts are pulled from a static JSON file in this plugin. This file is updated but does not have the latest font releases from Google. ON to connect to Google Fonts API and have auto font updates direct from Google.
3. House Keeping – On deletion (not deactivate) the plugin will completely remove all tables and data it created, leaving no trace it was ever here.
Quick View Activation
Enable or Disable the Quick View from you product cards.
Quick View Content Type
Select what kind of content the popup will show. You can choose from two kind of content.
Image Legend:
1. Custom Template Pop-up – Use the Custom Template for pop-up with WC gallery, view Next> <Previous product in the pop-up. (recommended)
2. Site Product Page – Open full site in pop-up. Use this option and on pop=up will show the product page.
Quick View Button
On this panel are the settings for the button that will be display on your product cards.
Image Legend:
Show Quick View as:
1. Button that shows on mouse hover on product image.
2. Show as button or link text under image.
Button/Hyperlink Show under Image
Image Legend:
1. Quick View Type – Choose if to use a button or a hyperlink text. If on the above setting you choose button that show on hover you can’t have the hyperlink text, so this panel will don’t have options for hyperlink text.
2. Horizontal Align – Select the text/button alignment: Left, Center or Right.
3. Margin – Select the space on top and bottom of the button in rapport with other content.
4. Button Text – Text for Button or hyperlink. The default is “Quick View”.
5. Button Font – Add a custom font family and style it.
6. Button Padding – Padding from Button text to Button border.
7. Background Colour – Add a custom colour for the backgound.
8. Button Border – Select a border for the button and style it.
Pop Up Style
Style the pop-up container and the contain.
Image Legend:
1. Pop Up Tool – Choose from PrettyPhoto (recommended) or ColorBox lightbox.
PrettyPhoto Pop Up
Image Legend:
1. Pop-up Maximum Width – Choose the width of your pop-up by pixels.
2. Opening & Closing Speed – Milliseconds when open and close popup.
3. Background Overlay Colour – Select a colour or empty for use default color from WooCommerce.
Custom Template
If you choose to use the Content Type: Custom Template Pop-up you will see this panel, using the Site Product Page type it will have it hide.
From here will style template of the pop-up content. Many of the settings are the same as fonts, buttons, text style etc. So it will be very easy to customize the content style, to match with your website design.
Container Style
Image Legend:
1. Gallery Container Wide – Set the gallery wide inside the pop-up container.
2. Gallery Position – You can choose the gallery alignment to Right or Left.
3. Pop-up Container Background Colour – Add a colour to the gallery container.
Controls Settings
Image Legend:
1. Next / Previous Control – Turn On or Off the Control arrows.
2. Control Transition – Alway show when popup loaded or Show when hover on popup container.
3. Arrows Style – Customize the style of the arrows that show for next and previews product. The style includes: Icon size and colour, transparency or border margin.
Product Title
Now let’s custom the title of our pop-up content.
Image Legend:
1. Title Transformation – It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.
2. Title Alignment – Configure the alignment for title position.
3. Title Style – Add a custom font and style the color for normal and hover action. Add a background color for the title container and shadow then adjust the space and margin.
Product Description and Rating
On those two tabs will find the setting to style the description and the rating reviews that will show on pop-up product container. You can have fully control on how those will be display.
Image Legend:
1. Product Rating – Turn On and the rating will be visible on front end.
2. Rating Alignment – Choose how to align the rating stars: Left, Center or Right.
3. Rating Margin – Space between the stars rating container and rest of elements.
4. Product Description – Turn On or Off the description feature on Quick View pop-up.
5. Pull Product Description From – Choose to show the short description or a limited number of characters from description.
6. Product Description Style – Customize the font, alignment and margin.
Product Meta
The product meta is referring to categories, tags and sku’s that will show on the Quick View pop-up container. Can have them close or display. Style them to match with your product page style.
Image Legend:
1. Product Meta – Display or hide the meta posts container ( categories, tags, sku’s etc)
2. Product Meta Alignment – Choose the alignment of the meta text.
3. Product Meta Style – Style the fonts and margin for the name and value meta text.
Product Price
The price is very important to show out from content, so make sure to customize it from here.
Image Legend:
1. Product Price – You can hide the price from the pop-up.
2. Price Font – Add a custom style font for the New price and a one for the Old price.
3. Price Alignment – Align the price text from Left, Center or Right.
4. Price Margin – Space between the price container and rest of elements.
Quantity Selector
Make it easy for the customer to select the quantity of the products directly from the Quick View pop-up.
Image Legend:
1. Quantity Selector – Turn On or Off this feature.
2. Quantity Selector Container – Style the container of the quantity selector.
3. Quantity Input – Customize the font and padding for the input text.
4. Quantity Plus / Minus –Customize the + and – icons.
Add to Cart and Read More Buttons
On those two panels will gonna find the settings and style options for the buttons display on pop-up.They come with many options to make sure they will meet your requirements.
Image Legend:
1. Add To Cart – Turn On or Off the Add to Cart button.
2. Add To Cart Button / Hyperlink – Style the button or the hyperlink text from here. Find options for font style, alignment, add a custom icon for successful add to cart action, style the button with color, border or shadow.
3. Read More Button – Turn On or Off the Read More button.
4. Read More Button / Hyperlink – Style the button or the hyperlink text from here. Find options for font style, alignment, style the button with color, border or shadow.
