3 Tips to make the most of WooCommerce

WooCommerce is a powerful e-commerce plugin for WordPress, which has been downloaded 4-million times to date. As WordPress developers who have implemented WooCommerce for a number of projects, we have gained some insight into how to bend WooComerce to suit various needs.

Here are some of our useful tips, tricks and slight modifications.

1. Using prettyPhoto (lightbox) throughout your site

WordPress prettyPhoto is a full blown media lightbox module most commonly used for displaying large images. However, prettyPhoto also supports video, flash, YouTube, iframes and ajax content. When used in conjunction with WooCommerce for product photos it only loads the required scripts on product pages.

If, for example, you have a single page with images and want to use prettyPhoto, you will need to include the following snippet into your functions.php file.

add_action( 'wp_enqueue_scripts', 'lightbox' );
 function lightbox() {
 global $woocommerce;
 $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
 {
 wp_enqueue_script( 'prettyPhoto', $woocommerce->plugin_url() . '/assets/js/prettyPhoto/jquery.prettyPhoto' . $suffix . '.js', array( 'jquery' ), $woocommerce->version, true );
 wp_enqueue_script( 'prettyPhoto-init', $woocommerce->plugin_url() . '/assets/js/prettyPhoto/jquery.prettyPhoto.init' . $suffix . '.js', array( 'jquery' ), $woocommerce->version, true );
 wp_enqueue_style( 'woocommerce_prettyPhoto_css', $woocommerce->plugin_url() . '/assets/css/prettyPhoto.css' );
 }
 }

Making use of the lightbox now is as simple as adding the prettyPhoto rel to your image links. Below is example of what this would look like.

[html title="add rel='prettyPhoto' to your link"]<a title="My Title" href="/my-image.png" rel="prettyPhoto"><img alt="" src="/my-image.png" /></a>[/html]

Let’s take this a step further.

You can automatically add the required rel=”prettyPhoto” to all images throughout your site. This is useful as you won’t have to worry about adding the rel each time or go back to update old posts. Again this snippet would need to be placed inside your functions.php file.

function autoadd_rel_prettyPhoto($content) {
global $post;
$pattern = "/(<a(?![^>]*?rel=['"]prettyPhoto.*)[^>]*?href=['"][^'"]+?.(?:bmp|gif|jpg|jpeg|png)['"][^>]*)>/i";
$replacement = '$1 rel="prettyPhoto['.$post->ID.']">';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
add_filter("the_content","autoadd_rel_prettyPhoto");

2. Showing a total number of orders on the front-end

A simple trick to build trust with your customers is by showing them others who have bought from your website.

Add the following code where you would like it to display. This will output the total number of orders. From there you are free to expand and style as you please.

<!--?php $args=array( 'post_type' =--> 'shop_order',
'posts_per_page' => -1,
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
$count = 0;
while ($my_query->have_posts()) : $my_query->the_post(); {
$count++;
}
endwhile;
echo $count;
}
wp_reset_query();
?>

3. Direct to Checkout

Ever wanted to skip the cart page in WooCommerce? This works great for sites using WooCommerce to sell subscriptions. This snippet will make clicking the “add to cart button” automatically go to the checkout page with that product.

This snippet should be added to your functions.php file.

add_filter ('add_to_cart_redirect', 'redirect_to_checkout');
function redirect_to_checkout() {
global $woocommerce;
$checkout_url = $woocommerce->cart->get_checkout_url();
return $checkout_url;
}

The alternative is to append a string to the end of your checkout page. Normally when adding to cart you get taken to the checkout page which would look something like this:

http://yoursite.co.za/checkout/

If you extend this URL to something like this you will be taken straight to checkout with the correct product.

http://yoursite.co.za/checkout/?added-to-cart=ID

The important part here is the ID being passed. Replace ID with the product ID and you will be taken directly to the checkout page. This is useful when using WooCommerce in the background and you have a table layout for your packages with a custom sign up button.

Do you use WooCommerce? Feel free to post some tips of your own in the comments!