How to Customize the Appearance of WooCommerce Product Images with Essential Addons (Elementor Free Plan)

In a WooCommerce store, product images are the main focus of users. If you want to create more attractive and interactive product pages, and for those who don't want to use Elementor Pro, a paid plugin, then Essential Addons is the ideal choice for you.

This tutorial will walk you through how to use the Elementor Free Editionrespond in singing Essential Addons PluginIt's easy to customize the display of product images, including rotation, thumbnail arrangement, pop-up view, and other advanced visual effects.

I. Plug-in preparation

Before you begin, make sure you have completed the following setup:

  • Installed and activated:
    • WooCommerce Plugin
    • Elementor (free version)
    • Essential Addons for Elementor Plugin
  • Store products have been added, make sure products have pictures
Image [1] - How to Customize WooCommerce Merchandise Image Appearance with Essential Addons (Elementor Free Solution)

Enabling the Woo Product Images Widget

  • Go to the backend and click"The Essential Addons > Elements "
Image [2] - How to Customize WooCommerce Merchandise Image Appearance with Essential Addons (Elementor Free Solution)
  • Scroll to WooCommerce Elements area, enable the " Woo Product Images "Widgets
Image [3] - How to Customize WooCommerce Merchandise Image Appearance with Essential Addons (Elementor Free Solution)
  • Click on the "Save Settings"

Third, create and edit product page templates

  • Go to "Templat > Theme Builder"
Image [4] - How to Customize WooCommerce Merchandise Image Appearance with Essential Addons (Elementor Free Solution)
  • Click on the "?óProduct Single"Tabs
Image [5] - How to Customize WooCommerce Merchandise Image Appearance with Essential Addons (Elementor Free Solution)
  • Existing templates can be selected for editing, or click on theAdd New Template"
Image [6] - How to Customize WooCommerce Merchandise Image Appearance with Essential Addons (Elementor Free Solution)
  • Set the following parameters:
    • Editor Selection:Elementor
    • Template Type:Product Single
    • Name the template and click "Create Template".
Image [7] - How to Customize WooCommerce Merchandise Image Appearance with Essential Addons (Elementor Free Solution)

Once the template is created, click on the "Edit with Elementor" into the editor.

Fourth, add and customize the product image display

Add components:

  • Search for "Woo Product Images"
Image [8] - How to Customize WooCommerce Merchandise Image Appearance with Essential Addons (Elementor Free Solution)
  • Drag the component to a suitable position on the page

Content Settings (Content Tab):

The following settings can be made:

  • adapt Image Resolution
  • On/Off Pagination
  • set up Thumbnail number and position
  • set up Image navigation styles,Loop switching (Loop)
  • start using Popup window to view larger image (Image Popup)
Image [9] - How to Customize WooCommerce Merchandise Image Appearance with Essential Addons (Elementor Free Solution)

Style Tab:

Further beautify the product images:

  • Image background color, border style, spacing
  • Spacing between thumbnails
  • Style changes on mouse hover
  • Popup Window Style and Size Settings
Image [10] - How to Customize WooCommerce Merchandise Image Appearance with Essential Addons (Elementor Free Solution)

Advanced Settings (Advanced Tab):

The image display can be finely optimized by adjusting the following options:

  • Margin
  • Padding (inner margins)
  • Responsive Settings with Z-index Hierarchy
Image [11] - How to Customize WooCommerce Merchandise Image Appearance with Essential Addons (Elementor Free Solution)

V. Setting display conditions and publishing templates

  • Click on the bottom right corner of thePublish"
Image [12] - How to Customize WooCommerce Merchandise Image Appearance with Essential Addons (Elementor Free Solution)
  • In the pop-up window, click on "Add Condition"
  • Set the display logic as follows:
    • First item:Include
    • Second item:Singular
    • Third item:Product
Image [13] - How to Customize the Appearance of WooCommerce Merchandise Images with Essential Addons (Elementor Free Solution)
  • Click on the "?óSave & Close"

This way the template is automatically applied to all WooCommerce Individual product pages.

VI. Viewing the effect

Visiting any one of the product pages, you will be able to see the effect of the product picture display just set up, the overall more beautiful and professional, but also to enhance the user browsing experience.

Image [14] - How to Customize the Appearance of WooCommerce Merchandise Images with Essential Addons (Elementor Free Solution)

VII. Introduction to the Essential Addons Package

Essential Addons offers Elementor users several powerful feature packages that can be customized to meet different needs.

Below is the official package price list:

product or service package (e.g. for a cell phone subscription) prices length of time Website activation Support & Updates gadget Extended functionality Templatley PRO Free Access
Lifetime Unlimited $199.98 $249 limitless ? ? 85+ gadgets 15 extensions ?
Unlimited $79.98 $99 1 year ? ? 85+ gadgets 15 extensions ?
1 Website $39.98 $49 1 year ? ? 85+ gadgets 15 extensions ?

You can see that the official Unlimited package is $79, the price is still relatively expensive, due to our website and Essential Addons official cooperation promotion, get the official discount price, please click on thethis linkInquiries and purchases.

Image [15] - How to Customize the Appearance of WooCommerce Merchandise Images with Essential Addons (Elementor Free Solution)

summarize

utilization Essential Addons for Elementor PluginWith Elementor Pro, you can flexibly customize the image display area in WooCommerce product pages without purchasing Elementor Pro, including thumbnails, popup previews, paging navigation and other features to make your product pages more visually appealing. For more WordPress related tutorials and information, please pay attention toPhoton fluctuation network, has the most comprehensive WordPress tutorials and the most activeWordPress Exchange CommunityThe


Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!
Customer Service
Customer Service
Tel: 020-2206-9892
QQ咨詢:1025174874
(iii) E-mail: info@361sale.com
Working hours: Monday to Friday, 9:30-18:30, holidays off
? Reprint statement
This article was written by Early Season
THE END
If you like it, support it.
kudos15 share (joys, benefits, privileges etc) with others
commentaries sofa-buying

Please log in to post a comment

    No comments