Case Study: Red Hat No Knickers

Tom Dent runs a small design studio in Cheshire, UK and recently shared with us his experience working with the Canvas theme for a client site wanting to sell vintage clothing.

Hi, I’m Tom Dent a designer, web developer and co-founder of Double D Creative a small Cheshire based design studio I run alongside my business partner Tom Denton… hence the name ‘Double D’. We’re not brother’s as someone once thought (very odd), but we’re good friends with a passion and eye for great design and have been creating creative, engaging and functional design for traditional and digital media since we started the company in 2006. We pride ourselves in the quality of our work and attention to detail.

I’ve been working with WooThemes’ themes for the past 3 years and am a huge fan of the functionality and ease of use that the themes allow and the freedom that they give me from a design perspective. FreshNews was my theme of choice until I dived into Canvas which opened up a new world of possibilities.

We were approached by a client who was starting up a new business called Red Hat No Knickers (nothing like that you mucky people!) which is a vintage clothing store that would sell hand picked unique items of clothing. We were briefed to create a logo, branding, marketing material and online store.

The difference with this store to many others is that RHNK would only have one of each product, so rather than having a stock inventory each time a item was sold, that was it – no more! What I needed to do was make it as quick, simple and easy for the client to be able to add new items to the store. I chose the Cart 66 e-commerce plugin (this was before WooCommerce had launched!) as I had used Cart 66 before for another client and I knew that it was an simple and easy system to update.

The client requested a minimal design so I set about creating the Photoshop artwork which was signed off so I could commence the build.

The Red Hat No Knickers homepage design.

The Red Hat No Knickers product page design.

The great thing with Canvas for me is the use of Child Themes, so I only need to work with the files that need editing, rather than having the whole theme structure to work through. Using the Hook manager also allowed me to add in code directly into the header/post etc rather than having to add it to the core file.

The Products Pages

This was setup so that the client could setup a product in Cart 66 and in the then drop in a short code to the main post with the product code number such as [add_to_cart item="1234"], this would then display the ‘Add to Cart’ button or show ‘Sold’ if the product had been sold.

The Red Hat No Knickers products page.

The main image on the page is controlled by the Canvas Custom settings and via Theme Options > Dynamic Images > Single Post – Show Thumbnail. This is selected with the alignment set to left and the dimensions set to 340px by 510px. I added in the below to to the loop-archive.php page to display the image to the correct dimensions on the archive page

woo_image( 'width=340', 'height=510', 'class="rhnk-main"');

So it looks like:

while (have_posts()) { the_post(); $count++;

		woo_image( 'width=340', 'height=510', 'class="rhnk-main"');
		woo_get_template_part( 'content', get_post_type() );

	} // End WHILE Loop

The rest of the images on the page are just a standard WP gallery, unfortunately the standard WP gallery style sheet is written into the post so it overwrites and values from the theme style sheet. I found the solution at this useful post which involved copying the gallery_shortcode to the themes (Child Theme) functions.php file. You can view the full code here. Then it was just a case of adding the following to the Canvas Child Theme’s style.css file.

.gallery{
height:90px;
margin:20px 0 0 0;
}
.gallery-icon img{
float:left;
padding:2px;
background:none;
width:60px;
height:60px;
border:1px solid #B95;
margin-right:5px;
}
.gallery-icon img:hover{
background:#B95;
}

The last thing to do was add in some social network buttons to the bottom of the page, this was easily done via the hook manager and adding the standard Facebook and Twitter buttons code to the woo_post_inside_after hook so that it would be executed at the bottom of the post and inside the Div tag.

Making it Responsive…

From reading the WooThemes case study by Kris Millsap on how he made Adii.me into a responsive theme I decided to get stuck into Less Framework.

Again using the hook manager I dropped in the following code to pick up the less framework file to the wp_head hook.

Some of the LESS Framework CSS used to get RHNK responsive.

The Red Hat No Knickers responsive design

I followed the same method as Kris, in working with Firebug and identifying the class or id that needed changing then amending the less framework file and as Kris mentions in his post it wasn’t as big a job as I’d anticipated, it still took a while to do though (around 16 hours).

Thank Woo for Canvas

I’m really happy with the results of my first development with Canvas and have already updated another site (getiton.org.uk a NHS site) with Canvas and I’m in the process of completing another, much more complex site as well.