Case Study: Developing the Cornforth Wilderness Photography Website

Merrill Mayer runs a Seattle based website development company called Kool Kat Web Designs. In this guest post she writes of the recent work conducted for a photographer – innovatively using WooCommerce to help sell his photos.

Jon Cornforth had a dated website that did little to showcase his photography or his exciting tours. He had a separate WordPress blog so he was familiar with using WordPress. When we discussed putting the entire new website on WordPress, along with using WooCommerce for sales of his photographic prints, Jon was very enthusiastic.

Chris Davis of Horsepower Design came up with a unique and beautiful website design for CornforthImages.com to replace the one that Jon currently had. As the web developer, I had to tackle the some of the features that Chris specified in his design.



Development Process

Having selected WooCommerce as the e-commerce engine, I took advantage of its flexibility by building custom templates and using various WooCommerce actions and filters.

Category Layout

Since this is a website devoted to photography, the WooCommerce categories needed to display custom thumbnails of actual prints. Building the layout that fit the images together like pieces of a puzzle, I relied on the jQuery Isotope plugin from David DeSandro. The additional challenge was the different sized images – in vertical or horizontal orientation. This meant that the standard sizes provided by WooCommerce settings were inadequate.

Custom Sizes to the Rescue

I took advantage of the WordPress “add_image_size” function to generate the tall images while keeping the WooCommerce thumbnail setting for the horizontal size. Then, wherever it was needed, a simple comparison of the image height and width determined whether to use the horizontal oriented thumbnail as defined in the WooCommerce settings or our “tall” image. I used the WooCommerce “woocommerce_before_subcategory_title” to generate the image in the correct location. I removed standard WooCommerce actions that generate titles, “add to cart” buttons and other unneeded components.


Single Product Page

The single product pages, like the category pages, have a unique look and feel. To showcase how the prints might look in a specific environment, the single product page allows a view of the image as it might appear in a home, office, hotel or restaurant. This is achieved by adding some additional code after the “add to cart” button by using the action “woocommerce_after_add_to_cart_button”. The license information is also displayed by using the action: “woocommerce_after_add_to_cart_form”. Images are again selected based on their orientation. Here I used a custom product-image.php template to achieve the desired result.

Product Variations

Product variations for each print include size and framing options. The design specified that these selections appear in the cart rather than the single product page. To get past the single product page validation, I hid the variations using CSS.

Cart

A custom “variable.php” template was created to show the product variations. Custom JavaScript was developed based on the original WooCommerce JavaScript to process the product variations. Finally, the correct selection of size and frame must be updated in the cart. This was done by removing the “woocommerce_update_cart_action” from the “init” hook and adding a new function that updated the shopper’s selection.

About

Mark Forrester

I'm a proud co-founder of WooThemes, based at our headquarters in beautiful Cape Town. I'm also a keen photographer, goofy dad and avid sports fan.

Website|X