We snagged this project from one of our current clients, Product GoGo. Their initial vision was for this WordPress website to be a re-design of an older product website they had built for the pet patio potties they manufacture.

The old design was…well, just that, old. We decided to update it with a new look and a new flow for the front page. They also needed e-commerce incorporated into it.

WordPress Website Design

Coming up with the design was pretty easy. They wanted to stick with the original color scheme and logo.

 

We offered them a number of premium themes to choose from, and they ended up going with the Foxy WordPress theme from Elegant Themes.

After the theme was setup, and we had established a test site on our server, I went to work on the design.

For the background, I used a graphic similar to the one from the old site but added some subtle design enhancements to make it appear 3 dimensional. I also added a light gradient fade from light to dark to carry the eye down through the design.

The client already liked the header menu design so we left that alone.  As for the header itself, I ended up adding a number of CSS elements combined with a pattern to give it a new look.

doggy solutions header

We also used a transparent PNG file of a cartoon dog paw in several other areas around the website. Some of the graphics were also provided by Product GoGo, specifically the ads in the slider.

We also altered the design of the header text background and added a sleek purple gradient fade to it using CSS.

WordPress Website Functions

The functions for this website were a bit tricky.

Specifically, Product GoGo wanted a cart graphic at the very top right edge of the header that tells a customer how many items are in his shopping cart. Since this wasn’t native to Foxy, we ended up having to put together the code to generate it. This required customizing the header file with PHP code as well as adding a function to show the cart. Later on, I had to edit the cart function further to accommodate the Woocommerce product bundle extension.

As for the rest, we were asked to add other tweaks to the e-commerce side of the website. For example, adding product notes at the checkout using Woocommerce hooks.

Conclusion & Optimization Report

This project was one of our first real advanced WordPress websites. Working with the guys at Product GoGo was a lot of fun and though we’re still in the process of testing certain parts of the e-commerce website (as well as a specialized dog potty patio survey), things are proceeding smoothly.

I really liked having some control in the design of it and being able to build on the original website. Product GoGo was happy with the way it turned out as well.

The optimization aspect of the project was a bit trial-some. We ended up using the Gonzales WordPress plugin to reduce a lot of the scripts running on the front page. I had to do a lot of manual work with W3 Total Cache as well to get the page speed down to a decent level. Here’s the Gtmetrix report:

GTmetrix-report-www.doggysolutions.com-20160203T090349-uLbdOunt

« | »