< All Topics
Widget Used
Woo Product Images
Demo URL
Click Here
Tutorial Videos
Official Video

If you want to give a superior look to the cart section of your website with the customization and want to use it in the product-images part of your website. We have made a well-designed Woo Product Images widget. With the help of this widget, you can customize the product images section of your many shopping websites. For example, electronic, real estate, study, etc. This will also help in your single post or page on your website.
Note: you must have the WooCommerce plugin installed in your WordPress to use this widget feature.

Pro tip
Why not add this widget to your website/product? Because using this widget you can customize your website product images section which will attract your customer, and it will be sufficiently useful in your product images as well as with the custom style option.

How to use the Woo Product Images Widget of The Plus Addons For Elementor

The Woo Product Images widget comes with two different types of layout, with custom styling options you can create a pleasant-looking product images section for your websites.

General Steps

Search for the Woo Product Images element from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the Woo Product Images widget. First, click on the Content tab.

1. Content

Woo Product Images

1.1: Layout

Select Layout

We have provided an image gallery and a single image type for the product images. Using this option you can set a different look for the product images.

Select Style

We have given two styles (style 1 and style 2) to use it to give different style for the image gallery option.

Select Thumbnail Position

We have given three thumbnail positions (default, left, and right) to use to give a different thumbnail position for the style 1 option.

Select Image Size

With this option, you can set the custom size of images for the single images option.

On Hover Image Change

By enabling this option you can change the image on hover.

Select Layout

We have provided four different layouts of style 2 for the image gallery option. Select your desired layout for the image gallery. You can watch this video to know more about it. The options we provided are:

Grid
Masonry

Metro
Carousel

Select Image Type

We have given two types of image (full and grid) to use it to give different look for the carousel option.

1.2: Columns Manage

Desktop Column

Set the number of listing columns to be displayed on the desktop.

Desktop Column

Set the number of listing columns to be displayed on the desktop.

Tablet Column

Set the number of listing columns to be displayed on the tablet.

Mobile Column

Set the number of listing columns to be displayed on the mobile.

Columns Gap / Space Between

Set the space between your columns. We recommend 15-20px.

1.3: Extra Options

Video

By enabling this option you can see the option to set the video space.

Select Video Location

With this option, you can set the location of the video, such as the video before the content or after the content.

2.Style

The Style tab is used for customizing the look of all the Woo Product Images widget components such as Image Box, Video, Carousel, Image, Main Image, Thumbnails, and Extra Options.

Image Box Style

Set CSS Filters, Border, Border Radius, and Box Shadow for the Image Box here.

Video Style

Set CSS Filters, Border, Border Radius, and Box Shadow for the Video here.

Carousel Style

Set Unique Carousel Id, Slider Mode, Slide Speed, Desktop Columns, Tablet Columns, Mobile Columns, Slide Padding, Draggable, Infinite Mode, Pause On Hover, Adaptive Height, Animation Type, AutoPlay, AutoPlay Speed, Show Dots, Dots Style, Dots Border Color, Dots Top Padding, On Hover Dots, Show Arrows Switcher Option, Center Mode Switcher Option, Number Of Rows, and Row Top Space for the Carousel here.

Image Style

Set CSS Filters, Border, Border Radius, and Box Shadow for the Image here.

Main Image Style

Set Border, Border Radius, Box Shadow , and Zoom Icon Option (Color, Background, Border, Border Radius, Box Shadow) for the Main Image here.

Thumbnail Style

Set Space (Padding Right, Padding Left, Padding Bottom), Opacity, CSS Filters, Border, Border Radius, and Box Shadow for the Thumbnail here.

Extra Options Style

Set Messy Columns Switcher Option, and Set Column Slider for the Extra Options here.

Preview

Here you can see with details how the Style option of the Woo Product Images Widget works.

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?