{"id":45698,"date":"2024-09-18T16:03:13","date_gmt":"2024-09-18T16:03:13","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=45698"},"modified":"2024-09-18T16:03:15","modified_gmt":"2024-09-18T16:03:15","slug":"how-to-create-product-gallery-lightbox-in-woocommerce","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-create-product-gallery-lightbox-in-woocommerce\/","title":{"rendered":"How to Create a Product Gallery Lightbox in WooCommerce"},"content":{"rendered":"\n

With JetProductGallery<\/em>, you can create a gallery for WooCommerce <\/em>products in the preferred form with four widgets\/blocks \u2014 Gallery Grid<\/strong>, Gallery Anchor Navigation<\/strong>, Gallery Modern<\/strong>, or Gallery Slider<\/strong>.<\/p>\n\n\n\n

All these widgets\/blocks support the lightbox feature, so every used image can be adjusted so it will be zoomed when clicked. In this view mode, the image will be centered, and the background will be dimmed.<\/p>\n\n\n\n

So, let\u2019s find out how to activate the lightbox feature for any JetProductGallery <\/em>widget\/block.<\/p>\n\n\n\n

Open a Page\/Template<\/h2>\n\n\n\n
\n

First, open the page\/template where you want to place the widget\/block or where it is already located.<\/p>\n\n\n\n

For instance, we want to create a Single Product <\/strong>template<\/a>. We are going to place one of the JetProductGallery <\/em>widgets\/blocks there and enable the lightbox for the displayed product pictures.<\/p>\n\n\n\n

Let\u2019s check how to enable the lightbox for all the available widgets\/blocks.<\/p>\n\n\n\n

So, we open the Single Product <\/strong>template in the Elementor editor as an example. However, the JetProductGallery <\/em>widgets\/blocks can also be used in the Block Editor (Gutenberg).<\/p>\n\n\n\n

Gallery Anchor Navigation<\/h3>\n\n\n\n

To make the Gallery Anchor Navigation <\/strong>widget\/block a product gallery with a lightbox feature, select the \u201cWooCommerce Products\u201d Source <\/strong>and activate the Enable Gallery <\/strong>toggle.<\/p>\n\n\n\n

This way, the lightbox feature will be activated.<\/p>\n\n\n\n

\"gallery<\/a><\/div>\n\n\n\n

If the Enable Gallery <\/strong>toggle is enabled, an additional Gallery <\/strong>section becomes available.<\/p>\n\n\n\n

Here, you can set the Trigger Type<\/strong>: either \u201cButton\u201d or \u201cImage.\u201d If the default \u201cButton\u201d is selected, you can choose the icon and position of the button and define whether it will be shown on hover or be present by default.<\/p>\n\n\n\n

For all the trigger types, you can also pick the controls that will later be displayed in the lightbox: caption, full-screen view, \u201cZoom<\/strong>\u201d and \u201cShare<\/strong>\u201d buttons, counter, and arrows. These are activated by default; however, you can deactivate them if desired.<\/p>\n\n\n\n

\"gallery<\/a><\/div>\n\n\n\n

Also, if the Enable Gallery <\/strong>toggle is activated, two additional sections become available in the Style <\/strong>tab: Photoswipe Trigger<\/strong> and Photoswipe Gallery<\/strong>.<\/p>\n\n\n\n

\"photoswipe<\/a><\/div>\n\n\n\n

Gallery Grid<\/h3>\n\n\n\n

If you want to work with the Gallery Grid <\/strong>widget, the Enable Gallery <\/strong>toggle is also available here. Activate it to enable the lightbox feature.<\/p>\n\n\n\n

\"gallery<\/a><\/div>\n\n\n\n

Gallery Modern<\/h3>\n\n\n\n

The Gallery Modern <\/strong>widget settings also include the Enable Gallery <\/strong>toggle that activates the lightbox feature when the gallery pictures are opened.<\/p>\n\n\n\n

\"gallery<\/a><\/div>\n\n\n\n

Gallery Slider<\/h3>\n\n\n\n

One more widget where the lightbox can be activated is the Gallery Slider<\/strong>. Its settings also include the Enable Gallery <\/strong>toggle.<\/p>\n\n\n\n

\"gallery<\/a><\/div>\n\n\n\n

That\u2019s why you can use any desired JetProductGallery <\/em>widget to implement the lightbox.<\/p>\n\n\n\n

Once you customize the page completely, press the \u201cPublish\/Update<\/strong>\u201d button.<\/p>\n<\/div><\/div>\n\n\n\n

Check the Result<\/h2>\n\n\n\n
\n

Now, you can head to the front end page of any product and check if the lightbox feature is implemented by clicking on any of the pictures presented.<\/p>\n\n\n\n

\"lightbox<\/a><\/div>\n<\/div><\/div>\n\n\n\n

That\u2019s all; now you know how to implement the lightbox feature into the product gallery created for WooCommerce <\/em>with the JetProductGallery <\/em>plugin for WordPress.<\/p>\n","protected":false},"excerpt":{"rendered":"

From this guide, you will learn how to build a product gallery lightbox for WooCommerce products using JetProductGallery widgets\/blocks.<\/p>\n","protected":false},"author":9,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[473],"yoast_head":"\nHow to Create Product Gallery Lightbox in WooCommerce \u2014 JetProductGallery | Crocoblock<\/title>\n<meta name=\"description\" content=\"Discover how to build a product gallery lightbox in WooCommerce with the JetProductGallery plugin for WordPress.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-create-product-gallery-lightbox-in-woocommerce\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Product Gallery Lightbox in WooCommerce \u2014 JetProductGallery | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Discover how to build a product gallery lightbox in WooCommerce with the JetProductGallery plugin for WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-create-product-gallery-lightbox-in-woocommerce\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-18T16:03:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-anchor-navigation-widget-1024x640.webp\" \/>\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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-create-product-gallery-lightbox-in-woocommerce\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-create-product-gallery-lightbox-in-woocommerce\/\",\"name\":\"How to Create Product Gallery Lightbox in WooCommerce \u2014 JetProductGallery | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2024-09-18T16:03:13+00:00\",\"dateModified\":\"2024-09-18T16:03:15+00:00\",\"description\":\"Discover how to build a product gallery lightbox in WooCommerce with the JetProductGallery plugin for WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-create-product-gallery-lightbox-in-woocommerce\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-create-product-gallery-lightbox-in-woocommerce\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-create-product-gallery-lightbox-in-woocommerce\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create a Product Gallery Lightbox in WooCommerce\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create Product Gallery Lightbox in WooCommerce \u2014 JetProductGallery | Crocoblock","description":"Discover how to build a product gallery lightbox in WooCommerce with the JetProductGallery plugin for WordPress.","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:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-create-product-gallery-lightbox-in-woocommerce\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Product Gallery Lightbox in WooCommerce \u2014 JetProductGallery | Crocoblock","og_description":"Discover how to build a product gallery lightbox in WooCommerce with the JetProductGallery plugin for WordPress.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-create-product-gallery-lightbox-in-woocommerce\/","og_site_name":"Help Center","article_modified_time":"2024-09-18T16:03:15+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-anchor-navigation-widget-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-create-product-gallery-lightbox-in-woocommerce\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-create-product-gallery-lightbox-in-woocommerce\/","name":"How to Create Product Gallery Lightbox in WooCommerce \u2014 JetProductGallery | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2024-09-18T16:03:13+00:00","dateModified":"2024-09-18T16:03:15+00:00","description":"Discover how to build a product gallery lightbox in WooCommerce with the JetProductGallery plugin for WordPress.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-create-product-gallery-lightbox-in-woocommerce\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-create-product-gallery-lightbox-in-woocommerce\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-create-product-gallery-lightbox-in-woocommerce\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Create a Product Gallery Lightbox in WooCommerce"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/45698"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/9"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=45698"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=45698"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=45698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}