How to Configure the Variation Gallery (Template, Image Size, and Colors)

The Variation Gallery feature in Variation Monster Pro allows you to display dedicated image galleries for each product variation. This helps customers clearly see the images related to the selected variation (such as color or style), improving the shopping experience and helping them make faster purchasing decisions.

With this feature, the store admin can customize gallery image sizes, navigation styles, and color settings to match the website design.

Step 1: Open the Variation Gallery Settings

↑ Back to top

To configure the Variation Gallery settings, follow these steps:

  1. Go to your WordPress Dashboard.
  2. Navigate to WooCommerce → Settings.
  3. Click on the Variation Monster Pro tab.
  4. Select the Variation Gallery section.

Here you will find all the available options to customize the variation gallery.

Step 2: Configure Gallery Image Size

↑ Back to top

Variation Monster allows you to control which image size will be used for the variation gallery. This ensures the gallery matches your theme layout and performance requirements.

You can select from the following image sizes:

  • Large
  • Medium
  • Thumbnail
  • Medium Large
  • WooCommerce Thumbnail
  • WooCommerce Single
  • WooCommerce Gallery Thumbnail

Choose the image size that best fits your product page layout. For example:

  • Large / WooCommerce Single – Best for high-quality product displays.
  • Medium / Medium Large – Balanced between quality and performance.
  • Thumbnail / WooCommerce Gallery Thumbnail – Useful for smaller gallery previews.

Setting the correct image size helps maintain fast page loading and visual consistency across your store.

Step 3: Customize Gallery Navigation Colors

↑ Back to top

Variation Monster also lets you customize the appearance of the gallery navigation buttons to match your store branding.

Available design settings include:

Controls the color of the navigation arrow icons.

Changes the icon color when customers hover over the navigation buttons.

Sets the background color of the gallery navigation buttons.

Defines the background color when users hover over the navigation buttons.

These styling options help ensure that the gallery navigation blends perfectly with your theme colors and UI design.

Step 4: Save the Settings

↑ Back to top

After configuring the image size and color options:

  1. Click the Save Changes button.
  2. Your variation gallery settings will now be applied.

Frontend Result

↑ Back to top

Once the settings are saved:

  • Each product variation will display its own image gallery.
  • The gallery will use the selected image size.
  • Navigation buttons will reflect the custom colors you configured.
  • When customers select a product variation, the gallery updates automatically to show the correct images.

This creates a clean, visually engaging product page that improves usability and increases customer confidence when selecting variations.