The WooCommerce plugin for WordPress is free, open-source, and makes it easy to build an e-commerce site. With the plugin, you can build an e-commerce site on top of your WordPress site and add functionalities such as a shopping cart or product data types.
When you have an online store, you need to display excellent images of your product. Cloudinary has a plugin specifically for WordPress that’s user friendly, intuitive, and has these features out of the box:
- Faster page load times.
- Advanced auto-responsive delivery.
- Lazy loading and better visual experience
- Automate image quality and video encoding settings.
- Scale and crop images using AI to focus on the most important region.
- Apply comprehensive video and image transformations and effects.
- Display assets via an interactive media gallery.
- Deliver optimized media experiences.
In this blog post, we’ll walk through setting up WooCommerce with Cloudinary for product images.
Let’s start by setting up our WordPress server and WooCommerce server.
You can use any WordPress server and host. Because setting up a local environment to develop a website can be a needlessly extensive process, I chose Local by WP Engine, a free program that allows you to easily set up a WordPress environment on your local computer, regardless of your skill level or experience. Local is supported on Windows, Mac, and Linux systems.
Steps to install local:
- Go to the Local site here and click the Download for free.
- Choose your platform.
- On the forms page, fill out your information. Then click Get It Now.
- Finally, you should have a UI that looks like this. This is the main Local dashboard that lists all your current sites:
When you see the image above, click the + button on the bottom left to spin up a new WordPress site.
Local will prompt you through setting up your configurations for the server:
- Choose Create a new site.
- Name your site.
- Choose your WordPress server configuration. (Choose Preferred for this tutorial.)
- You’ll see this UI with your WordPress server configured and live on your local machine.
- When you click on the WP admin button from the previous screen, it will take you to the WordPress login page. Login and you will see your WP Admin UI.
This successfully sets up our WordPress server. Now, let’s install WooCommerce and configure it.
To install WooCommerce, simply go to the plugins option on the left-hand side of the hamburger menu in WP admin. In the Plugins directory page, search for WooCommerce and it should populate:
Install and activate WooCommerce. The next thing we need to do is create products.
To create a new product, go to the Products option on the hamburger menu on the left. You’ll see all your products and the option to add a new product. Click Add New and you should see this page:
Fill out the fields of Name, Summary, List Price, Sale Price, and Description, and leave the images blank for now. Hit the Add button after populating the fields and you should have your product added.
A “product category” is a type of classification that allows you to group similar products together. It works similarly to categories in standard WordPress posts but is specifically tailored for organizing products in an online store.
Just like in standard WordPress categories, WooCommerce product categories can be hierarchical. This means you can have main categories and subcategories. For instance, under “Men’s Clothing” you could have subcategories like “Shirts,” “Pants,” “Shoes,” and so on.
When you add or edit a product in WooCommerce, you can assign it to one or more categories. This categorization is key to how the product is displayed and found in your store.
This is what the product category page looks like filled out with my example data:
Don’t upload an image yet. We’ll use Cloudinary for this.
The Cloudinary WordPress plugin is designed to optimize your site performance and improve user experience with faster page load times, advanced auto-responsive delivery, lazy loading and better visual experience. Automate image quality and video encoding settings, scale, and crop images using AI to focus on the most important region, apply comprehensive video and image transformations and effects, display assets via an interactive media gallery, and deliver optimized media experiences to any device in any resolution or pixel density.
We’ll do the same thing we did in setting up WooCommerce, except we’ll search for Cloudinary in the Plugins directory page. Install and activate it:
Now that we have it installed in our WP Admin, after you follow the setup wizard, you should have a main dashboard that looks like this:
The major value add of using the Cloudinary plugin is how easy it is. Once downloaded, the default settings and media sync is automatic. Your media items are now offloaded to an optimized media CDN!
If you go to your Media option on the side menu of your WP Admin and start loading in images, the Cloudinary plugin will automatically sync your images to the Cloudinary CDN as well as your dashboard:
The green cloud icon indicates that the sync is successful between your WordPress backend and your Cloudinary account.
The next setting is setting up the Cloudinary DAM option. Navigate back to your Cloudinary option on the left-hand menu and on the bottom-right part of the screen. Toggle the button to On. It will give you access to your media library and the features that you similarly have in your Cloudinary console. This is awesome as it eliminates having to switch back and forth from WP admin to your Cloudinary console.
Everything is set up properly. Lastly, we can set our images from Cloudinary right into our WP Admin and WooCommerce Product type. Navigate back to the Products page on the left-hand menu. Remember, we already filled out some data earlier. All we have to do now is go to the image field. When you get to the image field, click Choose an Image and it will take you to this selection page:
There are three tabs at the top. Click Cloudinary and it will take you to this page:
Hover over your image and a white box will appear. Click that white box, which will cause a checkmark to be populated in the box. Then you’ll see an import button with a sidebar containing the image. Click Import and it will take you right to the WP Admin assets page. You’ve now imported that image from Cloudinary into your WP admin without having to leave it!
You can now visit your product page and see the image on Cloudinary.
I hope this article provided a better understanding for you in using the Cloudinary WordPress plugin with the WooCommerce plugin for an easy e-commerce image setup.
As always, I look forward to seeing what you build out there on the web and if you have any feedback, please share in the Cloudinary Community forums or the associated Discord.
