3 Tips to make the most of WooCommerce

WoocCommerce is a powerful e-commerce plugin for WordPress and to date has been downloaded over 1,200 000 times. Having ourselves worked with WooCommerce for a number of projects, we have gained insight into how to bend WooComerce to suit various needs.

In this post I will be discussing some useful tips, tricks and slight modifications.

1. Using prettyPhoto (lightbox) throughout your site.

WooCommerce 2.0 comes bundled with prettyPhoto, a lightbox module window most commonly used for displaying large images. WooCommerce uses this for product photos, however 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

Ever wanted to show your customers how many orders you have? 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 straight 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 you using WooCommerce in the background and 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!

No Comments Yet.

Write a Comment

Your email address will not be published. Required fields are marked *