Display only one price for grouped products – WooCommerce

This is a handy little function to control what price is displayed for a range of products that have been grouped in WooCommerce. Often the grouped products all have different prices and by default WooCommerce will display a range such as £50 – 1000. Which is not ideal. This function allows you to display the maximum price.

/**
* Returns max price for grouped products
**/
function wc_grouped_price_html( $price, $product ) {
$all_prices = array();

foreach ( $product->get_children() as $child_id ) {
$all_prices[] = get_post_meta( $child_id, ‘_price’, true );
}

if ( ! empty( $all_prices ) ) {
$max_price = max( $all_prices );
} else {
$max_price = ”;
}

$price = ‘<span class=”from”>’ . _x(‘From:’, ‘max_price’, ‘woocommerce’) . ‘ </span>’ . woocommerce_price( $max_price );

return $price;
}
add_filter( ‘woocommerce_grouped_price_html’, ‘wc_grouped_price_html’, 10, 2 );

NB: This is not originally my code, but unfortunately I can no longer find the website that published it to reference it correctly.

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

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:

$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’ )
)
);

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 you should find

switch ( $this->quick_view_trigger ) {

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:

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;

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

The 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:

<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>

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.

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.

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

 

Setting up a Content Delivery Network (CDN) with WordPress (part 1)

Content Delivery Networks or Content Distribution Networks (CDN) can have a huge impact on the speed and performance of your website. They can take some of the strain away from your own website hosting because they serve files from a network of servers instead of yours. This can be especially useful for large website with lots of images or in a situation where your hosting is not as good as it could be.

In the first part of this two part tutorial I will show you how to set up your storage with Amazon S3 and how to set up a new WordPress website to automatically upload your media to the CDN as you upload it to your website.

Part 2 will cover how, if you already have a website and would like to convert it to use a CDN, you can upload your entire media library and other files using the W3 Total Cache Plugin.

NB: There are many ways to set up a CDN with your WordPress website, this is just one option and my personal preference.


Setting up a basic Content Delivery Network on your WordPress website

You will need:

  • An up to date install of WordPress (at the time of writing I’m working on v3.9.1)
  • An Amazon S3 Cloud Storage account
  • Basic knowledge of how to install plugins
  • Basic knowledge of how to edit config.php

Firstly, let’s set up the Amazon S3 service for use with your new WordPress website. Once you have created an account over at http://aws.amazon.com/s3/ and logged in you should be faced with the Amazon Web Services Dashboard. We only need to concern ourselves with two areas at the moment, S3 and IAM.

S3 is your actual storage and IAM controls the users and groups that can access your storage and from where (i.e. certain websites can access your storage to display the images).

AWS-Dashboard

Setting up your storage space in Amazon Web Services

To set up the actual storage space where our files and media will live, click on S3 in the dashboard. Once in the S3 area you will be confronted with what is mostly an empty screen. This is because this is a new account and we haven’t done anything with it yet.

What we need to do is create a “bucket”. I think of buckets in a similar way to folders on your computer. Click the large blue button at the top of the screen labelled “Create Bucket”, give it a name (while being mindful of the naming conventions) and set a location. I prefer to always select Ireland but I don’t think it matters as long as you are consistent and remember the location you selected (you will be asked for it for certain things including using S3 with Backupbuddy). Click create and you have your first bucket!

first-bucket

The next step is to create a user that can access your bucket. It is the user credentials that you will need to link your WordPress website to your Amazon S3 storage.

AWS Users

In your AWS account screen select IAM from the services drop down menu. Once there, you should see the blue button at the top labelled “Create User”. Click that and give your new user a name in the pop up window that appears.

create-users

Once you have created your users you will be provided with the opportunity to see your security credentials. These are VERY important. You will need them later so make sure you make a note of both your Access Key ID AND your Secret Access Key.

Next we need to create a group so that we can apply some permissions. Think of this like applying permissions for a database user – it’s very similar, except we apply out permissions to the group rather than individual users. We will then add users to that group so that they inherit those permissions.

AWS Groups

Under Groups, select the “Create New Group”, give your group a name and click continue. On the next screen you will need to set your permission levels by selecting or creating a policy template. We will select “Read Only Access”, on the next screen click continue, and then create group.

Once created, you will see the group listed on the main screen and underneath are some settings for that group. It’s here that you can add your user to the group.

create-group

And that’s all we need to do in the AWS control panel. There is so much more you can do with Amazon Web Services and I urge you to have a play around with some of what is on offer, but for the sake of this tutorial we are done.


Setting up your storage in WordPress

To setup your website to use your newly created Amazon S3 storage, we need to install 2 plugins. The first is Amazon Web Services which allows us to enter our credentials and the other is Amazon S3 and Cloudfront which is what will automatically move newly uploaded media to our storage and replace all the relevant URLs.

Installing and configuring the Amazon Web Services plugin

First, upload and activate the Amazon Web Services plugin. Once activated a new option labelled “AWS” is added to the bottom of the main menu. Go to AWS / Settings to complete the rest of the setup.

This is where you need your Access Key ID and your Secret Access Key. You will also now need to edit your config.php. If you are genuinely uncomfortable editing your config.php file you can save your credentials to the database on this screen but it is not recommended.

Navigate to your config.php file in the root of your WordPress install and add the following two lines to it:

define( 'AWS_ACCESS_KEY_ID', '********************' );
define( 'AWS_SECRET_ACCESS_KEY', '****************************************' );

Replace the stars with your Access Key ID and your Secret Access Key you saved earlier. Save and close the file then upload it to your server if you need to.

Installing and configuring the Amazon S3 and Cloudfront plugin

The final step is to install and configure the Amazon S3 and Cloudfront plugin which will (among other things) automatically copy the media you upload to your S3 storage.

Once uploaded and activated, go back to the AWS menu on the left and you should see a new sub menu item labelled S3 and Cloudfront. Here you will access the last set of settings.

cloudfront-settings

Because we’ve added the credentials for AWS already, when you access this settings screen you will see that the first drop down options is prepopulated with every bucket on your account that the group you set up has access to. Select the bucket you created at the beginning of this article (in my case it was kbtest.bucket). Fill in the rest of the settings dependant on your own preferences.

All done!

This is just one, reasonably basic, way to set up a CDN with WordPress. There are a lot of settings I’ve skipped over to get the initial CDN up and running, many of which would improve performance even more.

If you have any specific tips or tricks that are different to what I’ve outlined, please add them to the comments below as I would love to hear them! 🙂