Godaddy Shopping Cart – Case Study: Moving a Site from HTML to WordPress
WIWA is a German firm and main producer of airless spray portray models, plus fluid dealing with, materials extrusion, and injection programs. WIWA USA is a North American Master WIWA distributor working within the United States, Canada, and Mexico.
They’ve been a shopper for simply a few years shy of a decade now, and their web site has modified fairly a bit through the years.
In this text, I’ll be going over the numerous modifications concerned with shifting their web site from static HTML to WordPress — a dynamic interactive instrument to be utilized by their distributors and other people occupied with WIWA merchandise in North America.
Table of Contents
Scoping out the redesign
When the chance to work on the WIWA web site was introduced to me, they have been primarily occupied with a redesign to deliver the look of the web site into the then present period of net design. Being that it was a static HTML web site, ideally it could be transformed to a CMS platform.
I felt WordPress, which had beforehand been a extremely revered running a blog platform, had proved itself as a nice full-on CMS.
That being mentioned, WIWA USA was overpaying fairly a bit for his or her internet hosting and growth providers. The web site was moved to a GoDaddy internet hosting plan, which actually helped to pace issues up on their web site. The web site’s area on the time was additionally moved to GoDaddy servers the place it sits to today.
Having some expertise in web optimization and web site optimization typically supplied the perception wanted to convert a static HTML web site to a dynamic CMS platform — WordPress on this case. It wasn’t sufficient to simply copy the outdated pages to newly created pages on WordPress, since this web site was already listed and getting visitors.
Not solely did every web page want to be created in WordPress, however every of the outdated pages wanted a 301 everlasting redirect to their WordPress variations. It was a little bit of a grind, however we received it executed and the WIWA USA web site was and is prepared for future net growth.
A brand new look & extra performance
Having the web site transformed from HTML to WordPress unlocked a ton of highly effective options. We didn’t simply replace the design however added highly effective performance as effectively. One of the primary duties on the checklist after the preliminary conversion was language translation. Being WIWA is a multinational firm, they wanted a manner for guests to simply translate the English model of the positioning into their very own language.
I can’t actually take credit score for this because it was a easy plugin, and one they’re utilizing to today. All I had to do was set it up, however it was one of many first main modifications that wanted to be handled. It actually was set it and overlook it.
Having ready-to-install plugins out there at a whim to improve a web site’s performance is likely one of the causes I selected WordPress, and I believe the interpretation plugin is a nice illustration in observe.
There have been different challenges alongside the way in which, some proper from the beginning and others years later. I’ll go over the wants and options of among the most notable options that remodeled this once-static HTML web site into a highly effective product and assist portal for WIWA distributors in North America.
Digital product catalog
WooCommerce was a key characteristic used to rework static product pages into a full-on digital catalog. While they might begin promoting their merchandise from a catalog, they like to merely showcase merchandise at this level.
Creating a digital catalog was fairly easy. If we simply depart off the worth, there’s nothing to add to the cart, so no button for that perform is created. Still, different options of WooCommerce can be found — comparable to product search, filters, classes, tags, attributes, and absolutely anything else you’ll sometimes want for an internet retailer.
There’s simply no precise promoting.
This methodology can also be considerably future proof since in the event that they determined to begin promoting all the pieces is already in place aside from worth and a few transport particulars.
Search is a vital characteristic for the WIWA USA web site. A elements seek for tech assist was carried out early on, adopted by a distributor map with search. After a newer redesign (the second since I began engaged on it) we transformed their coaching movies, brochures, manuals, and product movies into a searchable format.
I’ll clarify how and why we did that in additional element later on this article.
Integrated elements search
Parts search was one other essential characteristic that wanted to be carried out. This got here with a distinctive set of challenges, and to be trustworthy it took a few tries to get this one proper. One drawback is a half quantity wanted to be matched up with a PDF diagram.
There have been tons of of PDF recordsdata that wanted to be uploaded to the internet hosting account then made searchable. A static web page itemizing all the recordsdata simply wasn’t going to work right here. The concept of somebody trying by a checklist of tons of of recordsdata was merely impractical.
Search was the one answer.
My first thought was to use a plugin. I attempted a number of, however every had their very own terminable shortcomings. As typically occurs in net growth when a answer doesn’t exist already, it’s up to you to create one.
So, as an alternative of utilizing and configuring a plugin I had to roll up my sleeves, do a little analysis and begin scripting.
As an apart, I don’t assume most net builders merely know the way to write a explicit script willy-nilly off the highest of their heads to resolve a drawback except it’s “hello world,” or one thing of that nature.
I believe the principle power of being a good net developer isn’t essentially simply realizing all the pieces instantaneously. It is realizing how to ask the query, and the way to implement the reply.
Now, a programmer would possibly have the ability to rapidly whip a script into existence since that’s the vast majority of what they do. Web builders however are a type of jack of all trades. We do design, coding/scripting, databasing, and extra.
Few folks simply “know” all these items.
The level is that this: Don’t let not realizing a factor cease you. Our job as net builders is just to uncover and implement the best answer. We won’t all the time get it proper on the primary strive, however persistence is how we evolve to develop into nice at what we do in any facet of life.
What I settled on on this case was a customized search devoted to looking out by PDF recordsdata hosted on the server. It was difficult, as a result of WordPress doesn’t search outdoors of the database by default.
Since the PDF recordsdata have been merely uploaded and never hooked up to pages or posts they weren’t referenced within the database. To compound the difficulty, as soon as I had the customized search working, the outcomes weren’t displayed inside the WordPress templating system.
This meant I had to create one other script that referred to as the WordPress templating system for the outcomes web page.
Once completed, this labored effectively for a number of years. Eventually, somebody developed a plugin that allowed recordsdata to be uploaded then listed by the database — which is how the elements search works at present. This additionally allowed for elements to now be searched utilizing the principle WordPress search perform with simply a couple of minor tweaks.
Moving the distributor map from HTML to WordPress
Being that WIWA USA is a grasp distributor, it is sensible that they’d checklist the opposite distributors on their web site. WIWA USA at the moment sits at primary in a Google seek for the model identify “WIWA,” even above their father or mother firm.
At least for US-based searches. This is essential to point out, as a result of the distributor map makes it attainable for contractors to discover their closest WIWA tools distributor.
When researching one of the simplest ways to implement this characteristic, I rapidly discovered no plugins existed particularly for this type of implementation. I did, nevertheless, discover a plugin that might do most of what we would have liked. With simply a few minor workarounds I used to be ready to bend the desire of this plugin to do my bidding.
To be truthful, the plugin used was a paid plugin, and the developer has since added the performance that might have made this work “out of the box.”
While this plugin met the necessity for a few years, the listings weren’t searchable from the principle WordPress search. An individual had to really click on the hyperlink to the distributor map and use a number of filters to discover their closest distributor.
This was good, however for completeness the characteristic was up to date utilizing a totally different plugin — one that’s able to retrieving one’s location with the press of a button and displaying a map with markers and their listings inside a specified radius.
This was achieved by creating customized put up varieties then geotagging the put up.
Creating a put up for every distributor meant they every received their very own web page as an alternative of simply inclusion in a checklist. Since they’re customized put up varieties it additionally means they are often included in the principle WordPress search features. If a contractor is aware of the identify of a distributor they will simply sort the identify in the principle search to discover that itemizing.
The distributor map is such an integral characteristic of the WIWA USA web site expertise that it’s search type is positioned on the house web page. It options the flexibility to auto detect location, search inside a radius, and to filter outcomes to solely the United States, Canada or Mexico.
Individual posts for one-off performance
Training movies, brochures, manuals, and product movies all shared a frequent trait. For a number of years, every sort of documentation had its personal web page consisting of a grid of static content material. They have been mainly arrange similar to the unique HTML pages with some design modifications.
While they seemed nicer there have been a few shortcomings.
In the early years this labored OK, however as extra content material was added over time it started to gradual the pages down. While the pages themselves may very well be discovered through WordPress search, the person gadgets couldn’t be.
It grew to become clear that having every merchandise individually searchable could be of nice profit. For instance, there is perhaps a single product that had a product catalogue itemizing, a brochure, a guide or two, and a number of other coaching movies.
Wouldn’t or not it’s good if a person may merely sort within the product identify or mannequin and be introduced with all the content material out there for that product?
Darn Skippy, it could!
Not solely would this make all of that content material simpler to discover, however pace up the archive pages as effectively.
One of one of the best examples of that is the product movies which are literally hosted on YouTube. Without stepping into a ton of technical element, video snippets/embeds have to load individually, which isn’t too unhealthy whether it is simply a single video.
Add a number of movies on a single web page and issues can begin getting a little furry with load instances.
The answer was to create particular person posts for every video. Some WordPress themes present put up codecs, and on this case a video put up would output a thumbnail for the video within the put up archives as an alternative of a video snippet.
This makes the put up archives and indexes load a lot quicker since we’re now working with photographs within the type of thumbnails as an alternative of video embeds.
Similarly the product brochures and manuals, that are all in PDF format, had a grid of photographs from the PDF recordsdata all organized in a grid, and all on a single web page. By changing every of these to their very own put up, we at the moment are coping with thumbnails for the archive pages as an alternative of normal sized photographs — which helps with load instances.
There’s additionally the additional benefit of utilizing classes which all have their very own particular person archives as an alternative of cramming all the pieces into a single web page. Again, serving to with load instances and general group.
Closing ideas on shifting a web site from HTML to WordPress
This web site had a few different technical challenges, however what I’ve highlighted listed here are the bread and butter of the operation. Many of the concepts WIWA got here up with I wasn’t certain would really be attainable.
At least for me, being a one-man operation.
What I’ve realized is “let me take a look” will get you off the hook once you’re unsure. You can’t let the worry of failure cease you from making an attempt on this trade. In 2021, budding builders have it fairly good compared to after I began.
There is simply an awesome quantity of data and assets freely out there for net builders on-line as of late.
What I discovered after getting onboard with WordPress is that realizing these items simply made me a higher developer.
It helped me flip this static web site into one thing I believe, and I hope WIWA thinks is really nice. Being ready to one-click-install a WordPress web site is one factor. Being ready to manipulate WordPress, plugins, kinds, themes, and features is a completely totally different beast.
Yes, anybody can do it, however with some persistence and ingenuity you may flip a good web site into a nice web site.
Godaddy Shopping Cart – Case Study: Moving a Site from HTML to WordPress