Brands are super powerful because of the familiarity they bring, so learning how to add brands to your Divi WooCommerce store can be a great way to help build some trust with that brand recognition. Why wouldn’t we, we have poured all the effort and time into crafting something special, so we should definitely pull out all the stops to make sure we convert our visitors into customers. Brands have invested tons of money into crafting that familiarity, nothing wrong with a little piggybacking action here because after all, we are making them richer by selling their products for them 😎
From Amazon to Footlocker, to your store, this is an extremely effective tool that you should be using if you stock multiple brands in your Divi WooCommerce store. In this week’s tutorial, we will talk about 3 ways that we can add brands to our Divi WooCommerce store and we will see how the results compare through these different methods.
Video Tutorial
Table of Contents
Difficulty
Easy
Time
5 – 10 Minutes per method
How to add Brands to your Divi WooCommerce store without plugins
WooCommerce busts out of the gate with a ton of FREE features that can help you do all sorts of awesome stuff, albeit some better than others. Unfortunately, brands fall into that “others” category, but either way, let’s take a look at how we will integrate Brands into our Divi WooCommerce site using only the tools found in WooCommerce.
Step 1) Add Brand Attributes
So let’s head over to the backend of your site and go to Products > Attributes.
There you can add a new attribute called “Brands” and make sure to check the box that says “Enable Archives” before you click on “Add attribute”.
Last step here is to click on “Configure terms” in the Terms column next to you newly added Brands attribute, then start adding your various brands.
I’m going to add Nike and Reebok for this tutorial.
Step 2) Assign your Brands to WooCommerce Products
Let’s jump over to our products and edit a product to which we want to assign a brand attribute by going to Products > All Products > Edit a Product that will be assigned a brand.
Scroll down to the Product Attributes > Click the drop-down > Select Brands > Then type the brand you want to associate with this product, I went with Nike.
With that in there, you can “Save attributes” and then “Update” your Divi WooCommerce Product.
Now let’s take a look how that is displayed on the frontend of your site.
Now we can be honest here, this is not going to win any design awards, but we work with what we have. Customers can now see which brands are associated with which products and that is a win either way.
Let’s take a look at how we can take it one step further.
Adding Brands to your Divi WooCommerce store using a FREE plugin
If you want a little more features and functionality for adding brands to your Divi WooCommerce site, you can use a 3rd party plugin to help extend the tools you find natively in WooCommerce. We tested a FREE plugin called Perfect Brands for WooCommerce and it does great to allow you to add things like the brand logo, banners, and index pages.
Step 1) Install the Perfect Brands plugin
Make sure you are logged into the backend of your Divi WooCommerce site then head over to Plugins > Add New > Search for Perfect Brands for WooCommerce.
Once installed, make sure to activate the plugin.
Step 2) Create some Brands for your Divi WooCommerce site
To get started, you can either click on the settings button under the activated plugin name, or you just go to Products > Brands.
All you need to do here is add the pertinent details for the brand you are adding.
Let’s add Reebok, so we will populate the name, description, logo, and brand banner.
Make sure to save when you are done.
Step 3) Assign your Brands to Products
To assign our newly created brands to some products we’ll head over to Products > All Products > Edit a Product that will be assigned a brand.
On the edit screen adding the brand to your Divi WooCommerce product is super easy, all you need is to the check the box next to the name of the brand you want to assign in the column on the right of the page, then “Update” your product.
Time to take a look at what this should look like! Go ahead a view the product that you just saved. On that page you can also click the brand that now shows and it will take you to an index page where all the products for that brand is listed that utilizes that banner we added earlier.
You can see our brand logo is added on the product page but looks a bit weird, and you can change things like the location and the size of the image used in the plugin settings by going to WooCommerce > Settings > Brands. You’ll see many extra settings there for things like adding an index page and more, but that is outside the scope of our tutorial today.
Instead, we will spend this time showing you how you can go even further with a feature you’ll find in Divi BodyCommerce to take your brand assignments to the next level.
How to add Brands to your Divi WooCommerce site using Divi BodyCommerce
On to the crème de la crème on how to add Brands to your Divi WooCommerce site, hello BodyCommerce. Amongst the hundreds of features and over 60 modules in BodyCommerce tailored for Divi and WooCommerce, you’ll find some great ways to show off and filter through the brands you stock on your Divi WooCommerce site.
Let’s take a look.
Step 1) Add Brand Attributes
So let’s head over to the backend of your site and go to Products > Attributes.
There you can add a new attribute called “Brands” and make sure to check the box that says “Enable Archives” before you click on “Add attribute”.
The last step here is to click on “Configure terms” in the Terms column next to your newly added Brands attribute, then start adding your various brands.
You’ll give it a name, description, and add the URL for the brand logo that you should upload to the media library.
I’m going to add Nike and Reebok for this tutorial.
NOTE: If you don’t see the option to add the image URL, make sure that you have enabled the BodyCommerce Variation Swatches on the settings page by heading to Divi Engine > BodyCommerce Settings > Variation Swatches > Enable. (see image below)
Thanks to /u/rojichan on reddit for pointing this out!
Step 2) Assign your Brands to WooCommerce Products
Let’s jump over to our products and edit a product to which we want to assign a brand attribute by going to Products > All Products > Edit a Product that will be assigned a brand.
Scroll down to the Product Attributes > Click the drop-down > Select Brands > Then type the brand you want to associate with this product, I went with Nike.
With that in there, you can “Save attributes” and then “Update” your Divi WooCommerce Product.
Step 3) Add the Attributes Module to your Single Product Page Layout
Head over to Divi Engine > BodyCommerce > Product Page > Edit this layout under the selected product page layout.
Place the BodyCommerce .PL Attributes module where you would like your brand to be displayed on the page and open the module settings.
On the Content Tab, you’ll set Attribute to Product Brands then toggle “Link to attribute archive page” and “Show Image/Color Swatch” to YES.
Lastly, you’ll make sure the “Choose the swatch type” setting is also on Image.
Save the module, then update your Layout.
Now when you look at one of your products, you should see something similar to the image below.
Looking gooOOOood. We quickly added our brands to our product loops and our product pages with minimal effort. We are even filtering with them on our search pages. That is good stuff.
These are but a few of the powerful features you’ll find in Divi BodyCommerce, and only scratches some of the other features you can take advantage of to make index pages for your brands, ajax filtering, and brand pages. We will be making another post that dives deeper into integrating brands on your Divi BodyCommerce site soon.
Now that you’ve mastered 3 methods on how to add brands to your Divi WooCommerce site, you know what time it is…
…Happy Dance with me guys!
Conclusion
Ok team, great work on getting through this with me! Whichever method you choose how to add brands to your Divi WooCommerce site, we know that your customers will appreciate it and that you will see a positive impact not only in satisfaction but your bottom line also.
Hi there, great tutorial! This is just in time for something I’m trying to achieve.
With Divi, there is the theme builder, and I was trying to customize brand pages using it. I could only get as far as modifying the title and description of the brand page – for example with an audio/microphone store we’re building.
I couldn’t find a way to edit and configure only products associated with the brand to show within the brand page.
We have a range of microphone brands such as AKG, Sure, Blue Microphones etc all with the default boring brand pages and I was hoping to customize the layout but not having much luck.
This tutorial was nearly what I was after but I am at the next step now of modifying the brand page using Divi.
Any suggestions or a point in the right direction would be amazing.
Thank you!