Case Study : Vital Health Foods

Written by Mark Forrester on September 10, 2013 Customer Stories.

hilton-mooreA fantastic case study of a WooThemes/WooCommerce installation for a very large and respected South African brand.

My name is Hilton Moore and I am a developer at kri8it; a South African web development and design agency based in George and Cape Town.

Recently one of our longstanding clients wanted to update and redesign their site and the attached online store to create one sleek and smart package. A while back we developed a large ecommerce solution built on WooCommerce; which we did our first case study on. We have implemented WooCommerce for a wide variety of sites and businesses. For us, it is an ideal online store solution.

Vital Health Foods

Vital Health Foods is one of South Africa’s oldest and most well respected brands in the health and wellness category. They still predominantly rely on traditional retail sales in stores but they have been interested in increasing sales online. The previous online store was based on a Magento platform. We wanted to integrate everything into a unified site that clearly conveyed the corporate identity and products. It was also important for it to be easy for users to navigate and purchase items.

The old Vital homepage.
The old Vital homepage.
The new Vital homepage, courtest of kri8it.
The new Vital homepage, courtesy of kri8it. Powered by a modified Canvas theme.

We needed to export all of the products and user details from the old Magento system and import them into a new WooCommerce enabled WordPress site. We also needed to revamp their online identity and encourage customers to purchase memberships to the Vital Club.

The new Vital WooCommerce powered shop.
The new Vital WooCommerce powered shop.

Customers who had Vital Club memberships would be entitled to product discounts for an entire year. This had to be applied throughout the store and was achieved with the use of the WooCommerce Groups plugin, WooCommerce Dynamic Pricing plugin and bit of custom coding. It also had to be future proof so that new items could be added to the store without a problem.

A users cart with the discount applied.
A users cart with the discount applied.

The site was built on a custom child theme for Canvas. For sheer customisability you cannot beat the power of Canvas. We used some custom hooks and filters to manipulate both WooCommerce and Canvas until we got the result we wanted.

Dynamic Pricing Plugin

The plugin works primarily on User Roles or Categories. To get our discount working correctly we needed to:

  1. Set up a User Role for customers who had bought memberships.
  2. Set up a product that adds users to a group for one calendar year when it is purchased (accomplished with the Groups Plugin).
  3. Setup the discount on particular categories for particular User Roles using the Advanced Category settings in the Dynamic Pricing plugin.
  4. Hook into the Groups plugin to assign or un-assign our new User Role to users either entering or leaving the group.

vital-code

Q&A

Vital tries to help people improve their lives and overall health by providing health foods and encouraging good lifestyle choices. They have several health and diet experts available to answer any health-related questions. This helps to promote the Vital brand overall and building their image as an authority on health and wellbeing.

We implemented a very nice question and answer system on the site whereby users could ask a question on the front end without needing to register as a member. After the question has been entered it creates a post in the admin area where a Vital Expert can enter their answer. The user who asked the question will be notified via email that their question has been answered.

Browsers can pose any question to the Vital Experts.
Browsers can pose any question to the Vital Experts.
Vital Experts can easily see questions and log their answers.
Vital Experts can easily see questions and log their answers.

We are also very happy with how the site menu turned out. We combined multiple WordPress Menus with the help of Ubermenu.

The Vital menu system.
The Vital menu system.

WooCommerce Plugins

We made use of the following plugins for the online store:

Working with Woo

We really enjoy using Canvas for the amount of work it saves when you have to develop a theme. The guys at Woo who built the framework have really done a fantastic job at providing a flexible and scalable base to build on. We think we used it to achieve a great result here.

It was great to have this opportunity to tell you about our experiences with WooCommerce. If you have any questions I am happy to answer them in the comments section below. You can see more of kri8it’s work and portfolio on our website.

Would you like to be featured on our blog? Share your experiences working with WordPress and our products and if we believe it will benefit our community we’ll publish it. Contact us.
cta-banner-10-product-page-v2_2x

8 Responses

  1. allmyhoney
    September 10, 2013 at 12:13 pm #

    Very nice job here, super work. Is the Q&A a custom piece of work or the integration of an existing plugin if you dont mind me asking?

    • hiltonmoore
      September 10, 2013 at 1:46 pm #

      Hey there, thank you for the compliment 🙂

      It is a custom piece of code that just hooks into the save_post to trigger emails to the ladies at Vital to let them know there is a new question, and then to the asker of the question when they have answered it. Along with some custom fields to store some extra information of course 🙂

      Hope that helps 🙂

  2. psejersen
    September 10, 2013 at 8:41 pm #

    Looks absolutely great!

    You mention that you are using two Ubermenus – one for the header and one for the footer. I thought you could only use one Ubermenu on a page… how did you achieve that?

    • hiltonmoore
      September 11, 2013 at 9:25 am #

      Hey 🙂

      It is actuall quite a few UberMenu’s. To get my desired effect what I ended up doing was creating a menu for the top links, and then a separate menu for each of the big dropdowns. I did this so that it would be easier to maintain in the admin area for the people running the site.

      I then programmatically dumped out all the menus with the following syntax:

      ‘TopAboutMenu’, ‘walker’ => new UberMenuWalker)); ?>

      That allowed me to overwrite the Ubermenu’s limitations on the number of menu’s allowed on the site 🙂

      So there are quite a few Ubermenu’s going on there.

      Hope that helps 🙂

      • hiltonmoore
        September 11, 2013 at 9:27 am #

        I see that broke a bit, lets try again ;(

        Basically, when using the wp nav menu function to dump out your menu, you can specify which menu walker to use.

        So you can use the UberMenuWalker to put out as many as you like 🙂

  3. Raquel
    September 11, 2013 at 3:12 pm #

    Hilton did an AMAZING job here. Not only did the site come out better than we expected, but it he has made it so easy to manage in the backend.

    I think it’s safe to say that everything runs pretty smoothly, and in comparison to what we had before, this is the most fantastic thing about Vital’s new website.

    Thank you to the whole Kri8it team… you guys are truly ROCKSTARS!

    • Clint Perring
      September 12, 2013 at 11:05 am #

      Wow! Very kind words from an awesome client. Truth is we can only really do great work when clients approach us with the freedom to do good work. Vital Health Foods are just such a client and we value our longstanding relationship with them. Thanks Raquel and the team for letting us work on such amazing projects with you. We look forward to many more.

    • Ryan Ray
      September 12, 2013 at 5:19 pm #

      So great to hear so, the biggest thing being that it’s easy to manage! 😀