Activate<\/strong> button after installation.<\/li>\n<\/ol>\n\n\n\nEnabling quick view<\/h3>\n\n\n\n If the product quick view isn’t visible at the front end, enable Enable Quick View<\/strong> option.<\/p>\n\n\n\nBy default, product quick view is enable for the mobile devices. If you don’t want it enabled on mobile devices, enable\u00a0Disable on Mobile Devices<\/strong> option.<\/p>\n\n\n\n
In the Button Options<\/strong> section, located just below the General<\/strong> tab, you can find the options to customize the product quick view button.<\/p>\n\n\n\nWith the <\/em>Button Position<\/strong> option, you can decide whether the quick view button appears before or after add to cart<\/strong> button on your shop product catalog. You can then set the label for button with the option, <\/em>Button Label.<\/strong><\/p>\n\n\n\nEnable the option, Enable icon in quick view button<\/strong>, to display an icon in the quick view button. You can then select an icon. And position of the icon either before or after the button label.<\/p>\n\n\n\n
Customizing product quick view modal<\/h3>\n\n\n\n Navigate to the Modal Box Options<\/strong> section in the General<\/strong> tab menu to configure the product quick view modal.<\/p>\n\n\n\nSelecting product details to display<\/strong><\/p>\n\n\n\nSelect the product details, image, title, price, rating, excerpt, meta, and add to cart button to be displayed in the quick view modal with Content to Display<\/strong> option.<\/p>\n\n\n\n
Customizing modal layout<\/strong><\/p>\n\n\n\nYou can position the product image either before or after the product details.<\/p>\n\n\n\n
You can also adjust the gap between the product image and product details with Modal content column gap<\/strong> option.<\/p>\n\n\n\n
Customizing product image\/gallery<\/strong><\/p>\n\n\n\nBy default a product image is displayed in the product quick view modal. But if you want to display the product gallery image instead of just a product image, select Product Image or Gallery<\/strong> in the option Product Thumbnail<\/strong>.<\/p>\n\n\n\nIf you want to enable the lightbox feature that allows zoom and navigation for the product image or images, enable Enable Lightbox<\/strong> option.<\/p>\n\n\n\n
Adding modal animations<\/strong><\/p>\n\n\n\nYou can add a dynamic touch to the user experience by choosing quick view modal opening and closing animation effects with options, Modal opening animation<\/strong> and Modal closing animation<\/strong>.<\/p>\n\n\n\n
If you do not want quick view modal opening and closing animation, choose None<\/strong> from options values.<\/p>\n\n\n\nCustomizing methods to close modal<\/strong><\/p>\n\n\n\nClosing quick view modal with click on the close button is not the only way. Clicking outside the quick view modal or pressing the Esc<\/strong> keyboard key can also close the modal. You can enable these features with the options <\/em>Close modal if clicked outside<\/strong> and Close modal if Esc key is pressed,<\/strong> respectively.<\/p>\n\n\n\n
Enable Hide modal close button<\/strong> option to not display close button in the quick view modal.<\/p>\n\n\n\nAdding product page link<\/strong><\/p>\n\n\n\nIf you want your customers visit the product page from the quick view modal, enable Display View Detail Button<\/strong> option. If enabled, a buttton link to the product page is displayed. You can also set the label for the link with View Detail Button Label<\/strong> option.<\/p>\n\n\n\n
Selecting spinner\/loading icon<\/strong><\/p>\n\n\n\nBefore the product details get loaded into the quick view modal, a spinner or loader icon is seen by customers. You can select the icon of your choice with Spinner Icon<\/strong> option.<\/p>\n\n\n\n
Customizing styles<\/h3>\n\n\n\n To customize the colors, typography, styles etc, of the quick view modal box, buttons, icons, and product content, navigate to the Design<\/strong> tab in the plugin’s setting page. Enable the the option, Enable Dynamic Styles<\/strong>. Then, you can start customizing quick view button, quick view modal, product content, modal close button, and buttons displayed inside the modal.<\/p>\n\n\n\n
If you want to write custom CSS for further customization, write it inside the Additional CSS<\/strong>.<\/p>\n\n\n\n
Conclusion<\/h3>\n\n\n\n We hope this post helped you add product quick view feature into your WooCommerce store. If you are looking for the best WooCommerce plugins, read the best WooCommerce plugins for your online store<\/a>.<\/p>\n\n\n\nIf you have any questions or feedback, please don’t hesitate to leave them in the comment section below.<\/p>\n\n\n\n
Thank you for reading till the end \ud83d\ude0a.<\/p>\n","protected":false},"excerpt":{"rendered":"
Are you wondering how to add product quick view in WooCommerce and allow your customers…<\/p>\n","protected":false},"author":10,"featured_media":10826,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[232],"tags":[],"class_list":["post-10671","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/themebeez.com\/blog\/wp-json\/wp\/v2\/posts\/10671","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themebeez.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themebeez.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themebeez.com\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/themebeez.com\/blog\/wp-json\/wp\/v2\/comments?post=10671"}],"version-history":[{"count":52,"href":"https:\/\/themebeez.com\/blog\/wp-json\/wp\/v2\/posts\/10671\/revisions"}],"predecessor-version":[{"id":10917,"href":"https:\/\/themebeez.com\/blog\/wp-json\/wp\/v2\/posts\/10671\/revisions\/10917"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themebeez.com\/blog\/wp-json\/wp\/v2\/media\/10826"}],"wp:attachment":[{"href":"https:\/\/themebeez.com\/blog\/wp-json\/wp\/v2\/media?parent=10671"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themebeez.com\/blog\/wp-json\/wp\/v2\/categories?post=10671"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themebeez.com\/blog\/wp-json\/wp\/v2\/tags?post=10671"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}