Welcome back to the last chapter in this guide on how to turn your online store into a perfectly functional online showcase for your car showroom.
In the first two articles we have learned how to create a catalog customers can use to see the available models and request a quote for their vehicles of choice.
Once these functions are properly configured, all we have left to do is to further improve our showroom in order to bring more and more customers to it.
Difficulties navigating websites might bring the dropout rate up to over 80%, which might render all of our hard work done so far useless.
So, for this reason, let’s help our customers to reach their (and our) objective. In this article we are going to see how to:
- Introduce a brand navigation system, in order to highlight the manufacturing brand of each vehicle (which is essential for many products, especially for cars).
- How to introduce the use of filters to be used with customer searches according to different parameters (color, fuel, kms, horsepower etc)
We are once more going to use two plugins in order to achieve this result.
How to add a search by brand function to WooCommerce
In order to add a search by brand function we are going to use the YITH WooCommerce Brands Add-on plugin.
Once the plugin is installed and activated, let’s customize its options in Add-on > Settings:
Among these options you will find the one regarding the type of text that will be displayed right before a specific brand is mentioned and where in the page you want to display this text.
In order to create the “brand” attribute we wish to assign to our vehicles, let’s go to Products > Brands:
We can also assign a name, an image and a description. In this case, I’m creating the Hyundai logo and assigning it its right image.
Once created, let’s go to the product page and assign it its corresponding brand. In case you haven’t created one yet, you can still create one from this position (even if in order to assign an image to it you would still need to go back to the previous section):
And this is how our vehicle is going to show the selected brand:
Brands are also going to be highlighted in the car catalog, which helps customers searching through the available cars:
Doing this, customers will immediately see a brand and feel reassured by the sight of a recognizable name, which also serves as a guarantee in itself for the quality of the car your customers are interested in.
Our showroom is now complete, so how can we further improve it?
How to filter products using Ajax with WooCommerce!
Imagine going to a car showroom: you are looking for a black car but the clerk keeps showing you cars of all colors. Maybe this may also include the car you are after, but having to pick from dozens of useless alternatives is just annoying.
The same goes for all of the other car details such as fuel type/consumption, seats etc.
I mean: if I’m looking for a SUV, I don’t neet to look at runabouts.
The same can happen in your online showroom, especially if you have a big amount of vehicles available. How can you guarantee your customer satisfaction and offer the best possible search experience?
Well, simply by offering one or more filters.
What we intend to offer is a filter in the catalog side which allow a direct and quick search for the car with the set of features we want.
In order to add this function to our catalog we are going to use the YITH WooCommerce Ajax Product Filter plugin.
Once the plugin is installed and activated, we need to create all of the the attributes that are going to be used to filter searches through our catalog. To do this, let’s go to Products > Attributes, in this page I’m going to create the color attribute, the process is the very same for any other attribute:
Once created, I need to add all of the elements that belong with a specific attribute, in this case it’s the colors for the various models:
Now let’s link each vehicle to the attribute or set of attributes we have created.
To do this let’s go to the edit product page and set the attributes:
We have just assigned attributes for all of our products, all we have left to do is create the filter we want (in this case a color filter).
Let’s go to the sidebar settings of the store, in Appareance > Widget and select the plugin widget:
As you can see I assigned a specific name to it, “Filter by color”, I picked the “Color” attribute we previously created and set up a “List” kind of of filter.
This last field allows you to show a filter like this:
In case I wanted to show colors directly in the filter, rather then the name, I should go for a “Color” kind of filter, which allows you to choose the colors for each part of the attribute:
Once created, this is what the filter is going to look like:
As you can see the color black is not displayed as there are no vehicles in that color, so you don’t have to worry about filters redirecting customers to blank pages.
And this last functions concludes our guide for the creation of a perfectly functional online car showroom! Now you are ready to claim your place on the internet and boost your sales using WooCommerce!