{"id":665,"date":"2024-11-06T12:21:44","date_gmt":"2024-11-06T12:21:44","guid":{"rendered":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/?p=665"},"modified":"2024-11-13T12:43:17","modified_gmt":"2024-11-13T12:43:17","slug":"how-to-add-a-quick-view-to-your-products","status":"publish","type":"post","link":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/premium-version-settings\/how-to-add-a-quick-view-to-your-products\/","title":{"rendered":"How to add a quick view to your products\u00a0"},"content":{"rendered":"\n

In this post, we\u2019ll explore how to add a quick view popup to your products. Our goal is to make it easy for customers to view product details with a single click, using a popup window that avoids loading a new page. Let\u2019s get started!<\/p>\n\n\n\n

Step 1 \u2014 Choose the style<\/h4>\n\n\n\n

After activating the plugin, the quick view feature is automatically enabled. Start from the General settings<\/em> by <\/em>selecting the popup style; in this case, we’ll use a Modal window (1). <\/p>\n\n\n\n

\"Quick<\/a><\/figure>\n\n\n\n

Next, we have to choose an entrance and exit animation style for the Modal window. Let\u2019s select a Slide in (2). <\/p>\n\n\n\n

\"Modal<\/figure>\n\n\n\n

To allow users to browse other products only within the same category when the quick view is open, choose the dedicated option in the Quick View navigation<\/em> (3): <\/p>\n\n\n\n

\"Quick<\/a><\/figure>\n\n\n\n

This way, users can check other products from the same category without leaving the quick view popup:<\/p>\n\n\n\n

\"Navigate<\/a><\/figure>\n\n\n\n

Step 2 <\/strong>\u2014<\/strong> Set up the Quick view button<\/strong> <\/h4>\n\n\n\n

In the Button options<\/em> from the General settings, you can set up the button that opens the Quick View popup. First, choose the button type (text or icon). For this example, we\u2019ll use a text button (4). <\/p>\n\n\n\n

\"Quick<\/a><\/figure>\n\n\n\n

Then, type the label of the button (5) and select its position, in which we decide to place it within the product image<\/em> (6). Finally, Save options<\/em>.<\/p>\n\n\n\n

\"Button<\/a><\/figure>\n\n\n\n

This is what customers will see in the frontend: <\/p>\n\n\n

\n
\"Quick<\/figure><\/div>\n\n\n

Step 3 <\/strong>\u2014<\/strong> Customize the content<\/strong> <\/h4>\n\n\n\n

Now, customize the content inside the modal window. In Content options<\/em>, choose the product information to display (7) and decide if the description should be shown (8). <\/p>\n\n\n\n

\"Product<\/a><\/figure>\n\n\n\n

Next, customize the product image options. Start by setting the image<\/em> <\/em>size<\/em> for the Quick View (9), then choose the thumbnail style\u2014here, we\u2019ll use a slider for the image gallery with arrows always visible (10). <\/p>\n\n\n\n

\"Product<\/a><\/figure>\n\n\n\n

When setting the product image size, keep in mind the proportions (particularly the height) of the quick view modal window previously defined in the General options<\/strong>. <\/p>\n\n\n\n

\"Image<\/a><\/figure>\n\n\n\n

Step 4 \u2014 Configure “View details” and “Add to cart” buttons<\/strong><\/p>\n\n\n\n

To let users access the product page from the modal window, enable the “View details” button in Button<\/em> <\/em>options<\/em> and add a label (11). <\/p>\n\n\n\n

\"View<\/a><\/figure>\n\n\n\n

And it will show in the popup like this:<\/p>\n\n\n\n

\"View<\/a><\/figure>\n\n\n\n
<\/div>\n\n\n\n

Enable the “Add to cart” in Ajax to stop the page from refreshing when a product is added to the cart. If selected, you can also set the popup to close automatically after adding an item to the cart (12). <\/p>\n\n\n\n

Additionally, allow users to go directly to checkout after adding a product to the cart from the quick view (13).  <\/p>\n\n\n\n

\"Cart<\/a><\/figure>\n\n\n\n

Step 5 <\/strong>\u2014<\/strong> Allow social media sharing<\/strong> <\/h4>\n\n\n\n

Enable the option to display a product sharing link in the quick view and select the social media platforms (14) and don’t forget to Save options<\/em>: <\/p>\n\n\n\n

\"Social<\/a><\/figure>\n\n\n\n
\"Social<\/a><\/figure>\n\n\n\n

Step 6 <\/strong>\u2014<\/strong> Choose content color<\/strong>s<\/strong><\/strong> <\/h4>\n\n\n\n

Lastly, configure the Quick view style color options for a personalized look: <\/p>\n\n\n\n

\"Customization<\/a><\/figure>\n\n\n\n

And we have our Quick view button and popup options set! <\/p>\n","protected":false},"excerpt":{"rendered":"

In this post, we\u2019ll explore how to add a quick view popup to your products. Our goal is to make it easy for customers to view product details with a single click, using a popup window that avoids loading a new page. Let\u2019s get started! Step 1 \u2014 Choose the style After activating the plugin, … Continue reading How to add a quick view to your products\u00a0<\/span><\/a><\/p>\n","protected":false},"author":46,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,6],"tags":[],"class_list":["post-665","post","type-post","status-publish","format-standard","hentry","category-overview","category-premium-version-settings"],"yoast_head":"\nYITH Quick View: How to add a quick view to your products\u00a0<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/premium-version-settings\/how-to-add-a-quick-view-to-your-products\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"YITH Quick View: How to add a quick view to your products\u00a0\" \/>\n<meta property=\"og:description\" content=\"In this post, we\u2019ll explore how to add a quick view popup to your products. Our goal is to make it easy for customers to view product details with a single click, using a popup window that avoids loading a new page. Let\u2019s get started! Step 1 \u2014 Choose the style After activating the plugin, … Continue reading How to add a quick view to your products\u00a0\" \/>\n<meta property=\"og:url\" content=\"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/premium-version-settings\/how-to-add-a-quick-view-to-your-products\/\" \/>\n<meta property=\"og:site_name\" content=\"YITH WooCommerce Quick View\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-06T12:21:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-13T12:43:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/wp-content\/uploads\/sites\/353\/2024\/11\/1.quick-style.jpg\" \/>\n<meta name=\"author\" content=\"michellehernandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"michellehernandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/premium-version-settings\/how-to-add-a-quick-view-to-your-products\/\",\"url\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/premium-version-settings\/how-to-add-a-quick-view-to-your-products\/\",\"name\":\"YITH Quick View: How to add a quick view to your products\u00a0\",\"isPartOf\":{\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/premium-version-settings\/how-to-add-a-quick-view-to-your-products\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/premium-version-settings\/how-to-add-a-quick-view-to-your-products\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/wp-content\/uploads\/sites\/353\/2024\/11\/1.quick-style.jpg\",\"datePublished\":\"2024-11-06T12:21:44+00:00\",\"dateModified\":\"2024-11-13T12:43:17+00:00\",\"author\":{\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/#\/schema\/person\/abf4311d830c9248924c9e019551dc69\"},\"breadcrumb\":{\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/premium-version-settings\/how-to-add-a-quick-view-to-your-products\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/premium-version-settings\/how-to-add-a-quick-view-to-your-products\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/premium-version-settings\/how-to-add-a-quick-view-to-your-products\/#primaryimage\",\"url\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/wp-content\/uploads\/sites\/353\/2024\/11\/1.quick-style.jpg\",\"contentUrl\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/wp-content\/uploads\/sites\/353\/2024\/11\/1.quick-style.jpg\",\"width\":1867,\"height\":1510,\"caption\":\"Quick view style - modal window\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/premium-version-settings\/how-to-add-a-quick-view-to-your-products\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add a quick view to your products\u00a0\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/#website\",\"url\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/\",\"name\":\"YITH WooCommerce Quick View\",\"description\":\"Plugin documentation\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/#\/schema\/person\/abf4311d830c9248924c9e019551dc69\",\"name\":\"michellehernandez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cea0cf9a9e6d1cf5ecdafbf586eb4fbb?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cea0cf9a9e6d1cf5ecdafbf586eb4fbb?s=96&d=mm&r=g\",\"caption\":\"michellehernandez\"},\"url\":\"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/author\/michellehernandez\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"YITH Quick View: How to add a quick view to your products\u00a0","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/premium-version-settings\/how-to-add-a-quick-view-to-your-products\/","og_locale":"en_US","og_type":"article","og_title":"YITH Quick View: How to add a quick view to your products\u00a0","og_description":"In this post, we\u2019ll explore how to add a quick view popup to your products. Our goal is to make it easy for customers to view product details with a single click, using a popup window that avoids loading a new page. Let\u2019s get started! Step 1 \u2014 Choose the style After activating the plugin, … Continue reading How to add a quick view to your products\u00a0","og_url":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/premium-version-settings\/how-to-add-a-quick-view-to-your-products\/","og_site_name":"YITH WooCommerce Quick View","article_published_time":"2024-11-06T12:21:44+00:00","article_modified_time":"2024-11-13T12:43:17+00:00","og_image":[{"url":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/wp-content\/uploads\/sites\/353\/2024\/11\/1.quick-style.jpg","type":"","width":"","height":""}],"author":"michellehernandez","twitter_card":"summary_large_image","twitter_misc":{"Written by":"michellehernandez","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/premium-version-settings\/how-to-add-a-quick-view-to-your-products\/","url":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/premium-version-settings\/how-to-add-a-quick-view-to-your-products\/","name":"YITH Quick View: How to add a quick view to your products\u00a0","isPartOf":{"@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/#website"},"primaryImageOfPage":{"@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/premium-version-settings\/how-to-add-a-quick-view-to-your-products\/#primaryimage"},"image":{"@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/premium-version-settings\/how-to-add-a-quick-view-to-your-products\/#primaryimage"},"thumbnailUrl":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/wp-content\/uploads\/sites\/353\/2024\/11\/1.quick-style.jpg","datePublished":"2024-11-06T12:21:44+00:00","dateModified":"2024-11-13T12:43:17+00:00","author":{"@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/#\/schema\/person\/abf4311d830c9248924c9e019551dc69"},"breadcrumb":{"@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/premium-version-settings\/how-to-add-a-quick-view-to-your-products\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/premium-version-settings\/how-to-add-a-quick-view-to-your-products\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/premium-version-settings\/how-to-add-a-quick-view-to-your-products\/#primaryimage","url":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/wp-content\/uploads\/sites\/353\/2024\/11\/1.quick-style.jpg","contentUrl":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/wp-content\/uploads\/sites\/353\/2024\/11\/1.quick-style.jpg","width":1867,"height":1510,"caption":"Quick view style - modal window"},{"@type":"BreadcrumbList","@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/premium-version-settings\/how-to-add-a-quick-view-to-your-products\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/"},{"@type":"ListItem","position":2,"name":"How to add a quick view to your products\u00a0"}]},{"@type":"WebSite","@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/#website","url":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/","name":"YITH WooCommerce Quick View","description":"Plugin documentation","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/#\/schema\/person\/abf4311d830c9248924c9e019551dc69","name":"michellehernandez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cea0cf9a9e6d1cf5ecdafbf586eb4fbb?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cea0cf9a9e6d1cf5ecdafbf586eb4fbb?s=96&d=mm&r=g","caption":"michellehernandez"},"url":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/author\/michellehernandez\/"}]}},"_links":{"self":[{"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/wp-json\/wp\/v2\/posts\/665","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/wp-json\/wp\/v2\/users\/46"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/wp-json\/wp\/v2\/comments?post=665"}],"version-history":[{"count":19,"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/wp-json\/wp\/v2\/posts\/665\/revisions"}],"predecessor-version":[{"id":893,"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/wp-json\/wp\/v2\/posts\/665\/revisions\/893"}],"wp:attachment":[{"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/wp-json\/wp\/v2\/media?parent=665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/wp-json\/wp\/v2\/categories?post=665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.yithemes.com\/yith-woocommerce-quick-view\/wp-json\/wp\/v2\/tags?post=665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}