Hoverbot, WordPress & Woocommerce: The Build.

Hi Woocommerce, we are very proud to present to you today our website Hoverbot, build with WordPress & Woocommerce. We hope you will enjoy the tour, and of course, will invite us to the summit in Seattle. Let’s get started! 1- Hoverbot – What is this? Hoverbot is a french brand that selling Hoverboards & […]

Hi Woocommerce, we are very proud to present to you today our website Hoverbot, build with WordPress & Woocommerce. We hope you will enjoy the tour, and of course, will invite us to the summit in Seattle.
Let’s get started!

1- Hoverbot – What is this?

Hoverbot is a french brand that selling Hoverboards & related accessories, along with Segways and OneWheel (coming very soon!).
It is not our first try in the e-commerce world, and specially our first shot with the Hoverboard. We launched a network of websites in Europe, still running today, but we wanted to start with something new and premium. We wanted to give users the availability to feel the speed, the movements, while being on the website. Therefore, the design, which has been made in-house, took us approximatively a month to create, including the logo. And the development process along with the debugging took us approximatively a month too. This is how Hoverbot was created!

1.1- Foundations

We are using WP latest version, and updated recently to the latest version of Woocoommerce. At the time we started the developement, Woocommerce was at it’s 2.6 version, and by the time we released, Woocommerce was updated to 3.0.0! We needed to update all the templates then.
We are also using Flatsome theme, with a child version we customized (as you can probably see) to our wishes.

In a fast-pace environment, we needed to launch quickly and therefore, we explored numerous options other than Woocommerce. But the most easier and robust e-commerce solution for us was Woocommerce. We should also give some reward to Flatsome team, who has build a very complete and stable template, which allowed us to build Hoverbot the proper way.

Thus being said, let’s start with some explanations about how we built Hoverbot

2- The Header

With our previous experiences in the e-commerce, we knew what was the most important parts to put our focus on. Homepage, Product page, Checkout pages, and the Header.
Therefore, when we started to build Hoverbot, this was our planning : Header, Homepage, Product Page, and checkout.

So for the header, it’a very simple process. We designed it, and we changed the icon of the cart. We had two different state for the cart; empty and with products.
Because our cart was an image, we needed a simple if to make the magic works.

Then, to make the menu responsive, we did classic CSS, and along with the size of the screen, we got rid of icons, and less important elements. Sample:

Along with media queries for the other sizes, this is how we built the header.

3- Homepage

The homepage…. Were could we start to explain this? Because we wanted to build a very professional website, but also good looking, and we had to match the design requirements for the audience target. It was so tuff and hard to make something 100% responsive. So there are some javascript hard tricks, along with a lot of css, and classic building from the Theme Builder of Flatsome.
I’ll probably share the code where I made this part of the homepage.

The difficulty was the oblique images, with responsive issues that were coming along. So to make it 100% responsive, I couldn’t add it as a background image in the theme builder. So with some help of JS, I inserted the image in the HTML as an <img> element, with « srcset » tags, to make it responsive the proper way. And on mobile, I just change the images.

There are a lot more than this on the homepage, as how we changed the template for the product prices and buttons. Here is the sample of our content-product.php:

4 – Category page

Nothing really outstanding. we added content to the page, but we also created a nice trick for the last line of products. In fact, with our design, we found that it was really disturbing to have only one or two products on the last line, aligned with the others. Therefore, we decided to center the last line of products, in case there were not 3 products to show.

We used some JS to achieve this.

5 – Product Page

For the product page, we just customized it properly, so it can fit our needs. I’ll let you guys discover a product page so you can understand how far we went on customization. We suggest you to open it on mobile too, because we really wanted to achieve a « native-app » design, and therefore, it is a quite good looking.

6- Checkout page

Really classic, just some CSS changes to fit our design, and a very small implementation to add the product image on the checkout. We know, because of our data analysis, that checkout is working better with an image inserted in the checkout step.

Here is the code sample:

7- Optimization before going live.

For us, SEO is very important. It is one of our best canal of trafic acquisition. Thus, I invite you to check our website speed, the weight of our images, and of course, the semantic of the website. Everything has been made to fit Google needs. We even changed some things in Woocommerce, like <h3>, <h4> or <h5> that weren’t supposed to be here. Both on server and front, there was a huge optimization to make everything go smooth. Feel free to check here:

https://tools.pingdom.com/#!/b5tUgU/https://www.hoverbot.fr/

(Speed test location are closest to Europe because this is the closest to our audience, but even if you try from the US, it’s still good)

8- Some numbers about our Hoverboard Project

We launched a first website around August 2015 about the Hoverboard product. At this moment, the product didn’t have the impact and notoriety it has today. Therefore, it was a real challenge for us to start something on this market. Nevertheless, we tried, and it’s actually looking like a success for us.
Our first website was targeted to the French market, like Hoverbot. It is still live today. Also, we have launched a network of websites all among Europe.

Therefore, here is the list of the countries we we are operating:
– France, with 4 websites including Hoverbot.
– UK
– Germany
– Spain
– Italy
-Belgium

If needed, we will be very proud to provide our sales, revenues and transactions numbers, in private. We took Woocommerce to a big scale, and are very proud of it, so you should be proud of your work too!

9- Why we should win the Golden Ticket?

Very simple I guess. We believe we know what we are talking about. We are very young entrepreneurs, but we know our business, our knowledge, and especially, we are using Woocommerce on a daily basis, and we are loving it. We could suggest what knew to implement, what’s wrong and how to fix, and what should stay the same. We would be very happy to win the ticket, it would be a great reward for us, for our job, for all what we invest on Woocommerce, and we strongly believe that we can share some of our knowledge with others.

To resume, after more than 5000 thousands lines of custom code, we do believe Hoverbot should be the winner of the Golden Ticket!

Thanks for reading us,

The Hoverbot Team

hoverboard tout terrain