Setup the Quick View

[vc_row][vc_column][vc_column_text]If you find any bugs or enhancements in this script get in touch with a clear description of the problem so we can fix it. We do not support modifications![/vc_column_text][vc_separator css=”.vc_custom_1503397814327{margin-top: 30px !important;margin-bottom: 30px !important;}”][vc_column_text]

Index

1. General Settings
2. Styling
3. Data To Show
4. Advanced Settings

[/vc_column_text][vc_separator css=”.vc_custom_1503397814327{margin-top: 30px !important;margin-bottom: 30px !important;}”][/vc_column][/vc_row][vc_row content_placement=”bottom” personalization_rules=”%5B%7B%22country%22%3A%22AF%22%2C%22recurring_day%22%3A%220%22%2C%22start_date%22%3A%222017-08-22%22%2C%22start_time%22%3A%2200%3A00%22%2C%22end_date%22%3A%222017-08-22%22%2C%22end_time%22%3A%2223%3A55%22%2C%22device_type%22%3A%22computer%22%2C%22user_name%22%3A%224%22%2C%22user_cap%22%3A%22switch_themes%22%2C%22user_role%22%3A%22administrator%22%2C%22visits_minimum%22%3A%22100%22%2C%22visits_maximum%22%3A%22200%22%7D%5D”][vc_column width=”1/2″][vc_column_text]

Setup

Settings Menu

In order to setup the plugin you should be able to see the Quick View Menu under the WooCommerce menu. If you can not see the Quick View menu make sure the Redux Framework plugin is installed and activated.[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_single_image image=”338″ alignment=”right”][/vc_column][/vc_row][vc_row personalization_rules=”%5B%7B%22country%22%3A%22AF%22%2C%22recurring_day%22%3A%220%22%2C%22start_date%22%3A%222017-08-22%22%2C%22start_time%22%3A%2200%3A00%22%2C%22end_date%22%3A%222017-08-22%22%2C%22end_time%22%3A%2223%3A55%22%2C%22device_type%22%3A%22computer%22%2C%22user_name%22%3A%224%22%2C%22user_cap%22%3A%22switch_themes%22%2C%22user_role%22%3A%22administrator%22%2C%22visits_minimum%22%3A%22100%22%2C%22visits_maximum%22%3A%22200%22%7D%5D” el_id=”general-settings”][vc_column][vc_separator css=”.vc_custom_1503397814327{margin-top: 30px !important;margin-bottom: 30px !important;}”][vc_column_text]

General Settings

In the General settings you should enable the plugin itself first. Then you should specify the position of the quick view Button & the hook priority. Play around with these 2 settings if you do not see the buttons.

Then you can set a text for the quick view button (HTML is allowed here, so you can use a custom icon for example).

If you check the Use Default Template checkbox our plugin does not take the built in modal content view, but the WooCommerce Default one. You can try if it works also, but some themes may have overwritten this. If you want to customize the layout you can copy the quick view file, located in wp-content/woocommerce-quick-view/public/templates/quick-view.php, to your theme (wp-content/themes/your-child-theme/woocommerce/quick-view-php).[/vc_column_text][vc_single_image image=”339″ onclick=”link_image” css=”.vc_custom_1523450469888{margin-top: 20px !important;}”][vc_separator css=”.vc_custom_1503397814327{margin-top: 30px !important;margin-bottom: 30px !important;}”][/vc_column][/vc_row][vc_row personalization_rules=”%5B%7B%22country%22%3A%22AF%22%2C%22recurring_day%22%3A%220%22%2C%22start_date%22%3A%222017-08-22%22%2C%22start_time%22%3A%2200%3A00%22%2C%22end_date%22%3A%222017-08-22%22%2C%22end_time%22%3A%2223%3A55%22%2C%22device_type%22%3A%22computer%22%2C%22user_name%22%3A%224%22%2C%22user_cap%22%3A%22switch_themes%22%2C%22user_role%22%3A%22administrator%22%2C%22visits_minimum%22%3A%22100%22%2C%22visits_maximum%22%3A%22200%22%7D%5D” el_id=”styling”][vc_column][vc_column_text]

Quick View Styling

In the Styling Section of the plugin settings you can first set a default open effect (either as a modal or as inline directly in your product category pages).

The next settings can be used to style the Modal and it’s backdrop as you like. Here you can change colors, padding and the width of the image or content container. Also you can enable “Content Auto Height” – if this is enabled the content height will be the same height as your image. If content should be higher it will show a scroll option.

If the styles do not work, make sure the following file has a CHMOD 0777: /wp-content/woocommerce-quick-view/public/css/woocommerce-quick-view-custom.css[/vc_column_text][vc_single_image image=”340″ onclick=”link_image” css=”.vc_custom_1523450741296{margin-top: 20px !important;}”][vc_separator css=”.vc_custom_1503397814327{margin-top: 30px !important;margin-bottom: 30px !important;}”][/vc_column][/vc_row][vc_row personalization_rules=”%5B%7B%22country%22%3A%22AF%22%2C%22recurring_day%22%3A%220%22%2C%22start_date%22%3A%222017-08-22%22%2C%22start_time%22%3A%2200%3A00%22%2C%22end_date%22%3A%222017-08-22%22%2C%22end_time%22%3A%2223%3A55%22%2C%22device_type%22%3A%22computer%22%2C%22user_name%22%3A%224%22%2C%22user_cap%22%3A%22switch_themes%22%2C%22user_role%22%3A%22administrator%22%2C%22visits_minimum%22%3A%22100%22%2C%22visits_maximum%22%3A%22200%22%7D%5D” el_id=”data”][vc_column][vc_column_text]

Data to Show

The data to show section allows you to enable and disable certain parts of the quick view content. The following elements are possible:

• Image
• Gallery
• Title
• Reviews
• Price
• SKU
• Tags
• Categories
• Short Description
• Add to Cart
• Description
• Attributes
• Read More

[/vc_column_text][vc_single_image image=”341″ onclick=”link_image” css=”.vc_custom_1523450820100{margin-top: 20px !important;}”][vc_separator css=”.vc_custom_1503397814327{margin-top: 30px !important;margin-bottom: 30px !important;}”][/vc_column][/vc_row][vc_row personalization_rules=”%5B%7B%22country%22%3A%22AF%22%2C%22recurring_day%22%3A%220%22%2C%22start_date%22%3A%222017-08-22%22%2C%22start_time%22%3A%2200%3A00%22%2C%22end_date%22%3A%222017-08-22%22%2C%22end_time%22%3A%2223%3A55%22%2C%22device_type%22%3A%22computer%22%2C%22user_name%22%3A%224%22%2C%22user_cap%22%3A%22switch_themes%22%2C%22user_role%22%3A%22administrator%22%2C%22visits_minimum%22%3A%22100%22%2C%22visits_maximum%22%3A%22200%22%7D%5D” el_id=”advanced”][vc_column][vc_column_text]

Advanced Options

In the advanced settings panel you can add some custom CSS or custom JS if you want.[/vc_column_text][vc_single_image image=”342″ onclick=”link_image” css=”.vc_custom_1523450957013{margin-top: 20px !important;}”][vc_separator css=”.vc_custom_1503397814327{margin-top: 30px !important;margin-bottom: 30px !important;}”][/vc_column][/vc_row]