Hotflips wooCommerce WordPress theme

May 2018 - June 2018
Goals
  • Create a fresh WordPress theme without losing any of the old data and category structures
  • Implement a new design on time and budget

Project Overview

Hotflips has been around for a while, probably close to the 10 year mark. Their Drupal site got the job done, but not so elegantly. It was outdated, slow to load, and most importantly: not so user friendly. After years of user requests, they decided to give their shop a refresh. The technology of choice was WordPress with wooCommerce due to its ease of use and flexibility.

My job was to implement the new design from scratch while keeping the old product data intact.

Process

The overall process was typical, aside from the data transfer part. I haven’t worked with wooCommerce before at this point in time, so I wasn’t 100% sure how to go about transferring the data.

The designs came from sketch files, so I did my regular process which involves coding and styling one page at a time based on the design. Once all of the views are done, I go through and make sure they work across all browsers and all of the desired features are working. Once the main designs were finished, the next important step was making sure the product price filters were in place.

AJAX price filters
AJAX price filtering for wooCommerce/WP isn’t too difficult, but it did require some tweaking and testing. Sometimes, custom PHP and JavaScript is needed to get things to work. In this case, I didn’t have to intervene too much, so this process was fairly straightforward thanks to great WordPress plugins.

Transferring product data
The client wanted as much price data transferred as possible. Transferring this data by hand wasn’t feasible, so we needed to automate the process. Many WordPress plugins exist, but there weren’t many that could transfer data the way we wanted. We thought about writing a custom script to do it, but we eventually found something that worked for us and was able to use a plugin after all.

Overall, the project ended up being just about on budget and was done on time.

Technologies Used

This project was done on the sage 9 starter theme, which includes Webpack, Laravel Blade, SCSS, and JS compilation out of the box. This starter theme ended up working great for wooCommerce views.

Want to check out some code demos?

Check out code samples written in JavaScript, React, Node, and more

Demo 1
Defining Reusable Column Extends with SCSS

Quick Note: The atSmall type mixins are just basic media queries. Since these kinds of layouts are common, they also need to be overwritable if I want to change the spacing. Generally, the ‘default’ spacing is defined in the extend/mixins. Example Use Cases To get the layout working, you only need a container class and […]

Demo 2
Discord Bot: Reddit API Ask Feature

The Purpose Some Discord bots have a feature where you can “chat” with the bot(i.e: Cleverbot integrations). I decided to take a spin on this concept and utilize the Reddit API to answer common questions. A user from the server asks a question using the b!ask command, then the bot gives a random answer from […]

Demo 3
React.js Modal Using The Hooks API

Modals are a classic piece of application functionality, made even easier with libraries like React. You could go with a library, but you can often make your own with less than 100 lines of code. Using the hooks API, you don’t even need a class based approach. This example is going full functional! Defining The […]

Need something? Let's get in touch