Help Center
How to Display WooCommerce Product Images in the Gallery Slider Block

How to Display WooCommerce Product Images in the Gallery Slider Block

This tutorial informs you about showcasing the horizontal or vertical product images gallery in the Gallery Slider block via the Gutenberg block editor.

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 Gallery Slider, recreate the steps described in this tutorial.

Firstly, open the page or post to which you want to add the Gallery Slider block. Then click on the “Toggle block inserter” button and add the mentioned block to the page. Also, you can type the “/” symbol right in the empty editor area and start typing the Gallery Slider block’s name to add it to the page.

We added two columns layout with the Columns block and then put the Gallery Slider block inside it.

The General settings block is opened by default. Here, you can choose one of three sources: “Post Types,” “Manual Select,” and “WooCommerce Products.” Now, we select the last option as we want to display WoCommerce products.

Check the JetProductGallery Overview to find out more about the features available with the plugin.

If you select “WooCommerce Products” as the SOURCE, you should also enter the PRODUCT ID, which can be found in the WordPress Dashboard > Products tab.

Things to know

If you build a Single page and leave the PRODUCT ID field blank, the Gallery Slider block will pull the current product’s ID.

Hover over the needed product to see its ID.

product id

Return to the page. After you specify the PRODUCT ID, you can turn off a featured image and enable zoom and gallery options by activating the corresponding toggles, if needed.

Things to know

The Enable Gallery toggle activates the lightbox feature. So once the user clicks on the image, the lightbox will be opened.

gallery slider general settings tab

In the following Images tab, you can change the IMAGE SIZE and THUMBNAILS SIZE according to your preferences.

Things to know

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 Gallery Slider block is placed.

gallery slider images settings tab

The next is the Slider tab, where you can change the DIRECTION of the Gallery Slider, enable infinite loop, set equal slides, and change their sensitivity and transition effect.

Also, in this tab, the Show Navigation toggle is activated by default. If you leave this toggle enabled, you can select icons for the “Previous and “Next arrows by clicking on the corresponding buttons.

slider settings tab

Once one of the buttons is clicked, the Media Library pop-up is opened. Here, you can either select the already added icon or upload a new one in the Upload files tab.

Once the preferred icon is clicked, press the “Select” button to attach the icon.

This way, we selected both the “Previous and “Next arrows.

media library with icons

One more toggle activated by default in the Slider settings tab is Show Pagination

If this toggle is left activated, you can change the controller (CHOOSE CONTROLLER field) from “Pagination” to “Thumbnails” if desired and set its appearance with the SLIDES PER VIEW and SPACE BETWEEN fields available for different devices in the corresponding Desktop, Tablet, and Mobile tabs.

thumbnails controller

In the second column of the page, we also add the JetForm block from the JetFormBuilder plugin to our page. However, you should add the content depending on your case.

You can style the blocks as well with the free JetStyleManager plugin. Check the Block Style Overview to learn more about the available style settings.

When the customization is done, click on the “Save” button.

form added to gutenberg

Check the Results

Open the built page on the front end. As you can observe, the result is achieved, and the Gallery Slider is displayed on this page.

page on the front end

Also, check How to Create a Horizontal Product Images Slider in Elementor.

That’s all. Now you know how to create a product image slider in Gutenberg (Block editor) on your WordPress website with the help of the JetProductGallery plugin.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.