How To Use The Product Image Widget By Atomic Addons

The Product Image widget by Atomic Addons places a product's image gallery wherever you want it in a product page design. It prints WooCommerce's own gallery: the product image, a row of thumbnails for the gallery images, zoom on hover and a full-screen view. A Sale! badge marks products on sale. This guide covers adding the widget, what the gallery does and its style settings.

Enable the Product Image Widget

Product Image is a Pro widget and needs Atomic Addons Pro and WooCommerce. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Product Image. You can also open the WooCommerce category.

4. 4

   Turn the Product Image widget on.

5. 5

   Click Save Settings.

Add the Product Image Widget

The widget belongs in a Theme Builder template for products, usually in a column beside the Product Title, Product Price and Add To Cart widgets:

1. 1

   Go to WordPress Dashboard → Atomic Addons → Theme Builder.

2. 2

   Click Add New and choose the Single Product card.

3. 3

   Give the template a name and open it in Elementor. Its display condition is already set to WooCommerce → Product, so it applies as soon as you publish it.

4. 4

   In the widget panel, search for Product Image and drag it into the template. The widget sits in the Atomic Addons Pro (Single) category.

5. 5

   Design it with the controls below, then click Publish.

In the editor the template previews a sample product: the one picked under Builder Settings → Builder Post in the template's page settings (click Apply & Preview), or your newest product if none is picked. On your store, each product page shows its own images; anywhere else the widget falls back to your newest product. The widget appears in the panel only while you edit a Theme Builder template, a saved Elementor template or a product.

What the Gallery Shows

The widget has no Content settings. It shows the images you set when you edit the product:

• Main image — the Product image. A product without one shows WooCommerce's placeholder.
• Thumbnails — the product image and the Product gallery images, four to a row under the main image. Clicking one shows it in the main slot. A product without gallery images shows only its main image.
• Zoom — pointing at the main image magnifies it, when the uploaded image is larger than the space it is shown in.
• Full-screen view — the magnifier button in the corner opens the images over the page, with arrows, a counter and a close button.
• Sale! — a badge in the top-left corner of products that are on sale, while Sale Flash is on.

(Open the full-size image in a new tab)

The gallery fills the width of its column, and pointing at the main image zooms in. The magnifier button opens the full-screen view:

(Open the full-size image in a new tab)

The thumbnail slider, the zoom and the full-screen view are WooCommerce features that your theme switches on. Hello Elementor and most store themes do; with a theme that doesn't, the widget shows the images without them.

Style the Product Image

(Open the full-size image in a new tab)

Select the widget: its controls are on the Style tab, which opens first, in the Product Image section:

1. 1

   Sale Flash: Show or hide the Sale! badge. It is on by default.

2. 2

   Background Type: A color or gradient behind the main image and the thumbnails, seen where an image has transparent areas.

3. 3

   Border Type: A border around the main image and each thumbnail. Pick a style to set its width and color.

4. 4

   Border Radius: Rounds the corners of the main image.

5. 5

   Spacing: The gap between the main image and the thumbnails.

6. 6

   Thumbnails: Settings for the thumbnails alone: Border Type, Border Radius and Spacing, the gap between them.

Sale Badge

Shown while Sale Flash is on: the badge's Color, Background, Padding, Margin, Border Radius and Typography.