Hotflips wooCommerce WordPress theme
May 2018 - June 2018
- Create a fresh WordPress theme without losing any of the old data and category structures
- Implement custom pages in a timely manner
- Transfer thousands of products in Drupal to WordPress
Hotflips has been around for over 10 years. 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.
See more of hotflips
The overall process was typical, aside from the data transfer part. The biggest challenge was transferring the existing data from their old Drupal site.
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
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.
Want to check out some code demos?
Converting jQuery Blog Post Component To Vanilla JS
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 […]