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 > Gallery Images. If you can not see that menu make sure our weLaunch Framework plugin is installed! It is free.
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.
- Visit a product page on your site.
- Right click on the product image and inspect element
- You will see a div parent object of that you can use the class selector
- 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.
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).
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
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.
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.