WooCommerce Product Image widget

WooCommerce Product Image displays an image or carousel of product images if enabled in the settings. In addition, you can enable or disable the discount badge, which will give you the ability to make the product stand out from the rest of the products.

For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org

Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

Content Tab

In the Content section, you can manage several basic settings of the WooCommerce Product Image block such as sale flash toggle and products selection.

Product Images

  • Products – the option allows you to select the product whose images will be displayed. The selection is available if the widget is added to a regular page and not a product page.
  • Sale flash – the toggle to enable/disable the sale label display.
Product Image settings

Style tab

On the style tab, you can manage the element styles of the Product widget like a background in different states, borders, padding/margin, etc.

Product image

  • Padding – the setting allows managing the padding of the current element in different units(px, em, %, em) for desktops, tablets, or phones.
NORMAL/HOVER

The image box style settings for different states.

  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.

Thumbnails/Sale flash

  • Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %, em) for desktops, tablets, or phones.
NORMAL/HOVER

The thumbnails box style settings for different states.

  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Advanced Tab

The advanced tab allows you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.

Save changes

Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.

Update page in the Elementor
Update page in the Elementor

Was this article helpful to you?