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.

6 thoughts on “Joe’s Postcards, a WooCommerce Site”

    1. Thanks.

      I would say it took between two and three weeks of working on it half to full days. I have worked with WordPress before so I was used to the process of setting up a LAMP stack and installing WordPress. WooCommerce really only is a plugin which is incredibly simple to install. I’ve installed and modified themes before so that wasn’t too difficult although it was time consuming to get the design exactly as I wanted it. If I were to break it down then it might have looked something like this.

      Day 1: Install and configure LAMP
      Day 2: Setup and configure WordPress
      Day 3: Setup and configure WooCommerce
      Day 4: Start looking at postcards and determine best design for site
      Day 5: Order camera lens, decide on a theme, design logo
      Day 6 – 8: Install theme, customize theme and CSS
      Day 9 – 10: Take 100 pictures to use for various holidays and some sample store listings
      Day 11: Edit pictures
      Day 12 – 13: Further customize theme, add content
      Day 14 – 15: Setup and test automatic email (had some problems with email going to junk, etc.)
      Day 15 – 16: Setup and test payment gateway
      Day 17 – 18: Testing on different devices and browsers
      Day 19: Change DNS settings and pass access to end user

      That’s a rough estimate. I ran into some problems that I eventually solved. I could have done things much faster and I could set up a similar site in the future in a much shorter period of time, depending on whether the user provides content or if I have to create it myself. As for future steps for the site I really should optimize a lot of the site to reduce loading time, etc. but for the moment it is functional and I am happy with it.

      If you are looking to make a similar site and need some help then let me know. If you want something similar to mine then I can send you my customized theme which will get you 90% there design-wise and save you a ton of time. Best of luck.

      1. Ok. When you were setting up the server did you set up postfix/email on the server? Or is there a way around that?

        I am actually trying to set up a site similar to this and would be very appreciative if you could send me the customized theme (kyle@misadventuresinbusiness). I’ve been trying to make the changes myself but am having a rough time. Largely because I’m quite new.

        How did this setup with wordpress/woocommerce compare to magneto? Better? Worse? More or less time?

        Thanks.

        1. Yes, installing something like postfix is necessary for sending out the automated emails for woocommerce. I chose to use exim, but postfix would be just fine. If you don’t want to install a mail server then you can look into a company that handles email such as SendGrid. Email hosting companies offer free plans for a small number of emails per month, which may be able to work for very small traffic. Another advantage to using a company like SendGrid is that their email won’t go to junk, it won’t get lost, etc. where as with your own email server you have to set it up and then manage it.

          I’ll send over the theme later tonight. In order to use my customized theme you first have to install the Klasik Framework (http://www.klasikthemes.com/framework/). I would recommend just installing this yourself and playing around with it. After you install this theme then you can to create a child theme and from that you would use the customized CSS from my theme.

          The setup time for WooCommerce (LAMP, WordPress, WooCommerce) and the setup time for Magento (LAMP, Magento) are both very fast and take a couple hours to a full day. Adding a theme to either is fast once you figure out which theme you want.

          The big difference in time comes from changing all of the settings that are available for WooCommerce and Magento. WooCommerce might have 50 options to select, so you can really get a usable site running very quickly. Magento has thousands of settings that you have to go through. Even loading a product may have hundreds of potential fields that you can choose to fill out.

          Another big difference in time comes from customization. WooCommerce sits on WordPress so you can be sure that someone had your problem and there is a plugin (I try to avoid these but other people love them) that you can download to fix your issue or there is a forum with the answer on it that is understandable for someone without a strong programming background. There does not have to be as much programming with WooCommerce. Magento has a smaller development community, less plugins available, and often you have to figure things out yourself and go in and change PHP to get your website to work as you want. WooCommerce is much faster and easier, but Magento is potentially more powerful.

          I would suggest WooCommerce to most individuals and small to medium businesses. You have to be able to justify how using the power and customization of Magento is critical to your business model. With WooCommerce you can build the site and then get back to focusing on your product or service, spending time to update new products, prices, etc. With Magento you are always changing your site. Magento becomes part of your every day business, and it should, since you are choosing to make the commitment and acknowledge ecommerce as the most important part of your business.

  1. Hi Joe! Thank you for the great article! I’m about to launch a website selling postcards with notes from each particular customer. I feel that people im my country tired of SMS and chats and after a research I realized that there is a certain need of a service like that.
    There is no doubt I will be using WooCommerce. I have a certain experience selling wine online and I would like to challenge myself in a slightly different area.
    What would be your adivse on choosing a woocommerce theme? I’ve read about your choice, are these 2 themes still on top of your list?
    Is there any way to make people type their text that we will then print at the back of the card? If such a thing doesnt exist in WordPress, is there any way to order a customization?
    Thank you for your time!
    Have a nice week

    1. I would just Google around for “WooCommerce theme” and look and find one that has a similar style to the site you envision. From there you can make all of the custom CSS changes to get your site looking exactly like you would want.

      I have not looked at Woocommerce themes since creating this site three years ago. The Klasik theme, in addition to everything else discussed in this post, is still performing well. I can still recommend this theme, but I would first Google around and see what has been added over the years.

      There might be some sort of plug-in in WordPress for the feature of a user adding text somewhere, but I don’t know of any off the top of my head. This sort of a feature would be reasonably easy to implement in PHP if you have a light understanding of programming. It’s a very common thing for someone to want to submit text on a website, and to be honest I would write this code myself instead of download a plug-in to accomplish the same. You could probably find a buddy with some knowledge to help you add that feature if you can’t do it yourself.

      Good luck on the site!

Leave a Reply

Your email address will not be published. Required fields are marked *