{"id":8122,"date":"2026-05-10T15:59:59","date_gmt":"2026-05-10T15:59:59","guid":{"rendered":"https:\/\/creativewebui.com\/flexi-post-grid\/?page_id=8122"},"modified":"2026-05-26T13:22:13","modified_gmt":"2026-05-26T13:22:13","slug":"quick-view-popup-tutorial","status":"publish","type":"page","link":"https:\/\/creativewebui.com\/flexi-post-grid\/quick-view-popup-tutorial\/","title":{"rendered":"Quick View Popup Tutorial"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8122\" class=\"elementor elementor-8122\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8859ee5 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"8859ee5\" data-element_type=\"container\" data-e-type=\"container\" id=\"eventpopup\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-1bf866c e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"1bf866c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7f6c45e elementor-widget elementor-widget-video\" data-id=\"7f6c45e\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/05\/Video-Project-3.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8ea7f24 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"8ea7f24\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1acd12c elementor-widget elementor-widget-html\" data-id=\"1acd12c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"fpg-video-content\">\n  <h2>Set Up Event Grid Post Types<\/h2>\n\n  <p>\n    Before using the Event Grid layout in Flexi Post Grid, first enable Event Fields\n    for your selected post type from the plugin dashboard settings.\n  <\/p>\n\n  <h3>Steps<\/h3>\n\n  <ul>\n    <li>Go to <strong>WordPress Dashboard \u2192 Flexi Post Grid<\/strong><\/li>\n    <li>Open the <strong>Event Grid Settings<\/strong> section<\/li>\n    <li>Select your post type from <strong>Event Fields Post Types<\/strong><\/li>\n    <li>Click <strong>Save Changes<\/strong><\/li>\n    <li>Now use the <strong>Event Grid Layout<\/strong> inside Elementor<\/li>\n  <\/ul>\n\n  <div class=\"fpg-tip-box\">\n    <strong>Tip:<\/strong> Select at least one post type here before using Event Grid features in Elementor.\n  <\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5f0adc9 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"5f0adc9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-6411ece e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"6411ece\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cc2dde3 elementor-widget elementor-widget-html\" data-id=\"cc2dde3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"fpg-video-content\">\n  <h2>Add Event Details to Your Posts<\/h2>\n\n  <p>\n    After enabling Event Fields for your post type, you can now add\n    event-specific information directly inside the post editor.\n  <\/p>\n\n  <p>\n    These details will automatically appear inside the Event Grid,\n    countdown timer, and popup layouts.\n  <\/p>\n\n  <h3>Steps<\/h3>\n\n  <ul>\n    <li>Open or create your Event post<\/li>\n    <li>Scroll to the <strong>Flexi Post Grid : Popup Button<\/strong> section<\/li>\n    <li>Add the <strong>Popup Button Text<\/strong><\/li>\n    <li>Select the <strong>Event Expire Date<\/strong><\/li>\n    <li>Add the <strong>Event Start Time<\/strong><\/li>\n    <li>Update or Publish the post<\/li>\n  <\/ul>\n\n  <p>\n    Once saved, your Event Grid will automatically use these event details\n    inside the popup and event layouts.\n  <\/p>\n\n  <div class=\"fpg-tip-box\">\n    <strong>Tip:<\/strong> Expired events can be hidden automatically using the\n    \u201cHide Expired Events\u201d option from Event Grid Settings.\n  <\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3b39e03 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"3b39e03\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2ac2aa5 elementor-widget elementor-widget-video\" data-id=\"2ac2aa5\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/05\/Video-Project-4.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-582509e e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"582509e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-40f2528 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"40f2528\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fb827de elementor-widget elementor-widget-video\" data-id=\"fb827de\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/05\/Video-Project-6.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7294ca7 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"7294ca7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-28fa799 elementor-widget elementor-widget-html\" data-id=\"28fa799\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"fpg-video-content\">\n\n  <h2>Enable Event Popup in Elementor<\/h2>\n\n  <p>\n    Once your event details are added, you can enable the Event Popup\n    directly from the Flexi Post Grid widget settings inside Elementor.\n  <\/p>\n\n  <p>\n    This popup automatically displays event information such as dates,\n    countdown timer, location, description, and custom popup content.\n  <\/p>\n\n  <h3>Steps<\/h3>\n\n  <ul>\n    <li>Open your page with <strong>Elementor<\/strong><\/li>\n    <li>Select the <strong>Flexi Post Grid<\/strong> widget<\/li>\n    <li>Open the <strong>Details Popup<\/strong> section<\/li>\n    <li>Enable the <strong>Details Popup<\/strong> option<\/li>\n    <li>Select the <strong>Popup Trigger<\/strong> style<\/li>\n    <li>Enable the event popup display options you want<\/li>\n    <li>Update the page<\/li>\n  <\/ul>\n\n  <p>\n    Visitors can now click the popup button to view complete event details\n    inside a modern AJAX-powered popup window.\n  <\/p>\n\n  <div class=\"fpg-tip-box\">\n    <strong>Tip:<\/strong> You can fully customize popup content, countdown\n    timer, event meta, buttons, and styling directly from Elementor controls.\n  <\/div>\n\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-03ab734 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"03ab734\" data-element_type=\"container\" data-e-type=\"container\" id=\"postpopup\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-dd239b9 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"dd239b9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ddcf9a0 elementor-widget elementor-widget-html\" data-id=\"ddcf9a0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"fpg-video-content\">\n\n  <h2>Create Popups for Any Post Type<\/h2>\n\n  <p>\n    Flexi Post Grid also includes a universal AJAX-powered popup system\n    that works with any post type including Blog Posts, News, Team Members,\n    Properties, Services, Portfolios, and custom post types.\n  <\/p>\n\n  <p>\n    This popup helps visitors quickly view additional content without\n    leaving the current page, creating a faster and more interactive\n    browsing experience.\n  <\/p>\n\n  <h3>Steps<\/h3>\n\n  <ul>\n    <li>Open your page in <strong>Elementor<\/strong><\/li>\n    <li>Select the <strong>Flexi Post Grid<\/strong> widget<\/li>\n    <li>Go to the <strong>Details Popup<\/strong> section<\/li>\n    <li>Enable the <strong>Details Popup<\/strong> option<\/li>\n    <li>Choose the popup content source<\/li>\n    <li>Enable title, image, meta, custom fields, and button options<\/li>\n    <li>Customize popup colors, spacing, and styling controls<\/li>\n    <li>Update the page<\/li>\n  <\/ul>\n\n  <p>\n    Visitors can now open a clean responsive popup to view complete post\n    information directly inside the grid layout.\n  <\/p>\n\n  <div class=\"fpg-tip-box\">\n    <strong>Tip:<\/strong> The popup works with all post types and supports\n    dynamic custom fields, featured images, meta data, buttons, and AJAX loading.\n  <\/div>\n\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9005dc5 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"9005dc5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-89011fd elementor-widget elementor-widget-video\" data-id=\"89011fd\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/05\/Video-Project-7.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7802552 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"7802552\" data-element_type=\"container\" data-e-type=\"container\" id=\"productpopup\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-419aada e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"419aada\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-70f52aa elementor-widget elementor-widget-video\" data-id=\"70f52aa\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;autoplay&quot;:&quot;yes&quot;,&quot;mute&quot;:&quot;yes&quot;,&quot;loop&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/05\/Video-Project-5.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0fe351b e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-child\" data-id=\"0fe351b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-502ba7c elementor-widget elementor-widget-html\" data-id=\"502ba7c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"fpg-video-content\">\n\n  <h2>Create WooCommerce Quick View Product Popups<\/h2>\n\n  <p>\n    Flexi Post Grid includes a powerful WooCommerce Quick View Popup\n    system that allows customers to preview products instantly without\n    leaving the current page.\n  <\/p>\n\n  <p>\n    The popup works like a modern product page and supports product\n    gallery images, variation swatches, quantity controls, pricing,\n    ratings, wishlist, and direct Buy Now functionality.\n  <\/p>\n\n  <h3>Steps<\/h3>\n\n  <ul>\n    <li>Open your page in <strong>Elementor<\/strong><\/li>\n    <li>Select the <strong>Flexi Post Grid<\/strong> widget<\/li>\n    <li>Choose <strong>WooCommerce Products<\/strong> as the post type<\/li>\n    <li>Go to the <strong>Details Popup<\/strong> section<\/li>\n    <li>Enable the <strong>Details Popup<\/strong> option<\/li>\n    <li>Select the <strong>Popup Trigger<\/strong> style<\/li>\n    <li>Enable product popup features like gallery, price, rating, wishlist, and variations<\/li>\n    <li>Customize popup layout and styling controls<\/li>\n    <li>Update the page<\/li>\n  <\/ul>\n\n  <p>\n    Customers can now open a responsive WooCommerce product popup\n    directly from the grid and purchase products faster without\n    navigating to a separate product page.\n  <\/p>\n\n  <div class=\"fpg-tip-box\">\n    <strong>Tip:<\/strong> The WooCommerce popup supports product image galleries,\n    variation swatches, quantity selector, wishlist system, ratings,\n    SKU, categories, and direct Buy Now buttons.\n  <\/div>\n\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2ab842f e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"2ab842f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/05\/Video-Project-3.mp4 Set Up Event Grid Post Types Before using the Event Grid layout in Flexi Post Grid, first enable Event Fields for your selected post type from the plugin dashboard settings. Steps Go to WordPress Dashboard \u2192 Flexi Post Grid Open the Event Grid Settings section Select your post type from Event Fields Post Types Click Save Changes Now use the Event Grid Layout inside Elementor Tip: Select at least one post type here before using Event Grid features in Elementor. Add Event Details to Your Posts After enabling Event Fields for your post type, you can now add event-specific information directly inside the post editor. These details will automatically appear inside the Event Grid, countdown timer, and popup layouts. Steps Open or create your Event post Scroll to the Flexi Post Grid : Popup Button section Add the Popup Button Text Select the Event Expire Date Add the Event Start Time Update or Publish the post Once saved, your Event Grid will automatically use these event details inside the popup and event layouts. Tip: Expired events can be hidden automatically using the \u201cHide Expired Events\u201d option from Event Grid Settings. https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/05\/Video-Project-4.mp4https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/05\/Video-Project-6.mp4 Enable Event Popup in Elementor Once your event details are added, you can enable the Event Popup directly from the Flexi Post Grid widget settings inside Elementor. This popup automatically displays event information such as dates, countdown timer, location, description, and custom popup content. Steps Open your page with Elementor Select the Flexi Post Grid widget Open the Details Popup section Enable the Details Popup option Select the Popup Trigger style Enable the event popup display options you want Update the page Visitors can now click the popup button to view complete event details inside a modern AJAX-powered popup window. Tip: You can fully customize popup content, countdown timer, event meta, buttons, and styling directly from Elementor controls. Create Popups for Any Post Type Flexi Post Grid also includes a universal AJAX-powered popup system that works with any post type including Blog Posts, News, Team Members, Properties, Services, Portfolios, and custom post types. This popup helps visitors quickly view additional content without leaving the current page, creating a faster and more interactive browsing experience. Steps Open your page in Elementor Select the Flexi Post Grid widget Go to the Details Popup section Enable the Details Popup option Choose the popup content source Enable title, image, meta, custom fields, and button options Customize popup colors, spacing, and styling controls Update the page Visitors can now open a clean responsive popup to view complete post information directly inside the grid layout. Tip: The popup works with all post types and supports dynamic custom fields, featured images, meta data, buttons, and AJAX loading. https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/05\/Video-Project-7.mp4https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/05\/Video-Project-5.mp4 Create WooCommerce Quick View Product Popups Flexi Post Grid includes a powerful WooCommerce Quick View Popup system that allows customers to preview products instantly without leaving the current page. The popup works like a modern product page and supports product gallery images, variation swatches, quantity controls, pricing, ratings, wishlist, and direct Buy Now functionality. Steps Open your page in Elementor Select the Flexi Post Grid widget Choose WooCommerce Products as the post type Go to the Details Popup section Enable the Details Popup option Select the Popup Trigger style Enable product popup features like gallery, price, rating, wishlist, and variations Customize popup layout and styling controls Update the page Customers can now open a responsive WooCommerce product popup directly from the grid and purchase products faster without navigating to a separate product page. Tip: The WooCommerce popup supports product image galleries, variation swatches, quantity selector, wishlist system, ratings, SKU, categories, and direct Buy Now buttons.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-8122","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Quick View Popup Tutorial - Flexi Post Grid<\/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:\/\/creativewebui.com\/flexi-post-grid\/quick-view-popup-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Quick View Popup Tutorial - Flexi Post Grid\" \/>\n<meta property=\"og:description\" content=\"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/05\/Video-Project-3.mp4 Set Up Event Grid Post Types Before using the Event Grid layout in Flexi Post Grid, first enable Event Fields for your selected post type from the plugin dashboard settings. Steps Go to WordPress Dashboard \u2192 Flexi Post Grid Open the Event Grid Settings section Select your post type from Event Fields Post Types Click Save Changes Now use the Event Grid Layout inside Elementor Tip: Select at least one post type here before using Event Grid features in Elementor. Add Event Details to Your Posts After enabling Event Fields for your post type, you can now add event-specific information directly inside the post editor. These details will automatically appear inside the Event Grid, countdown timer, and popup layouts. Steps Open or create your Event post Scroll to the Flexi Post Grid : Popup Button section Add the Popup Button Text Select the Event Expire Date Add the Event Start Time Update or Publish the post Once saved, your Event Grid will automatically use these event details inside the popup and event layouts. Tip: Expired events can be hidden automatically using the \u201cHide Expired Events\u201d option from Event Grid Settings. https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/05\/Video-Project-4.mp4https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/05\/Video-Project-6.mp4 Enable Event Popup in Elementor Once your event details are added, you can enable the Event Popup directly from the Flexi Post Grid widget settings inside Elementor. This popup automatically displays event information such as dates, countdown timer, location, description, and custom popup content. Steps Open your page with Elementor Select the Flexi Post Grid widget Open the Details Popup section Enable the Details Popup option Select the Popup Trigger style Enable the event popup display options you want Update the page Visitors can now click the popup button to view complete event details inside a modern AJAX-powered popup window. Tip: You can fully customize popup content, countdown timer, event meta, buttons, and styling directly from Elementor controls. Create Popups for Any Post Type Flexi Post Grid also includes a universal AJAX-powered popup system that works with any post type including Blog Posts, News, Team Members, Properties, Services, Portfolios, and custom post types. This popup helps visitors quickly view additional content without leaving the current page, creating a faster and more interactive browsing experience. Steps Open your page in Elementor Select the Flexi Post Grid widget Go to the Details Popup section Enable the Details Popup option Choose the popup content source Enable title, image, meta, custom fields, and button options Customize popup colors, spacing, and styling controls Update the page Visitors can now open a clean responsive popup to view complete post information directly inside the grid layout. Tip: The popup works with all post types and supports dynamic custom fields, featured images, meta data, buttons, and AJAX loading. https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/05\/Video-Project-7.mp4https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/05\/Video-Project-5.mp4 Create WooCommerce Quick View Product Popups Flexi Post Grid includes a powerful WooCommerce Quick View Popup system that allows customers to preview products instantly without leaving the current page. The popup works like a modern product page and supports product gallery images, variation swatches, quantity controls, pricing, ratings, wishlist, and direct Buy Now functionality. Steps Open your page in Elementor Select the Flexi Post Grid widget Choose WooCommerce Products as the post type Go to the Details Popup section Enable the Details Popup option Select the Popup Trigger style Enable product popup features like gallery, price, rating, wishlist, and variations Customize popup layout and styling controls Update the page Customers can now open a responsive WooCommerce product popup directly from the grid and purchase products faster without navigating to a separate product page. Tip: The WooCommerce popup supports product image galleries, variation swatches, quantity selector, wishlist system, ratings, SKU, categories, and direct Buy Now buttons.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativewebui.com\/flexi-post-grid\/quick-view-popup-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Flexi Post Grid\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-26T13:22:13+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativewebui.com\\\/flexi-post-grid\\\/quick-view-popup-tutorial\\\/\",\"url\":\"https:\\\/\\\/creativewebui.com\\\/flexi-post-grid\\\/quick-view-popup-tutorial\\\/\",\"name\":\"Quick View Popup Tutorial - Flexi Post Grid\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/flexipostgrid.creativewebui.com\\\/#website\"},\"datePublished\":\"2026-05-10T15:59:59+00:00\",\"dateModified\":\"2026-05-26T13:22:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativewebui.com\\\/flexi-post-grid\\\/quick-view-popup-tutorial\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativewebui.com\\\/flexi-post-grid\\\/quick-view-popup-tutorial\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativewebui.com\\\/flexi-post-grid\\\/quick-view-popup-tutorial\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creativewebui.com\\\/flexi-post-grid\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Quick View Popup Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/flexipostgrid.creativewebui.com\\\/#website\",\"url\":\"https:\\\/\\\/flexipostgrid.creativewebui.com\\\/\",\"name\":\"Flexi Post Grid\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/flexipostgrid.creativewebui.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Quick View Popup Tutorial - Flexi Post Grid","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:\/\/creativewebui.com\/flexi-post-grid\/quick-view-popup-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"Quick View Popup Tutorial - Flexi Post Grid","og_description":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/05\/Video-Project-3.mp4 Set Up Event Grid Post Types Before using the Event Grid layout in Flexi Post Grid, first enable Event Fields for your selected post type from the plugin dashboard settings. Steps Go to WordPress Dashboard \u2192 Flexi Post Grid Open the Event Grid Settings section Select your post type from Event Fields Post Types Click Save Changes Now use the Event Grid Layout inside Elementor Tip: Select at least one post type here before using Event Grid features in Elementor. Add Event Details to Your Posts After enabling Event Fields for your post type, you can now add event-specific information directly inside the post editor. These details will automatically appear inside the Event Grid, countdown timer, and popup layouts. Steps Open or create your Event post Scroll to the Flexi Post Grid : Popup Button section Add the Popup Button Text Select the Event Expire Date Add the Event Start Time Update or Publish the post Once saved, your Event Grid will automatically use these event details inside the popup and event layouts. Tip: Expired events can be hidden automatically using the \u201cHide Expired Events\u201d option from Event Grid Settings. https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/05\/Video-Project-4.mp4https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/05\/Video-Project-6.mp4 Enable Event Popup in Elementor Once your event details are added, you can enable the Event Popup directly from the Flexi Post Grid widget settings inside Elementor. This popup automatically displays event information such as dates, countdown timer, location, description, and custom popup content. Steps Open your page with Elementor Select the Flexi Post Grid widget Open the Details Popup section Enable the Details Popup option Select the Popup Trigger style Enable the event popup display options you want Update the page Visitors can now click the popup button to view complete event details inside a modern AJAX-powered popup window. Tip: You can fully customize popup content, countdown timer, event meta, buttons, and styling directly from Elementor controls. Create Popups for Any Post Type Flexi Post Grid also includes a universal AJAX-powered popup system that works with any post type including Blog Posts, News, Team Members, Properties, Services, Portfolios, and custom post types. This popup helps visitors quickly view additional content without leaving the current page, creating a faster and more interactive browsing experience. Steps Open your page in Elementor Select the Flexi Post Grid widget Go to the Details Popup section Enable the Details Popup option Choose the popup content source Enable title, image, meta, custom fields, and button options Customize popup colors, spacing, and styling controls Update the page Visitors can now open a clean responsive popup to view complete post information directly inside the grid layout. Tip: The popup works with all post types and supports dynamic custom fields, featured images, meta data, buttons, and AJAX loading. https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/05\/Video-Project-7.mp4https:\/\/creativewebui.com\/flexi-post-grid\/wp-content\/uploads\/2026\/05\/Video-Project-5.mp4 Create WooCommerce Quick View Product Popups Flexi Post Grid includes a powerful WooCommerce Quick View Popup system that allows customers to preview products instantly without leaving the current page. The popup works like a modern product page and supports product gallery images, variation swatches, quantity controls, pricing, ratings, wishlist, and direct Buy Now functionality. Steps Open your page in Elementor Select the Flexi Post Grid widget Choose WooCommerce Products as the post type Go to the Details Popup section Enable the Details Popup option Select the Popup Trigger style Enable product popup features like gallery, price, rating, wishlist, and variations Customize popup layout and styling controls Update the page Customers can now open a responsive WooCommerce product popup directly from the grid and purchase products faster without navigating to a separate product page. Tip: The WooCommerce popup supports product image galleries, variation swatches, quantity selector, wishlist system, ratings, SKU, categories, and direct Buy Now buttons.","og_url":"https:\/\/creativewebui.com\/flexi-post-grid\/quick-view-popup-tutorial\/","og_site_name":"Flexi Post Grid","article_modified_time":"2026-05-26T13:22:13+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativewebui.com\/flexi-post-grid\/quick-view-popup-tutorial\/","url":"https:\/\/creativewebui.com\/flexi-post-grid\/quick-view-popup-tutorial\/","name":"Quick View Popup Tutorial - Flexi Post Grid","isPartOf":{"@id":"https:\/\/flexipostgrid.creativewebui.com\/#website"},"datePublished":"2026-05-10T15:59:59+00:00","dateModified":"2026-05-26T13:22:13+00:00","breadcrumb":{"@id":"https:\/\/creativewebui.com\/flexi-post-grid\/quick-view-popup-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativewebui.com\/flexi-post-grid\/quick-view-popup-tutorial\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/creativewebui.com\/flexi-post-grid\/quick-view-popup-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativewebui.com\/flexi-post-grid\/"},{"@type":"ListItem","position":2,"name":"Quick View Popup Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/flexipostgrid.creativewebui.com\/#website","url":"https:\/\/flexipostgrid.creativewebui.com\/","name":"Flexi Post Grid","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/flexipostgrid.creativewebui.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/pages\/8122","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/comments?post=8122"}],"version-history":[{"count":58,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/pages\/8122\/revisions"}],"predecessor-version":[{"id":8333,"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/pages\/8122\/revisions\/8333"}],"wp:attachment":[{"href":"https:\/\/creativewebui.com\/flexi-post-grid\/wp-json\/wp\/v2\/media?parent=8122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}