Category Archives: WooCommerce

Why I needed a macro lens

Joe’s Postcards, a WooCommerce Site

After building a big time website on the Magento eCommerce platform, I wanted to build a smaller eCommerce site using a platform suited more for an individual or small business. After researching the platforms that were available, I determined that WooCommerce had the best combination of costs and features. WooCommerce is a plugin for WordPress, a content management system that I have worked on in the past. My intention for this project wasn’t to build another WordPress website. I was hoping to get some experience with a new technology, but with such a large percentage of websites running WordPress I was willing to go through the development process again.

Since this website would not be getting massive amounts of traffic, a small hosting plan such as Digital Ocean’s $5 per month for 512MB RAM and 20GB SSD is a reasonable option. I added it to my hosting account and got to installing the LAMP stack of Linux, the Apache HTTP Server, the MySQL relational database management system, and the PHP programming language. Once that was setup I installed WordPress. WordPress is a free and open source content management system that many people use to create blogs, although it is capable of making some great websites. After WordPress was installed I installed the WooCommerce plugin. At this point I pretty much had an eCommerce store minus all of the content and styling.

The website I would be building was a website for my dad to sell postcards on. The site would be very simple. There would be a home page to welcome the user, a store, cart, checkout, account login, and a contact page. The simplicity was great but it left me with a single opportunity to translate the postcard onto the digital screen in a way that was personal. I tried to accomplish this in several different ways, the first being to open up the website with a lot of whitespace.

Although the stock WooCommerce theme is usable, there are many changes that I wanted to make to the design. I debated whether to completely develop my own theme or use one of the many themes that were already available, several of which were free. I thought the Klasik framework theme and the Mystile theme were both a good starting point. I liked the Mystile theme, which can be seen below. I was looking for a theme that was open and had a lot of whitespace and had a responsive design that would adapt to tablets and cell phones.

Stock Mystile WooCommerce theme
Stock Mystile WooCommerce theme

I ended up choosing the Klasik framework because I thought it would allow me to make the fewest changes while accomplishing the look that I was going for. I installed the theme and got to work customizing the theme. This is what the Klasik framework looks like out of the box.

Stock Klasik WooCommerce framework
Stock Klasik WooCommerce framework

I created a logo. It’s a postcard that has “Joe’s postcards” in a script font called PlumBAL. The green stamp in the upper right corner is a nod to the one-cent Benjamin Franklin stamp from the Series of 1902 (Second Bureau Issue) stamps. While I was looking through the postcards for inspiration for the design of the website, I noticed this green Ben Franklin stamp appear many times. The date of this stamp also coincides with the golden age of postcards, the time during the early 1900’s that many post card collectors agree is the age when the best and most desirable post cards were created. It’s definitely a stretch that anyone unfamiliar with postcards will ever be able to notice the meaning of this color green for the stamp, but hopefully some experienced post card collectors may get the reference.

Series of 1902, Second Bureau Issue stamps
Series of 1902, Second Bureau Issue stamps

While I was going through the post cards I realized that I wanted to represent them on the screen in a way that captured depth and texture and evoked emotion from people who might not be familiar with post cards. To me post cards are very personal. They are pieces of paper that contain lovely little messages between loved ones, often those traveling to new places and having some of the greatest times of their lives. When picking out post cards to photograph for the site I was equally drawn to the handwritten sides as I was the sides with pictures. Postcards are intimate pieces of paper and ink and I wanted to convey that on the screen. I realized I would need an appropriate camera lens to capture this and I purchased a Tamron 90mm f/2.8 macro lens for a sweet deal.

Why I needed a macro lens
Why I needed a macro lens

The images on post cards can evoke certain emotions based on the location they are from or the moment they celebrate. There are many good post cards for the holidays so I wanted to have a slider on the main page that had appropriate holiday images for the holidays. I set up a slider and used some PHP to automatically change the images based on what season it was. Pumpkins for Thanksgiving, soldiers for Veteran’s Day, turkeys for Thanksgiving, and neutral images for when neither holiday was close.

Holiday themed home page
Holiday themed home page

The storefront that wanted for the post cards had to include some detail about the image and the image of the card itself. I thought about several ways to display this. Postcards are very visual so I considered making the store to be dominantly visual and only include text details after hovering over the images. I decided against this because I wanted to give the store a more standard look. I didn’t want anyone to get frustrated with an unfamiliar layout and abandon the shopping page. The right side of the shop has a product category list and a search box that the shopper can use to find specific cards. There is also a sorter at the top so that the shopper can sort by newest card or price.

Familiar store front
Familiar store front

Once a user clicks on an item, a larger image is visible along with a longer description.

Cool cat postcard
Cool cat postcard

The image can be clicked on again for a full screen view to show high detail, which is something that is necessary for a lot of buyers of post cards. The product categories and search bar are still available from this page. A related products section displays below the item.

Meow!
Meow!

The rest of the site is basic and simple. The cart and checkout are easy to use and standard as to what you might see on many other sites.

Checkout page
Checkout page

The shopper has an option of creating an account with the site. If the shopper does sign up for an account then they will be able to login to check order status and set addresses for faster payment in future transactions. A contact page is very simple. There is a form that the shopper can fill out to send an email to the owner of the site.

Contact page
Contact page

Emails are automatically sent to buyers throughout the order process via a simple email server and settings in WooCommerce. Payment is accepted via credit card or PayPal via the PayPal payment gateway.

There were large differences between building an eCommerce site on Magento and WordPress WooCommerce. Magento takes a lot longer, is more programming intensive, a lot more money to develop and maintain, but it provides much more flexibility and power for selling online. Still the WooCommerce plug in has enough power to create a beautiful site that is more than capable for an individual to small business to sell product through. Companies such as Harley Davidson, New Balance, Cosmopolitan, and Entrepreneur all use WooCommerce to sell their products online. There are stories of businesses running tens or hundreds of thousands of products on WooCommerce, of course on the right hardware to manage that storage and bandwidth. WooCommerce might be fast, cheap, and “only a WordPress plug-in” but it is plenty capable and often suitable for many businesses that decide to use a much more expensive and complex platform such as Magento.

You can check out the final website at Joe’s Postcards.