{"id":25614,"date":"2021-12-30T12:39:55","date_gmt":"2021-12-30T12:39:55","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=25614"},"modified":"2024-09-13T14:20:12","modified_gmt":"2024-09-13T14:20:12","slug":"how-to-display-woocommerce-product-images-in-the-gallery-slider-block","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-display-woocommerce-product-images-in-the-gallery-slider-block\/","title":{"rendered":"How to Display WooCommerce Product Images in the Gallery Slider Block"},"content":{"rendered":"\n<p>In this tutorial, we are going to create a page in Gutenberg (Block Editor) that will display a WooCommerce slider product gallery. To display the WooCommerce products in a <strong>Gallery Slider<\/strong>, recreate the steps described in this tutorial.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-a-gallery-slider-block\"><strong>Add a Gallery Slider Block<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>Firstly, open the page or post to which you want to add the <strong>Gallery Slider <\/strong>block. Then click on the \u201c<strong>Toggle block inserter\u201d <\/strong>button and add the mentioned block to the page. Also, you can type the \u201c\/\u201d symbol right in the empty editor area and start typing the <strong>Gallery Slider <\/strong>block\u2019s name to add it to the page.<\/p>\n\n\n\n<p>We added two columns layout with the <strong>Columns <\/strong>block and then put the <strong>Gallery Slider <\/strong>block inside it.<\/p>\n\n\n\n<p>The <strong>General <\/strong>settings block is opened by default. Here, you can choose one of three sources: \u201cPost Types,\u201d \u201cManual Select,\u201d and \u201cWooCommerce Products.\u201d Now, we select the last option as we want to display WoCommerce products.<\/p>\n\n\n\n<p>Check the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/jetproductgallery-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>JetProductGallery Overview<\/strong><\/a><strong> <\/strong>to find out more about the features available with the plugin.<\/p>\n\n\n\n<p>If you select \u201cWooCommerce Products\u201d as the <strong>SOURCE<\/strong>,<strong> <\/strong>you should also enter the <strong>PRODUCT ID<\/strong>,<strong> <\/strong>which can be found in the <strong><em>WordPress Dashboard &gt; Products<\/em><\/strong><strong> <\/strong>tab.<\/p>\n\n\n<div class=\"note-banner d-flex border-bold border-jetthemecore rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 21C9 21.5 9.4 22 10 22H14C14.6 22 15 21.5 15 21V20H9V21ZM12 2C8.1 2 5 5.1 5 9C5 11.4 6.2 13.5 8 14.7V17C8 17.5 8.4 18 9 18H15C15.6 18 16 17.5 16 17V14.7C17.8 13.4 19 11.3 19 9C19 5.1 15.9 2 12 2Z\" fill=\"#F2D23C\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Things to know<\/div><p class=\"m-0\">If you build a Single page and leave the <strong>PRODUCT ID<\/strong> field blank, the <strong>Gallery Slider<\/strong> block will pull the current product\u2019s ID.<\/p><\/div><\/div>\n\n\n\n<p>Hover over the needed product to see its ID.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/product-id.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/product-id-1024x640.webp\" alt=\"product id\" class=\"wp-image-45637\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/product-id-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/product-id-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/product-id-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/product-id-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/product-id-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/product-id.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Return to the page. After you specify the <strong>PRODUCT ID<\/strong>, you can turn off a featured image and enable zoom and gallery options by activating the corresponding toggles, if needed.<\/p>\n\n\n<div class=\"note-banner d-flex border-bold border-jetthemecore rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 21C9 21.5 9.4 22 10 22H14C14.6 22 15 21.5 15 21V20H9V21ZM12 2C8.1 2 5 5.1 5 9C5 11.4 6.2 13.5 8 14.7V17C8 17.5 8.4 18 9 18H15C15.6 18 16 17.5 16 17V14.7C17.8 13.4 19 11.3 19 9C19 5.1 15.9 2 12 2Z\" fill=\"#F2D23C\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Things to know<\/div><p class=\"m-0\">The <strong>Enable Gallery<\/strong> toggle activates the lightbox feature. So once the user clicks on the image, the lightbox will be opened.<\/p><\/div><\/div>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-slider-general-settings-tab.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-slider-general-settings-tab-1024x640.webp\" alt=\"gallery slider general settings tab\" class=\"wp-image-45638\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-slider-general-settings-tab-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-slider-general-settings-tab-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-slider-general-settings-tab-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-slider-general-settings-tab-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-slider-general-settings-tab-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-slider-general-settings-tab.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>In the following <strong>Images <\/strong>tab, you can change the <strong>IMAGE SIZE <\/strong>and <strong>THUMBNAILS SIZE<\/strong> according to your preferences.<\/p>\n\n\n<div class=\"note-banner d-flex border-bold border-jetthemecore rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 21C9 21.5 9.4 22 10 22H14C14.6 22 15 21.5 15 21V20H9V21ZM12 2C8.1 2 5 5.1 5 9C5 11.4 6.2 13.5 8 14.7V17C8 17.5 8.4 18 9 18H15C15.6 18 16 17.5 16 17V14.7C17.8 13.4 19 11.3 19 9C19 5.1 15.9 2 12 2Z\" fill=\"#F2D23C\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Things to know<\/div><p class=\"m-0\">These fields adjust not the actual size of the block but its image rendering quality. The size of the block will be determined by the settings of the container or section in which the <strong>Gallery Slider<\/strong> block is placed.<\/p><\/div><\/div>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-slider-images-settings-tab.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-slider-images-settings-tab-1024x640.webp\" alt=\"gallery slider images settings tab\" class=\"wp-image-45639\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-slider-images-settings-tab-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-slider-images-settings-tab-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-slider-images-settings-tab-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-slider-images-settings-tab-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-slider-images-settings-tab-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-slider-images-settings-tab.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>The next is the <strong>Slider<\/strong> tab, where you can change the <strong>DIRECTION <\/strong>of the <strong>Gallery Slider<\/strong>, enable infinite loop, set equal slides, and change their sensitivity and transition effect.<\/p>\n\n\n\n<p>Also, in this tab, the <strong>Show Navigation <\/strong>toggle is activated by default<strong>. <\/strong>If you leave this toggle enabled, you can select icons for the \u201c<strong>Previous<\/strong>\u201d<strong> <\/strong>and \u201c<strong>Next<\/strong>\u201d<strong> <\/strong>arrows by clicking on the corresponding buttons.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/slider-settings-tab.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/slider-settings-tab-1024x640.webp\" alt=\"slider settings tab\" class=\"wp-image-45640\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/slider-settings-tab-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/slider-settings-tab-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/slider-settings-tab-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/slider-settings-tab-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/slider-settings-tab-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/slider-settings-tab.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Once one of the buttons is clicked, the <strong>Media Library <\/strong>pop-up is opened. Here, you can either select the already added icon or upload a new one in the <strong>Upload files <\/strong>tab.<\/p>\n\n\n\n<p>Once the preferred icon is clicked, press the \u201c<strong>Select<\/strong>\u201d button to attach the icon.<\/p>\n\n\n\n<p>This way, we selected both the \u201c<strong>Previous<\/strong>\u201d<strong> <\/strong>and \u201c<strong>Next<\/strong>\u201d<strong> <\/strong>arrows.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/media-library-with-icons.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/media-library-with-icons-1024x640.webp\" alt=\"media library with icons\" class=\"wp-image-45641\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/media-library-with-icons-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/media-library-with-icons-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/media-library-with-icons-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/media-library-with-icons-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/media-library-with-icons-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/media-library-with-icons.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>One more toggle activated by default in the <strong>Slider <\/strong>settings tab is <strong>Show Pagination<\/strong>.&nbsp;<\/p>\n\n\n\n<p>If this toggle is left activated, you can change the controller (<strong>CHOOSE CONTROLLER <\/strong>field) from \u201cPagination\u201d to \u201cThumbnails\u201d if desired and set its appearance with the <strong>SLIDES PER VIEW <\/strong>and <strong>SPACE BETWEEN <\/strong>fields available for different devices in the corresponding <strong>Desktop<\/strong>, <strong>Tablet<\/strong>, and <strong>Mobile <\/strong>tabs.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/thumbnails-controller.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/thumbnails-controller-1024x640.webp\" alt=\"thumbnails controller\" class=\"wp-image-45642\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/thumbnails-controller-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/thumbnails-controller-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/thumbnails-controller-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/thumbnails-controller-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/thumbnails-controller-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/thumbnails-controller.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>In the second column of the page, we also add the <a href=\"https:\/\/jetformbuilder.com\/features\/jetform-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>JetForm<\/strong><\/a><strong> <\/strong>block from the <a href=\"https:\/\/jetformbuilder.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>JetFormBuilder<\/em><\/a><em> <\/em>plugin to our page. However, you should add the content depending on your case.<\/p>\n\n\n\n<p>You can style the blocks as well with the free <a href=\"https:\/\/crocoblock.com\/plugins\/jetstylemanager\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>JetStyleManager<\/em><\/a><em> <\/em>plugin. Check the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetstylemanager\/jetstylemanager-block-style-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Block Style Overview<\/strong><\/a><strong> <\/strong>to learn more about the available style settings.<\/p>\n\n\n\n<p>When the customization is done, click on the \u201c<strong>Save<\/strong>\u201d button.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/form-added-to-gutenberg.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/form-added-to-gutenberg-1024x640.webp\" alt=\"form added to gutenberg\" class=\"wp-image-45643\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/form-added-to-gutenberg-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/form-added-to-gutenberg-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/form-added-to-gutenberg-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/form-added-to-gutenberg-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/form-added-to-gutenberg-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/form-added-to-gutenberg.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"check-the-results\">Check the Results<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>Open the built page on the front end. As you can observe, the result is achieved, and the <strong>Gallery Slider <\/strong>is displayed on this page.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/page-on-the-front-end.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/page-on-the-front-end-1024x640.webp\" alt=\"page on the front end\" class=\"wp-image-45644\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/page-on-the-front-end-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/page-on-the-front-end-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/page-on-the-front-end-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/page-on-the-front-end-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/page-on-the-front-end-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/page-on-the-front-end.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Also, check <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-create-a-horizontal-product-images-slider\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>How to Create a Horizontal Product Images Slider<\/strong><\/a><strong> <\/strong>in Elementor.<\/p>\n<\/div><\/div>\n\n\n\n<p>That\u2019s all. Now you know how to create a product image slider in Gutenberg (Block editor) on your WordPress website with the help of the <em>JetProductGallery<\/em> plugin.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial is about showcasing the product images gallery in the Gallery Slider block via the Gutenberg block editor.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[477],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Display WooCommerce Product Images in the Gallery Slider Block | Crocoblock<\/title>\n<meta name=\"description\" content=\"Explore how to customize the Gallery Slider block with the Gutenberg block editor to show product images horizontally or vertically in a convenient slider on a WordPress site.\" \/>\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-display-woocommerce-product-images-in-the-gallery-slider-block\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Display WooCommerce Product Images in the Gallery Slider Block | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Explore how to customize the Gallery Slider block with the Gutenberg block editor to show product images horizontally or vertically in a convenient slider on a WordPress site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-display-woocommerce-product-images-in-the-gallery-slider-block\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-13T14:20:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/product-id-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=\"5 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-display-woocommerce-product-images-in-the-gallery-slider-block\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-display-woocommerce-product-images-in-the-gallery-slider-block\/\",\"name\":\"How to Display WooCommerce Product Images in the Gallery Slider Block | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2021-12-30T12:39:55+00:00\",\"dateModified\":\"2024-09-13T14:20:12+00:00\",\"description\":\"Explore how to customize the Gallery Slider block with the Gutenberg block editor to show product images horizontally or vertically in a convenient slider on a WordPress site.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-display-woocommerce-product-images-in-the-gallery-slider-block\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-display-woocommerce-product-images-in-the-gallery-slider-block\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-display-woocommerce-product-images-in-the-gallery-slider-block\/#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 Display WooCommerce Product Images in the Gallery Slider Block\"}]},{\"@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 Display WooCommerce Product Images in the Gallery Slider Block | Crocoblock","description":"Explore how to customize the Gallery Slider block with the Gutenberg block editor to show product images horizontally or vertically in a convenient slider on a WordPress site.","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-display-woocommerce-product-images-in-the-gallery-slider-block\/","og_locale":"en_US","og_type":"article","og_title":"How to Display WooCommerce Product Images in the Gallery Slider Block | Crocoblock","og_description":"Explore how to customize the Gallery Slider block with the Gutenberg block editor to show product images horizontally or vertically in a convenient slider on a WordPress site.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-display-woocommerce-product-images-in-the-gallery-slider-block\/","og_site_name":"Help Center","article_modified_time":"2024-09-13T14:20:12+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/product-id-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-display-woocommerce-product-images-in-the-gallery-slider-block\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-display-woocommerce-product-images-in-the-gallery-slider-block\/","name":"How to Display WooCommerce Product Images in the Gallery Slider Block | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2021-12-30T12:39:55+00:00","dateModified":"2024-09-13T14:20:12+00:00","description":"Explore how to customize the Gallery Slider block with the Gutenberg block editor to show product images horizontally or vertically in a convenient slider on a WordPress site.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-display-woocommerce-product-images-in-the-gallery-slider-block\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-display-woocommerce-product-images-in-the-gallery-slider-block\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetproductgallery\/how-to-display-woocommerce-product-images-in-the-gallery-slider-block\/#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 Display WooCommerce Product Images in the Gallery Slider Block"}]},{"@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\/25614"}],"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\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=25614"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=25614"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=25614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}