How to connect WooCommerce and Vimeo?

In this article, I will teach you to showcase your Vimeo videos in your product gallery. Images speak a thousand words and videos speak volume and now you can get the best of both worlds with WooCommerce and Vimeo.

Keep reading to find out how you can use your Vimeo videos in your product gallery.

Why should we connect WooCommerce and Vimeo?

The simple product page has the product image and description. But the image and texts may not be enough for some type of product. A video is a better way to provide more detail about the product. Most WooCommerce stores have videos displayed on the product. It helps to attract customers and increase sales. 

Why use the Additional Variation Images plugin?

This plugin offers an easy way to display additional images and videos to showcase your products. It allows you to upload a video from YouTube, Vimeo, or self-hosted video. You can customize the gallery layout and grab the user’s attention. The images and videos are fully responsive and work great on mobile and desktop. It is easy to install and activate for using additional variation images and videos on the WooCommerce site.

How to enable Vimeo in WooCommerce?

We have already discussed the advantages of showing the video on the product page. Now, let’s move to how you can add Vimeo video in WooCommerce. 

Step 1: Install and activate Woosuite core plugin

First, we need to set up the Woosuite core plugin into the WooCommerce site. So, you need to download the plugin file and install it on your site.

You can do it by going to Plugins>>Add New>>Upload Plugin. Then choose the downloaded plugin and click Install Now.

After the plugin is installed successfully, activate the plugin.

Step 2: Install Additional Variation Images plugin

Now we will install the Additional Variation Images plugin to connect the product gallery to Vimeo. You can find the plugin in the Woosuite section.

Under Woosuite>>Addons, you can find different plugins for a specific purpose. Since we will be using the Additional Variation Images plugin, install the plugin from there. 

Then you need to activate the plugin too.

Step 3: Edit the product

After setting up the plugin, you can add a Vimeo video to the product. You need to edit the product to add the video.

Go to Products>>All Products. Then click Edit on the specific product on which you want to show the video. Here, we will add a Vimeo video to the product ‘Jeans Jacket.’

Step 4: Add Product Gallery Images

You can add additional images from the product gallery section. When adding the image, you can also add a Vimeo video link which helps to display the video on the product page.

Click Add product gallery images

Then select an image file to upload.

Step 5: Add Vimeo Video Link

After selecting the image, scroll down to Variation Gallery Video and put the Vimeo video link in Video URL. Then click Add to gallery

Step 6: Update the Product

After completing the above steps, Update and view the product to see the Vimeo video on the product page.

It should look similar to the following page.

Additional Variation Image Settings

You can configure the size and width of the product image in Additional Variation Image Settings. It is effective when you want to display a larger or smaller size of the images and videos. 

Go to Woosuite>>Additional Variation Images. You can adjust the thumbnails and gallery size by increasing their value. After making changes, click Save changes to apply on the website.

You can select the number of thumbnails to display on the product page. You can display up to 8 thumbnails. The width of the gallery layout is determined from the gallery width value. The value limit is 10-100. Accordingly, you can increase or decrease the galley layout.

As we can see, the product video is now displayed in a bigger size after we increased the gallery width value.

Conclusion

In this article, we have learned how to connect WooCommerce and Vimeo using the Additional Variation Images plugin. It is a convenient way to add videos to the product page. It also allows you to adjust the screen size of images and videos on the product page. Please let us know if you get any problems while adding the videos to your product.

Brian
Brian

Welcome to the AovUp blog, where we discuss all things WooCommerce. I hope we can help you achieve something today...

Leave a Reply

Your email address will not be published. Required fields are marked *

We – and our partners – use cookies to deliver our services and to show you ads. By using our website, you agree to the use of cookies as described in our Cookie Policy