In my role as Designer and Developer at Cucumber Marketing, I designed and developed a fresh, new ecommerce website for Yoga Hive. The site uses WordPress as a CMS and uses the WooCommerce plugin to create a full, online shop. The site also features an online community of members and contributors.
This was a redesign for an existing eCommerce site with over 340 products. The site had previously been built using Magento and had become a hassle to maintain. We decided to move the site over to WordPress with a WooCommerce store so that it would be easy to manage going forward. We also wanted to give it a fresh new look. As the sole designer/developer on the project I worked with my team to determine the goals of the site and create a solid content strategy. I created wireframes based on these goals and after some refinements finalized two design choices. With our chosen design in hand (a fun, vibrant, colourful one) I set off to code our custom WordPress theme.
I started the theme development with underscores to set up the WordPress basics, then added in our own styling and developed custom page templates. Since ecommerce is the main focus of the site I quickly installed WooCommerce, imported some testing data and started getting the shop up and running.
For additional styling control I disabled the default styles just prior to the launch. I had certainly taken for granted the advantages of using WooCommerce and how ‘out-of-the-box’ ready it is. For many cases it would be ready to go just after activating the plugin, however in this case we wanted to really express the brand and add additional functionality to the product pages so extra customization was needed.
Here are some of the customizations I made to the product page:
Since there were a number of products on the site already I used an automated program to transfer the data. For the most part this was very successful, however some products were missing their sale prices and some products with no inventory were displaying as ‘O left in stock’.
This project was a big learning experience. It provided a lot of opportunity to try new things, which also meant facing new challenges.
The present state of the site may have been modified from it’s original design and as such may no longer represent the original concepts. Shown above is the site at project completion.