GM ME Webstore

A corporate merchandising company needed their eCommerce website redesigned and migrated to WooCommerce with a range of new features and considerations.

PHP, WordPress, WooCommerce, HTML, CSS, JQuery

Design

The client’s former site struggled to deliver easy-to-read order information and order total breakdowns. The new design addressed the following areas:

Goals & Objectives

The client presented my team with a number of overall goals for the new site’s design. The new site had to introduce the following new features:

  • Fully responsive design
  • Complete order breakdown display to show subtotal, shipping, fees, and discounts
  • Ability for customers to manage an account with store credit
  • Ability to enter redemption codes into account
  • Ability to check account balance
  • Ability to limit redemption code use by user
  • Conditional fees based on location

Challenges

With the desired platform being WooCommerce, some of the features were not readily available by default. I extended plugins and functions to accommodate the request, including:

  • Front-end manipulation of coupon metadata to associate a redemption code to a user on initial submission
  • Front-end ability to access account balances
  • Ability to apply predefined redemption codes in a user-friendly manner
  • Creating conditional fees on a specific amount
  • Rewriting WooCommerce logic to apply conditional fees
  • Disabling coupon use after maximum discount has been reached

Order total breakdown before & after (mobile)

Cart display desktop & mobile

Discount UI

One of the features that had to be heavily extended was WooCommerce’s coupon handling and UI. I added and designed the following features to the new product:

My Account page with associated redemption codes and their balances. Dropdown menu widget to easily view and check codes/balances from anywhere on the site.

Custom JQuery implemented to display redemption codes and balances when user focuses in the coupon code input on multiple pages. Ability to click on a code to populate the coupon field without typing or copy/pasting.

Conclusion:

The final product was a user-friendly eCommerce store with powerful backend capabilities. I had to rely on WooCommerce’s hooks and WordPress’ function structure to add new capabilities, furthering my knowledge on WP and WC’s codebase.

Tools:

  • WordPress
  • WooCommerce
  • PHP
  • CSS
  • JQuery
  • HTML

Date:
Start: Dec 2017
End: Apr 2018

Visit