Pictures are really worth a thousand words when it comes to e-commerce. For most online users, purchasing decisions are based on a product image, not on the convincing sales text you’ve perfected for hours. So you need to make sure your WooCommerce store has the best photos and videos to ensure maximum conversion. Is there a problem? The standard WooCommerce product gallery does not present your products in the best possible way.
Fortunately, this problem is easy to solve. In this step-by-step guide you will learn how to drastically improve your WooCommerce product gallery, no matter which WooCommerce theme you choose to install.
The best? With the WooThumbs plugin for WooCommerce, it’s a simple three-step process.
Why improve the standard product gallery of WooCommerce?
Although the standard WooCommerce product gallery is quite functional, updating your product photos with the plugin can significantly increase your sales.
As mentioned earlier, almost all online consumers rate a product based on the picture. But the WooCommerce gallery is quite simple. This gives you the luxury of displaying multiple images under the product photo, but that’s about it.
Highly converting e-commerce product galleries feature multiple images per product variant, integrated product videos and a transparent zoom so the customer can see your products up close. Not to mention effects such as automatic transitions or sliders for your photos.
Unfortunately, the standard WooCommerce product gallery does not offer any of these features. We have now exposed the benefits of updating your WooCommerce product gallery, how can the WooThumbs for WooCommerce plugin help you?
How WooThumbs works for WooCommerce
By adding WooThumbs to your WooCommerce store, you can enjoy several benefits that will ultimately increase sales of your WooCommerce store.
The plugin is activated:
- Choose between a horizontal slider, a vertical slider or a crossfade effect.
- Place the thumbnails above, next to, or below the main product image.
- Adjust the thumbnail distance, icon colors, transition speed, etc.
- Add additional images from the options.
- Integrate video content from YouTube, Vimeo and other platforms into your gallery.
- Image scaling with adjustable display modes.
- Set up an image gallery that responds fully on screen, including mobile scaling.
- Select the number of thumbnails to be displayed at the same time.
How to create a better product gallery with WooThumbs?
When you are ready to create your great WooCommerce product gallery, the first step is to install and activate the WooThumbs for WooCommerce plugin. For more information, see our step-by-step WordPress plugin installation guide.
Setting up the image gallery of your product
Despite its functionality, the standard WooCommerce product gallery is not adapted to do justice to your products. By customizing your product gallery, you can better align it with the general theme of WooCommerce. Include resizing images in the list and adjust the layout to increase the number of conversions.
1. After installation, go to WooCommerce > WooThumbs.
2. Once you are in the WooThumbs Dashboard, go to Display Settings.
3. The following items can be changed in this menu:
- Gallery width
The default value is 48%, because this is the most common width of the image area in WooCommerce themes. However, you can increase it up to 100% to better meet your specific thematic needs or personal preferences.
Rotate the image gallery to the left, to the right, or not at all.
- Icon Color
The color of the icons that may be present on the image, such as B. Previous/Next symbols.
- Displaying icons on Gower?
When this function is activated, the icons only become visible when you move the mouse pointer over the image.
- Show directions for the symbols?
When the mouse pointer is moved over the icons, a tooltip is displayed.
- Gallery width
4. You can then go to Image Dimensions to resize, crop, add thumbnails and larger images.
5. The user has five other configuration options, accessible via the same control panel. They’re like this:
- Carousel parameters
- Navigation settings (adding arrows in the WooCommerce product gallery).
- Scale parameters
- Settings for full screen mode (creation of a light box for the product gallery)
- Response parameters
Adding more images from options
Since the standard product gallery offers only one photo, it can be very difficult for WooCommerce retailers to convert customers to decent product capabilities. Fortunately, the WooThumbs plugin allows you to add additional images to the variants of your products.
- Switch to a variable product.
- Choose the Variations tab.
- Expand one of the options.
- Click on the Add Additional Images link. You can see the media gallery.
- Select one or more additional images and click Add to edit.
- The extra images are now under the Options tab. It is important to note that you should always add a special standard image to your variation.
- Once you have completed this process for all options, update your product or click Save Changes.
How to add a video to the WooCommerce product gallery
Video has proven to be one of the most convergent media formats, with 73% of online shoppers more likely to buy a product after watching a video. Without the ability to add one to the standard WooCommerce product gallery, you will need to use the WooThumbs plugin to do this.
There are three options to get your video in WooThumbs: OEmbed-based media, embedded HTML and self-hosted video. For videos posted on oEmbed sites such as YouTube and Vimeo, simply follow the steps below (we use YouTube as an example).
- Copy the URL of your YouTube video.
- Then open your media gallery.
- Select the image to which you want to link the video.
- You will see two fields under WooThumbs Media Details : These are the URL and image format.
- Paste the YouTube URL into the URL field. This is the main URL of the video; the same one you would paste into a post/page editor to embed the video.
- If you have included an HTML link in the video, repeat the process, but paste the direct link into the URL field of the media.
Once the media update process is complete, the media data is automatically updated when you leave the Media Gallery. There’s no need to cut it off. You can then watch the video on your product page.
Final thoughts on improving the WooCommerce Product Gallery
That’s it! You’ve just learned how to fully customize your WooCommerce product gallery, add additional images to your product variants and integrate these important product videos.
By using these product gallery extensions, you can completely change the look and feel of your products to increase conversions on your WooCommerce store without ruining yourself!
All you need is a little help from the WooThumbs for WooCommerce plugin to convert your WooCommerce store in seconds.
woocommerce product gallery code,woocommerce product gallery shortcode,woocommerce storefront product gallery,woocommerce product gallery plugin,woocommerce show product images,how to display product gallery images in woocommerce,woocommerce tutorial for beginners,woocommerce tutorial pdf,woocommerce tutorial for developers,woocommerce tutorial 2020,woocommerce tutorial youtube,how to use woocommerce plugin in wordpress step by step,woocommerce product gallery carousel,how to get product gallery images in woocommerce