---
title: EB Woo Product Images
description: EB Woo Product Images block enhances WooCommerce product pages with stunning layouts. Follow this guide to configure and customize your product images.
url: "https://essential-blocks.com/docs/eb-woo-product-images/"
updated: "2026-10-12"
category: WooCommerce
tags:
  - Add product image
  - block
  - block library
  - blocks
  - Essential Blocks PRO
  - gutenberg
  - gutenberg block
  - Gutenberg editor
  - Product Image
  - WooCommerce
  - WooCommerce product image
  - WordPress
---

# EB Woo Product Images

[**EB Woo Product Images**](https://essential-blocks.com/demo/woo-product-image/) block helps you to showcase WooCommerce product images with stunning layouts and advanced customizations.

Follow this step-by-step guide to configure the Essential Blocks Woo Product Images block in Gutenberg.

***Note:****Before you start configuring the Essential Blocks****Woo Product Images****block, ensure that the*[***WooCommerce plugin***](https://wordpress.org/plugins/woocommerce/)*is installed and activated on your WordPress.*

## **How to Activate Essential Blocks Product Images?**

To activate the EB Woo Product Images, navigate to ‘**Essential Blocks**’ → **‘Blocks’**. Then, toggle on to enable the ‘**Product Images’**block. The block will be enabled instantly.

![EB Woo Product Images](https://essential-blocks.com/wp-content/uploads/2024/09/image-39.gif)

## **How to Configure EB Woo Product Images Block on WooCommerce?**

To configure Product Images in a single WooCommerce product page, navigate to  **Appearance → Editor** from the **WordPress dashboard Page**then, click on  **‘Templates’**. Now, select **‘WooCommerce’** and click on **‘Single Product’** from the template list.

![EB Woo Product Images](https://essential-blocks.com/wp-content/uploads/2024/09/image-40.gif)

Once you're in, click the ‘**+**’ icon to add the ‘**Product Images**’ block, then search for it and insert it. Once you are done, this will look like as shown below.

![EB Woo Product Images](https://essential-blocks.com/wp-content/uploads/2024/09/image-41.gif)

Let us move on to the style and configuration part. The block has three tabs to customize your product images section: **General**, **Style**, and **Advanced**.

### **General**

Inside the **‘General’** tab, you will find the ‘**Gallery**’ settings, where you can adjust the product image gallery position to the left, right, up, and bottom, as well as the column gap and space between the lower images in your WooCommerce single product page.

![EB Woo Product Images](https://essential-blocks.com/wp-content/uploads/2024/09/image-42.gif)

### **Style**

The **Style** tab allows you to customize the appearance of your main product image with the image gallery. You can use the adaptive height automatically by togging the option or manually adjusting the height and image scale. Customize border style, border radius, box shadow and gallery arrow settings to create a visually appealing and engaging presentation of your products.

![EB Woo Product Images](https://essential-blocks.com/wp-content/uploads/2024/09/image-43.gif)

### **Advanced**

The **Advanced** tab gives you control over the block's appearance and behavior. You can adjust visibility options, positioning, margins, padding, background settings, border style, box shadows, responsive controls, select animations and add custom CSS to create a fully customized and interactive product image display.

![EB Woo Product Images](https://essential-blocks.com/wp-content/uploads/2024/09/image-44.gif)

## **Final Outcome**

Following these steps, you have successfully integrated the **EB Woo Product Images** block into your WooCommerce product pages. Your product images will now be displayed in a visually appealing and customizable layout, enhancing your product presentations.

![EB Woo Product Images](https://essential-blocks.com/wp-content/uploads/2024/09/image-45.gif)

This is how you can easily set up and design the Woo Product Images block in Gutenberg. 
Got stuck? Feel free to [**contact our support**](https://wpdeveloper.com/support/) for further assistance.