CREATING A CUSTOM SINGLE PRODUCT PAGE WITH ALL THE BELLS AND WHISTLES IN 10 DAYS
Usually, eCommerce projects like these take between 60 and 90 days to complete. However, with the COVID-19 crisis hitting clients worldwide, the need to sell online is becoming more evident. For ADV.1 Wheels, our longstanding client with whom we’ve been through thick and thin from 2016, their venture into online sales was always planned. However, the company produces and sells a premium forged wheel product who’s price goes well above $10,000 per set of wheels in some cases, thus negating the need for online sales. After all, you’re not going to cough up that much money for a custom set of wheels, then completely screw up your fitments. That’s how the high-end wheel game works.
But, unlike the highest level of wheel making possible, their recently revealed FLOWSpec flow formed wheel line is a bit different. Some will say perfect for selling online. Here’s a bit about their FLOWSpec line below.
ADV.1 flow forming process how flow-formed wheels are made and what makes them a strong alternative to forged wheels at a more affordable price point. Flow forming is an incremental metal-forming technique used to make wheels. With this technology, a disk is formed over a mandrel by one or more rollers using tremendous pressure and heat. The roller deforms the workpiece, forcing it against the mandrel. In turn, the metal is both axially lengthened and radially thinned at the same time. With this technique, the pressure exerted by the roller is highly localized and the material is incrementally formed. Flow forming subjects the metal material, where, thanks to heat & pressure applied to the wheel, the molecules of the aluminum are improved, creating a strong & lightweight wheel with characteristics similar to that of a forged wheel, but with a much lower price point. In turn, this makes flow formed wheels more affordable than their forged counterparts and stronger than cast wheels.
In a nutshell, this allows ADV.1 to produce some of their well-known designs, but in a more approachable pricing format. Naturally, you don’t have all the bells & whistles regarding widths and diameters, hardware options or a wide variety of finishes available for their premium wheels, but these still look darn good. Furthermore, ADV.1 has selected a wide range of ready-made fitments for some of the most popular middle and high-end cars. In turn, this makes them a perfect candidate to be sold online. And that’s where we step in.
PARTICULAR REQUIREMENTS FOR A RATHER QUICK PROJECT
Currently, ADV.1 has a really old theme running the site. Fully secure and 90% cleaned from deprecated coding, it still is an outdated version of a very popular theme. Furthermore, when the site was developed over 5 years ago, a mistake was made and the work was not done the proper way (with a child theme), but interventions into the actual main theme were done, negating any (easily done) updates. However, with all the work we’ve put into this project in the last two years, the theme functions well and with advanced ObjectCaching, minification, CDN (Content Delivery Network) and several security-oriented solutions, it’s a stable site. Nonetheless, doing any major changes and coding work still requires a lot of effort and time.
This theme was used for WooCommerce online sales only once, back in early 2019 for a special limited edition t-shirt, worn by the CEO of MW Company, made for the 2019 Gumball 3000 Rally, particularly for its Japanese stage. After that, WooCommerce was brought offline, as the site (in this state) was never meant to be utilized for an online store. However, times and things change and about 4 weeks ago, we were presented by a task to push online, direct to consumer sales for our client and that’s what we did.
In order to achieve this, we had to do extensive work to the theme’s functions, single product template, shop template, cart and checkout template pages. Additionally, a lot of work was done to add particular cache exceptions, both at our end, but also on WP Engine’s end (that’s what we use to host the website for this client), ensuring we avoid any pitfalls of a highly cached environment on a dynamically generated set of web pages – the actual online store. While some of the challenges were done easily, items like an outdated jQuery file, several main.js lines of code that we had to recode, combined with a bunch of particular items related to the outdated theme, all made this a rather challenging task.
CUSTOM CODED WOOCOMMERCE SINGLE PRODUCT PAGE
For ADV.1, there were a couple of particular requirements we had to take into account to make this project happen. First, we had to create a custom template for the single product page that reflects the styling of the rest of the website. For the project at hand, two versions of the single product page header were done, both reflect the design requirements of the clients to the letter.
In the end, the client went with the second version of the product page, removing the top banner image. And in our opinion, that cleans up the page substantially. In addition to that, the removal of the top banner image from this single WooCommerce product page also brought a lot more information above the fold, increasing the possible CTR (Click Through Rate) for this page as well.
The particular requirements here consist of the way the product is sold and how it’s shipped. First, the product is sold in sets, which required a bit of custom function coding work, where the prices are set per product category and displayed “PRICE PER SET” instead of the usual “PRICING”. While the client is only selling sets right now, in the future, there will certainly be a need to sell single products, which will necessitate us coding a “PRICE PER PRODUCT” solution to be displayed if and when a variation that contains only a single product is chosen.
In addition to that, these items pack in four different boxes. So we have installed and set up a plugin that allows for additional boxes to be added to each variation. Unfortunately, this only works by manually adding the boxes for each variation, so it took some time to complete. In addition to that, particular shipping options needed to be addressed within the FedEx shipping calculator, where particular account and list rates were used. In turn, the client can now accurately calculate shipping for both domestic U.S orders, as well as international ones.
For this website, the client uses the Avalara tax calculator. In turn, this allows them to fully be on point regarding particular sales tax requirements set forth by the respective states, paying attention to both economic nexus and economic threshold laws and regulations. Furthermore, the client can easily adjust the economic threshold for each respective state, ensuring sales tax begins to be calculated the minute they cross it, avoiding any issues with taxation overall.
The finishing items for this single product page contain the custom gallery, particular H2 titles, and subtitles, followed by a custom HTML coded second part of the page. This latter part uses a custom shortcode generated to allow us to display gallery, press photo, newborns or other items in select HTML pages. For this page, it uses the shortcode to display the press photos, but we will shortly follow it up with newborn gallery display as well. For those who aren’t familiar with the wheel world and ADV.1 in particular, the term “newborns” is used to describe wheels that have been freshly built, right off the factory floor.
FINAL NOTES FOR THIS PROJECT
As said on a few occasions in this blog post, this was a really time-sensitive project. Total work days for this project were about 10 days, with 14+ hour workdays being the norm. We’ve worked through two weekends and managed to add three separate ADV.1 FLOWSpec products with over 90 variations in total in that amount of time. As you can see, our webdev and marketing team is more than capable of creating such work in a short amount of time, but usually, if you want to keep the cost and errors down to a minimum, these projects should be done with about 30 days of time set aside, or if you require a bit more custom work like two-page configuration process and similar, it will take around 60-90 days to accomplish.
You can view the full completed page below and visit them at ADV5.0 FLOWSpec, ADV005 FLOWSpec and ADV08 FLOWSpec wheel pages. For any information regarding our work, please contact us right away.
