When you have correctly installed our WooCommerce Attribute Gallery images plugin, we can start setting it up. Open up the admin panel, that you can find in WooCommerce > Variation Gallery Images. If you can not see that menu make sure the Redux Framework plugin is installed! It is free.

WooCommerce variation images menu

General Plugin Settings

In the general plugin settings of our variation additional images plugin you have can turn it on or off. Most important is, that the container selectors are 100% correct. By default you can use:

  • Image Container Selector
    The main image selector (css class or id). Example: .woocommerce-product-gallery__wrapper (flatsome) OR .woocommerce-product-gallery
  • Gallery Images Container Selector
    The gallery images selector (css class or id). Example: .product-thumbnails (flatsome) or .woocommerce-product-gallery

If none of the above options work. You need to find the surrounding container in your theme yourself.

  1. Visit a product page on your site.
  2. Right click on the product image and inspect element
  3. You will see a div parent object of that you can use the class selector
  4. Repeat that for the gallery ONLY if it is not the same, if it is the same selector put them into the gallery image field also.
how to find the woocommerce gallery images selector

Furthermore you can

  • Override default WooCommerce Gallery
    By default our plugin only changes the gallery when a variation is selected. Enable this to always use our gallery features.
  • Show Variation Gallery images in Variable Product Gallery
    Show all variation gallery images in the default variable product image gallery.
  • Still show Variable Gallery Images
    Beside variation gallery images, still show the variable gallery images.
  • Show Variation Gallery images in Categories
    Add support for gallery images to show in listings. You will need our Single Variations Plugin and your theme must support 2nd image in listings (e.g. Flatsome).
general variation images options

Variation & Thumbnail Image Options

The variation image & thumbnail gallery images can have both total separate options. For example by default the variable main product has 1 column and the gallery thumbnails 4. But you can also change that to 6 columns if you want.

  • Columns
  • Margin Right
  • Cell Align
    Alignment of cells
  • Fullscreen
    Enables fullscreen view of carousel. Adds button to view and exit fullscreen. In fullscreen view, pressing ESC will exit fullscreen.
  • Accessibility
    Enable keyboard navigation, pressing left & right keys
  • Adaptive Height
    Set carousel height to the selected slide
  • Auto Play
    advances to the next cell
  • Contain
    Will contain cells to container so no excess scroll at beginning or end has no effect if wrap Around is enabled
  • Free Scroll
    Enables content to be freely scrolled and flicked without aligning cells
  • Lazy Load
    Enable lazy-loading images
  • Percent Position
    sets positioning in percent values, rather than pixels
  • Prev / Next Buttons
    Creates and enables buttons to click to previous & next cells
  • Page Dots
    Create and enable page dots
  • Resize
    Listens to window resize events to adjust size & positions
  • Right to Left
    Enables right-to-left layout
  • Set Gallery Size
    Sets the height of gallery disable if gallery already has height set with CSS
  • Watch CSS
    Watches the content of :after of the element
  • Wrap Around
    At end of cells, wraps-around to first for infinite scrolling
main image & thumbnbail settings

Styling

You can change some stylings, so that the gallery will better fit to your website. Changing the loading icon color, thumbnail border color or adding a fake loading time.

variation images styling

How to add more images to Variations

With or plugin it is very simple to add more variation detail images. Simply open up a variable product and scroll to variations. When you open a single variation you will see on the bottom, that you can add more images. Use drag and drop to sort them or hover over them to delete. Adding a new image will use your default WP media library.

Leave a Reply

Your email address will not be published. Required fields are marked *