How to Customize WooCommerce Product Gallery
Customizing a product gallery in your online store can be a great way to improve the visitor experience, product visibility, and conversion rates. To help you do this, we’ve brought you our guide on how to customize the product gallery in WooCommerce.
But before we go to the process of doing so, let’s take a look at why do you need to customize the product gallery in WooCommerce in brief.
Why customize the product gallery in WooCommerce?
One of the major selling points of an online business is the product images. And if you add and customize the product gallery, you enhance the appearance of your online store. When you upgrade the visual appearance it attracts more potential buyers.
Similarly, a customer might want to evaluate a product from several angles as well. They might want to have a clearer perspective of it before they buy them in which a product gallery can be useful. Therefore, customizing the product gallery can also help maintain a better customer experience.
So, if you want to increase your revenue, we recommend you customize your WooCommerce product gallery. Now that you have an idea about its importance, let’s see how we can customize them to your WooCommerce website.
How to Customize WooCommerce Product Gallery?
You can customize the product gallery in WooCommerce using 2 methods:
- From WooCommerce dashboard
- Using a Plugin
We will go through each step in detail at both methods below so that you can choose your preferred way. Before that, please make sure to set up WooCommerce properly and install one of the WooCommerce compatible themes.
1. Customize Product Gallery from WooCommerce Dashboard
WooCommerce is the most popular platform for creating an online store. Part of the reason why WooCommerce is so popular is because of the endless customization, control over the design and management of your virtual store.
You can easily customize product the product gallery from the WooCommerce dashboard itself. But first, you need to open the product edit page of the product where you want to customize the product gallery.
So, go to Products > All Products from your WordPress admin dashboard. You will be able to see the list of all products on your website. Here, you can add new products or remove an existing one, import or export the products also you can individually customize single or multiple products at once.
Then, click on Edit for the product where you want to customize the product gallery.
You will be redirected to the edit product page of the particular product. Now, you can start to customize the WooComemrce product gallery. The product gallery can be added, reordered, or removed from this editor from here.
1.1. Add a Product Gallery in WooCommerce
After you open the edit product page, if you scroll further, you can see the Product gallery section on the right sidebar. Click on the Add product gallery images link to add a product gallery.
When you click on that, you’ll be redirected to a modal where you can upload new images or select existing ones from the media library.
You can select single or multiple products to add to the product gallery. Just select the images that you want to add to the gallery and click on Add to Gallery.
Once you have finished adding the product gallery, go ahead and Update the product page.
When you refresh the product page, you will be able to see your new product gallery.
1.2. Reorder products in the gallery
In some cases, you might want to change the order of products. To do so, open the edit product page of the product from your WordPress dashboard once again. Then, just drag and drop the products to the positions where you want the product to be displayed.
Finally, click on the Update button once you have reordered the products.
1.3. Remove products from the gallery
You can also remove the products from the gallery with just a single click of a mouse. Simply navigate to the image thumbnails in the edit product page from your dashboard once more.
As soon as you navigate to the thumbnail, you’ll see a cross icon above the thumbnail. Click on the delete image icon to remove any product from the product gallery.
However, if you wish to remove the entire product gallery, you will have to remove all the products from the gallery one by one.
That’s it! These are all the basic customizations that you can implement for your website using the default WooCommerce dashboard.
2. Customize WooCommerce Product Gallery Using Plugin
Now we know that it’s really easy to add, remove and reorder the products in the product gallery. But these are just some basic customization offered by WooCommerce. They have very limited customization options and might not be always enough for your website.
However, if you want additional customizations for the product gallery, we can use some awesome product filter plugins.
Here we have listed a few plugins to customize the product gallery in WooCommerce. Each of them has a unique feature and functionality.
Product Gallery Slider for WooCommerce
Product Gallery Slider for WooCommerce is the best freemium plugin. As the name says, this plugin lets you add a carousel in the WooCommerce gallery section. It offers more than 10 customization options and this plugin works with most of the WordPress themes.
Additionally, this plugin supports Elementor and Visual Composer page builder which gives you total control over the design of your WooCommerce site. You can also get a lightbox module that lets you add slide effects, zoom images and display thumbnails to attract customers.
Key Features
- 3 different gallery layouts are available
- Supports video in the product gallery
- Supports RTL language
- Shortcode Ready
Price
Product Gallery Slider for WooCommerce is a freemium plugin that will cost you 39 USD per year.
WooCommerce Product Video Gallery
With the help of WooCommerce Product Video Gallery, you can embed videos in the product gallery along with images. It supports both Youtube and Vimeo videos as well as videos with MP4, WebM, and Ogg formats. It has a great user-friendly interface for embedding the video on the WooCommerce site.
But the catch is you can use only one video per product gallery. Furthermore, you can also allow the video to play in a repeat mode which creates a video loop.
Key Features
- Vertical and horizontal slider layout
- Adapt height based on images
- Shortcode Ready
- Compatible with Elementor and Divi builder
Price
WooCommerce Product Video Gallery is a freemium tool. It has a free version with basic features and 3 premium plans that start at 25 USD per year.
Now that we’ve listed a couple of choices let’s go ahead and install one of them to customize the product gallery in WooCommerce.
For this demonstration, we’ll use Product Gallery Slider for WooCommerce developed by Codeixer. This is a freemium plugin that ensures to showcase of your products in beautiful style.
2.1. Install the Plugin
To install the plugin, go to the WP Admin Dashboard and navigate to Plugins > Add new.
Search for the keywords of the Product Slider for WooCommerce plugin. Then, click on the Install Now button to install the plugin. Finally, activate it after the installation is complete.
If you want to use a premium plugin, you will have to upload the zip file and install it on your website. You can find more information about it on our guide to install a WordPress plugin manually.
2.2. Customize the Product Gallery
After the plugin is activated, you can start using it to customize the product gallery. Just go to Codeixer > Gallery Options from your WordPress dashboard.
You should be able to see two settings here, General options and Lightbox options.
While all of the options are not available in the free version of the plugin, it provides you with enough to customize everything to your needs.
2.2.1. General Options
The General options include all the basic customizations that you can perform to the product gallery.
Add a Carousel Slider
At the General Options, you will be able to see the Slider Autoplay. Select Yes from the dropdown menu to automatically add a carousel slider without any additional tweaks.
Product photo Zoom
Having a zoom feature on your product lets your customer see a detailed view of your goods and gives a better visual presentation too.
To enable the zoom feature for your products in the products gallery, simply select Yes in the dropdown menu from the Image Zoom option.
Slider Arrows and button
You can also customize the slider arrows and button by changing the color of it to match your WooCommerce website.
To do so, you’ll find Icon Color within the General option. Choose any color of your choice from the color picker.
Once you have selected a color, make sure to save changes.
Besides these, you can also set the following in general settings:
- Enable/Disable Navigation Icon
- Number of Thumbnails to be displayed
- Infinitely Slide the product
- Move the image on mouse dragging
2.2.2. Lightbox Options
In the lightbox tab, there are two settings in the free version.
You can choose to display or either hide the image attributes as a caption in the lightbox setting. Similarly, you can also set the lightbox background color to give your products a professional look.
You can see all these changes in the product gallery after you preview the product page.
Good job! This is how you customize the product gallery in WooCommerce.
Bonus: Add custom image sizes in WordPress
Adding images to your blog posts and pages is easy with WordPress. However, you should choose the right image size so that the overall layout of your website looks good.
It’s very important to understand how image sizes work on WordPress websites and how to add custom image sizes to your site. If you choose the wrong size, your images might look blurry and if your images are too large, they can slow down your website. Incorrect image sizes can also mess up your page or blog post layout and cause unnecessary side-scrolling.
But WordPress has a built-in setting for various image sizes. They are:
Thumbnail size: 150 x 150 pixels
Medium size: 300 x 300 pixels
Largest size: 1024 x 1024 pixels
Full size: defaults to the original size of the uploaded image.
When you upload an image to WordPress, these four different image sizes are created by default.
The reason why WordPress creates these image sizes is twofold. First, you don’t have to manually resize the images. Second, it ensures the correct image size is selected for different locations on your site.
How to resize and edit images in WordPress
Thankfully, WordPress allows you to resize the default images too. To do so, just go to Settings > Media.
As you can see from the screenshot, all the standard image sizes are listed there. You can easily customize them by entering your preferred measurements.
Once you have adjusted the default WordPress image sizes to your preferred dimensions, click on Save Changes. In the future, all the images that you upload to your website will be adjusted to the new dimensions.
That’s all! You can now change the image sizes in your WordPress website. But if you want more information about this, check out our comprehensive post on how to add custom image sizes in WordPress.
Conclusion
Customizing the WooCommerce product gallery is one of the best ways to grab the attention of customers and turn them into potential buyers. So, if you need to customize the product gallery, you should do it right away to increase the conversion.
To summarize, you can customize product gallery in WooCommerce using two major ways:
- From WooCommerce Dashboard
- Using a Plugin
You can use a plugin if you need some advanced customization for the product galley because WooCommerce offers few and very basic customization options. For some people, those features might be enough if you are just looking to add or remove products in the product gallery.
Nonetheless, it all comes down to your preference and need since both of these methods can be used to customize the product gallery. But for us, Product Slider for WooCommerce is best when it comes to customizing product galleries using a plugin since it has lots of useful features even in the free version.
We hope that you can customize the WooCommerce product gallery with ease. If you found this guide helpful, here are some more articles that might be interesting for you:
- How to Customize WooCommerce Product Page
- Best Plugins To Customize WooCommerce Product Page
- How to Customize WooCommerce Product Page Template
That’s it for this article! We hope we have helped you to customize the product gallery in WooCommerce. If there were any issues, please let us know in the comments section. We will be glad to help you.