Extending Quick View to show on thumbnail click – WooCommerce

Quick View allows you to add the ability to click on a product in your WooCommerce shop and display some basic details about that product in light box without the need to load a new page. Amazon does something similar as does some of the other bigger online retailers.

Out of the box this plugin gives you the option to add a “quick view” button to each product or select any “non-ajax” buttons to trigger the light box. However, for the store I was building I needed the light box to be triggered when you clicked on the thumbnail image instead.

Step 1: Modifying the plugin

Screenshot 2015-10-28 11.22.50
Folders within my theme including the new one for the Quick View plugin

As with any WooCommerce files, in order to modify them without your changes being overwritten the next time there is an update available, all you need to do is copy the file you want to edit into your theme folder. For this plugin I needed to modify the main woocommerce-quick-view.php file, so I created a new folder in my theme titled the same as the plugin and copied the file into that.

Step 2: Creating the option

Once installed and activated, Quick View gives you some new settings under the Settings > General tab in WooCommerce. By default these are ‘Quick View Button’ and ‘Any non-ajax add to cart button’. We need to add a third option for product thumbnail.

To do this, open woocommerce-quick-view.php in your theme and go to approximately line 99. At the time of writing this there was already an option here for thumbnail that has been commented out. Un comment it so that your code now looks like this and save it:

[php highlight=”8,39-44″ language=”wraplines”]

$settings[] = array(
‘id’ =’quick_view_trigger’,
‘name’ = __( ‘Quick View Trigger’, ‘wc_quick_view’ ),
‘desc’ = __( ‘Choose what event should trigger quick view’, ‘wc_quick_view’ ),
‘type’ = ‘select’,
‘options’ = array(
‘button’ = __( ‘Quick View Button’, ‘wc_quick_view’ ),
‘thumbnail’ = __( ‘Product Thumbnail’, ‘wc_quick_view’ ),
‘non_ajax’ = __( ‘Any non-ajax add to cart button’, ‘wc_quick_view’ )
)
);

[/php]

Your options in the admin should now look like this:

Screenshot 2015-10-28 11.27.40

Step 3: Adding the quick view URL to the product thumbnail

Once the option in the admin has been created you need it to actually do something when selected. To do this we will add an action depending on what has been selected.

Move to approximately line 125 in woocommerce-quick-view.php, where yoiu should find

[php] switch ( $this->quick_view_trigger ) { [/php]

We need to add a new trigger, which when fired overwrites the default permalink to the full product details and instead loads the quick view. To do this, in the Switch we add a new case for our thumbnail option that we created:

[php language=”wraplines”]

case ‘thumbnail’ :
$selector = "’a.quick-view-image’";
if (is_shop() || is_product_category() ) :
add_filter( ‘the_permalink’, array( $this, ‘get_quick_view_url’ ) );
endif;
break;
[/php]

Here we’ve created a new trigger, an <a> tag with the class of ‘quick-view-image’. We’ve then added a filter that replaces the permalink for every <a> with that class with the new quick view url created by the plugin. And, as an added measure we’ve added conditional tags to make sure the permalink is only applied to shop archives and product category archives.

Step 4: Amending your product template

Screenshot 2015-10-28 11.45.56The last step is to amend each product listing to use the new options created as well. To do this all we need to do is add the class ‘quick-view-image’ to each product link.

As before in Step 1, copy the correct file from the WooCommerce plugin to our theme file so that we can make changes to the template without it being over written. In this case these are the product listings on the main shop page so we need to edit content-product.php like so:

[html highlight=”5″]

<li <?php post_class( $classes ); ?>>

<?php do_action( ‘woocommerce_before_shop_loop_item’ ); ?>

<a href="<?php the_permalink(); ?>" class="quick-view-image">

<?php
/**
* woocommerce_before_shop_loop_item_title hook
*
* @hooked woocommerce_show_product_loop_sale_flash – 10
* @hooked woocommerce_template_loop_product_thumbnail – 10
*/
do_action( ‘woocommerce_before_shop_loop_item_title’ );

/**
* woocommerce_shop_loop_item_title hook
*
* @hooked woocommerce_template_loop_product_title – 10
*/
do_action( ‘woocommerce_shop_loop_item_title’ );

/**
* woocommerce_after_shop_loop_item_title hook
*
* @hooked woocommerce_template_loop_rating – 5
* @hooked woocommerce_template_loop_price – 10
*/
do_action( ‘woocommerce_after_shop_loop_item_title’ );
?>

</a>

<?php

/**
* woocommerce_after_shop_loop_item hook
*
* @hooked woocommerce_template_loop_add_to_cart – 10
*/
do_action( ‘woocommerce_after_shop_loop_item’ );

?>

</li>

[/html]

And thats it! Happy coding 🙂

NB: It is possible to do this without having to edit the WooCommerce product template as well by being more specific about your trigger in the plugin, instead of relying on a new class. However, this was easier for me at the time as I planned to edit other areas of the product template as well.

Full details about the Quick View add on for WooCommerce and documentation can be found here: https://docs.woothemes.com/document/woocommerce-quick-view/

Feature article in Net Mag’s “Ultimate Guide to WordPress”

Recently I was asked to write a 3 page tutorial for Net Mag’s Ultimate Guide to WordPress Volume Two. I was approached because of my work building large WordPress websites sites and extending what can be done with the use of advanced custom fields.

I chose to build and write about a small website for a rubber duck racing league. A simple, fun premise that would allow quite a lot of extra functionality.

IMG_9458

The website used the twentyfifteen theme with a child theme associated with it so that I could easily make changes. And two custom post types:- The Races and The Ducks with a number of custom fields associated with each.

When you visited the website you were presented with a list of fixtures for that season, when you clicked on each you were given full details of that race and a list of the ducks that would be in the race. Each duck could then be clicked on to give more information (i.e. stats, bio etc. much like any other sporting event features its contestants)

And then to make things a little more difficult, there was a small calculator to work out what your winnings would be, if you wanted to have a flutter, based on odds given to each duck and how much you would like to gamble.

Each race had additional custom fields built in for details like the race date, time and location. As well as a relational repeater field that allowed you to select the ducks that would be in the race from the duck post type, rather than manually adding them all of the time, and also setting the odds for each duck in that race.

Screenshot 2015-10-28 13.34.23
The ducks selected for a race in the admin along with the odds for each
The ducks listed on the website along with their potential winnings, based on their odds.
The ducks listed on the website along with their potential winnings, based on their odds.

This was a really fun side project to do and a great way to show the power of advanced custom fields. If I had had more time with it I would have jazzed the site up a little, added a google map for the location of each race, a widget showing the next race in the season based on the current date etc etc. The options for this really were endless.

If you would like to view the website I created for this tutorial, you can do so here: http://www.kb-client-area.co.uk/ducks/

All of the source code for it can be found here: https://github.com/kirstyburgoine/DuckRaces

 

Introducing (R)Evolution 2015!

Details of (R)Evolution 2015 so far have officially been revealed here: 2015.shropgeek-revolution.co.uk

Woohoo!  ~ grin!

As many of you know, we will be taking a break from organising (R)Evolution in 2016, so this year we are pulling out all of the stops. And honestly, I couldn’t be more excited about this year’s event (I know I say that every year, but seriously its going to be so awesome!). We have lots of things planned to make the day even more special but for now, here are the important facts: 

  • The conference itself will be held in The Walker Theatre at Theatre Severn in Shrewsbury, on Friday 25th September 2015.
  • We have what I consider to be the best lineup yet and still more to be confirmed!
  • There will be workshops as well this year. Full details of those to follow soon.
  • Our now legendary after party will be back again this year. Venue to be confirmed (It’s hard work testing all of the potential after party venues 😉 ~ grin!).
  • And we’re also organising a number of other fringe events to make your weekend complete!

monster-dude-sqYou may also have noticed “Monster Dude” by now too. We’re taking the conference in a different direction this year and all of the talks will have a focus on Evolution to one extent or another, and specifically technology. We’ve been having great fun with this and created a whole Sci-Fi / B-Movie theme, which I’m personally so very excited about its been almost impossible not to put it on Instagram before now! I literally cannot wait to share the full website with you all!

Early bird tickets are now on sale for the teeny sum of £75 for the full day so go and grab yourself one, and hopefully I will see you all there!  🙂

(R)Evolution in full swing
(R)Evolution in full swing

“The BIG Question” in the June 2015 issue of NET Mag

Each month Net mag ask a “BIG Question” and different people working within the web industry get to answer.

This month the question was “How do you build a sustainable web career?” and along with some truly awesome people, I was the resident expert answering. You can see my answer in the photo below. If you would like to read the whole article you can find it in Net Mag Issue 267 on page 38. Enjoy! 🙂

instagram

Come and find me at WordCamp London 2015

If you fancy coming along to my talk, you can find me in the “developer” lightning track on the Sunday: http://london.wordcamp.org/2015/schedule/

My talk will be a shorter version of the one I did for WordCamp Birmingham. Here is a quick overview:

Catering for WordPress

The catering / restaurant industry has very few tools to help them create / store recipes, plan menus and work out costings that can be shared with members of staff and other branches of a chain.

This talk will be a whistle stop tour of how WordPress was used to create an intranet for businesses in the restaurant / catering industry. Some of the features include help plan and budget dishes and menus, work out costings for bulk recipes down to individual portions and include other factors such as VAT and a variable gross profit.

I will be there all weekend (well from Saturday to Sunday) so whether you come and see my talk or not, please do say hello! 🙂

Talks and workshops announced for WordCamp Birmingham – Updated

I will be pretty busy at WordCamp Birmingham in February because, as well as being part of the organising team, I will be giving a talk and running a workshop on theme development using Advanced Custom Fields.

intro
The organising team from left to right: Jonny Albut, Pauline Roche, Rachel McCollin, Me, Nathan Roberts. Photo by Drew Kirkland

If you are thinking of coming along to either, below is an outline of what I have planned:

 

10919350_835687926469626_595631321_n

Talk: Catering for WordPress

A case study of how WordPress was used to create a recipe building / menu planning tool for the catering industry.

During this talk I will be covering how custom post types, custom taxonomies and custom fields were used to create an intranet system for the catering industry helping them to plan, manage and cost their menus. I will also discuss some of the challenges, pitfalls and where things worked well.

You will need a good understanding of PHP, advanced theme development and knowledge of jQuery for this talk.

Update: you can view the slides from my talk here: http://www.slideshare.net/kirstyburgoine/wcbham2015

 

Workshop in full swing
Workshop in full swing

Workshop: Using Advanced Custom Fields

Run in conjunction with Nathan Roberts from Studio A2 this workshop will take a look at the Advanced Custom Fields plugin from Elliot Condon and how to integrate it into your WordPress theme to add new functionality and options to build more complex, data driven websites.

This workshop assumes you are comfortable with WordPress theme development, PHP and possibly some jQuery as well. Ideally you will have a fresh local install of WordPress and the ACF plugin.

nathan-and-me]
Nathan and I working hard before our workshop on ACF (I’m sure he will thank me for using this one ~ grin!). Photo by Drew Kirkland

Earlybird tickets for the weekend have now sold out but you can still grab a ticket at the full price of £25 here: http://birminghamuk.wordcamp.org/2015/

Staffs Web Meetup – January Meetup

It’s funny how things work out. As a bit of an introvert (if you are interested, you can read more about being an introvert in a post I wrote for ShropGeek here) I have a real love / hate relationship with public speaking.

A rare photo of me looking relaxed before my talk
A rare photo of me looking relaxed before my talk

I love the feeling I get when I’m actually doing the talk and the audience is responding well (even if its only laughing at the animated .gifs which I can’t take any credit for creating) and the huge sense of achievement I always get afterwards. But, I really don’t like the build up at all. I find it very stressful. To the point that in December I had said that I wouldn’t do much public speaking in 2015.

And then less than 12 hours after uttering those immortal words I had an email from Dave Redfern… He had seen my talk at Responsive Day Out in Brighton last year (you can read more about that here) and wanted to know if I would present the same talk at January’s Staffs Web Meetup. Of course I said yes.

And I’m so glad I did. I am a huge supporter of grass roots events, I literally cannot put into words how important I think they are, not just for developing and diversifying the web community, but also for inspiring us and pushing us all to do awesome work. And Staffs Web Meetup is one of the best I’ve been to!

The lineup on the night was myself and Jenny Wong. Jenny did a really inspiring talk encouraging people to get involved with events and start public speaking. Its something I champion a lot through ShropGeek and she made lots of excellent points.

staffs-web-meetup-january-2015-21-of-41
Jenny talking about sharing knowledge and finding your voice

 

My talk was about responsive web design and lessons learnt when providing deliverables to clients. It also featured this slide:

Explaining what I thought freelance life would be like.
Explaining what I thought freelance life would be like (and some of my best design work of 2014 ~ grin!)

For the record: I do not live in a pink house, or own a pink dressing gown/sofa or have that many cats. Honestly! ~ grin!

The whole evening was a huge success, it was really well organised, there was a great crowd of people there, the venue was fantastic, and the food laid on looked amazing (I can never eat before doing a talk so sadly didn’t actually try any).

Staffs Web Meetup is held on the Third Thursday of each month and highly recommend that if you are anywhere near the area you go along. I will certainly be going back again very soon!

More photos can be found on their website here: http://staffswebmeetup.co.uk/ and you can follow them on Twitter here: @StaffsWebMeetup.

You can never go wrong with mini burgers!
You can never go wrong with mini burgers!