Miss T&G

– Site build using WordPress and Divi.
– Shopping and payment interface using WooCommerce.
– Custom CSS.

THE CHALLENGE – Woo some commerce

The Miss T&G template laid out a template for a professional quality e-commerce site selling men and women’s clothing online. My task was to take this design and turn it into reality.

The end goal

THE METHOD – Tailor-made

The visual style of Miss T&G included a fair amount of detailed styling. In order to bring these ideas to life and remain faithful to the design, I decided on using WordPress and the Divi plugin to build the site.

Fancy schmancy

Other parts of the design were achieved using custom CSS code.

Old faithful

One of my main goals with this project was to create a fully-functioning e-commerce site where items could be selected and bought easily.

I chose to use WooCommerce to create an online shop for Miss T&G. This highly customizable plugin not only allowed me to build a shopping basket and payment system but also display items in a way that was consistent with the site’s overall design theme.

Good times with the WooCommerce plugin

Overall, WooCommerce proved to be a powerful and flexible solution to building an online shop. However, I quickly learned to make sure all the files relevant to individual catalogue items were labelled correctly and saved together in folders to make it easier to input.

Also, when inputting the data for each item, I found it helpful to adopt a methodical approach that you repeat for each individual item. This ensures mistakes are kept to a minimum and by working back through your routine you can easily identify where you went wrong if something is missing.

THE RESULT – Dressed to impress

Through using Divi and custom CSS, I was able to accurately replicate the details of the original design and make it fully responsive on a number of different display sizes.

The final result

But Miss T&G isn’t just a pretty face. The use of the WooCommerce plugin allowed me to build a full set of e-commerce features, like a shopping basket, checkout and payment options. I was able to this while staying true to the look and feel of the design.

Shop ’til you drop

The experience I gained from building a fully-functioning e-commerce site has been invaluable. I now feel confident enough to take on projects that are similar to this and despite the time and effort they take to build, the results certainly seem worth it.