Create a Responsive Image Carousel in WordPress

Selecting WooCommerce Product from the Image Click Behavior dropdown will allow you to link the gallery images to WooCommerce products in your WordPress website. Linking is done on the individual Image blocks from a search field that is added to their Settings panel.

Note: This option is only available when the WooCommerce plugin is installed and active. Images that are not linked will not have an empty hyperlink added.

The Default Product Link Behavior dropdown lets you decide if you want the link to add a product to your shopping cart or if you want the link to go to the selected product’s page.

The Link Target drop down allows to decide if you want the link to be placed on an icon or on the thumbnail image.

The Display Add to Cart Icon dropdown allows you to select if the Link icon is always displayed, displayed on hover, or never displayed.

Note: With WooCommerce Product selected an additional control is added into the gallery block’s Styles panel. This control allows you to set the color of the Add to Cart icon as well as its background color.

Finally, the Enable Lightbox control allows you to toggle and activate the Lightbox, when activated will display additional Lightbox controls for Lightbox Appearance and Lightbox Content.

Note: This is only available when the Link Target dropdown is set to Link Target Icon.

When the Image Click Behavior setting on the gallery block is set to WooCommerce Product, you can then select any individual Image Block within the gallery and link it directly to a product in your WooCommerce store.

To do this, open the Image Block’s Settings panel and expand the Image Click Settings panel. There you’ll find a searchable field that lets you quickly find and select any product from your WooCommerce catalog.

For faster access, a Shopping Cart button is also available in the Image Block toolbar. Clicking this button opens the same product selection interface.

Note: All overlays have additional style controls that you can customize by going to the gallery block’s Styles panel and the Gallery Hover Styles section.

Note: Show Product Info option is only available when gallery or image is linked to WooCommerce.

Background

The Background setting allows you to customize the backdrop behind your Carousel Gallery block. You can choose any color from your theme palette or define a custom color to help your images stand out or blend seamlessly with the surrounding layout.

A subtle background tone can make white borders or drop shadows more visible, while a dark background often enhances contrast and gives a cinematic look.

Dimensions – Padding & Margin

The Padding and Margin controls give you fine-grained control over the spacing inside and around your Carousel Gallery block.

Use Padding to create breathing room between your gallery content and its edges — useful for highlighting the gallery within a colored background.

Use Margin to control the outer spacing between the gallery and adjacent blocks or page sections, ensuring perfect alignment and balance within your overall page design.

Control Background Color & Control Icon Color

These settings allow you to change the Background Color and Icon Color on the Carousel control buttons.

Border Color, Width, & Radius

These settings allow you to add custom borders to the images in your gallery. Select the color of your border and then adjust the border width slider to your liking.

The images in the editor update in real time so you can see how they look without having to visit the front end of the site.

The Border Radius slider allows you to add a radius to the corners of the images to further create special effects.

Drop Shadow

The Drop Shadow dropdown allows you to select from a variety of Drop Shadow effects and apply them to the thumbnail images in your gallery. You can select from the following types of Drop Shadow:

• None
• Subtle
• Soft
• Elevated
• Dramatic

Individual Image Blocks within any gallery block can override the gallery’s default Gallery Click Settings and Gallery Hover Settings.

Simply select an image inside the gallery and enable either Override Gallery Click Settings or Override Gallery Hover Settings in the Image Block’s Settings panel. Once enabled, the same controls available at the gallery level become available for that specific image, allowing you to customize its behavior independently of the rest of the gallery.

This feature unlocks a new level of creative flexibility. For example, you can create a gallery where most images open in the Lightbox, while selected images link to pages, posts, external URLs, or WooCommerce products. You can also mix and match hover effects, giving individual images their own overlay colors, metadata displays, animations, and interactive behaviors.

Password Protect Page

Requires a password before visitors can view the page.

Disable Right-Click on Page

Attempts to disable right-click to discourage casual image downloads.

Note: This makes it harder for casual users to save images, but it’s not foolproof — advanced users can still access media via the browser’s developer tools or view source.

Enable Lazy-Load of Images

When active, images load as the user scrolls, improving initial page load speed.

Disable Drag To Save

Prevents visitors from being able to drag images out of the browser to save them.