Pootlepress.co.uk

Please note: we are still working on this post and have tested about 75% of the tips below. We will continue to improve this resource over the coming days and weeks



WooCommerce is fast becoming the most popular e-commerce software on the web. We’ve started getting into it in a big way, offering training days and where you can learn more about it.

To help those we can’t train face to face, we decided to put together a bumper resource.

Please make sure you make any changes and tweaks on your site on a development or test site and ALWAYS have access to the FTP to your server in order to resolve issues that could break your site.

Here are some links to the various sections:

Products
Checkout
My Account
Navigation & Menus
Settings
Payment Gateways
Reports
Miscellaneous

Please make sure you make any changes and tweaks on your site on a development or test site and ALWAYS have access to the FTP to your server in order to resolve issues that could break your site.



Want to remove the orderby dropdown for products?

Thanks to Zac Gordon for this tip.

To remove the drop down and ordering options completely, add the following to your functions.php file:

However, if you want to edit the drop down and make it something else.  You can find the file at the following location:

 

You can then copy that file to your theme folder, edit it, and override the default drop down.

 

Add a border around the product description

Thank you to Amy Garrett  for this one.

Modify the border size (1px, 2px, etc), style (solid, dotted, dashed) and color (#xxxxxx) to suit your needs in custom.css:

.woocommerce .woocommerce-tabs {border: 1px solid #e6e6e6}

Remove specific (or all) of the product tabs

Thank you woothemes docs for this snippet.

Use this snippet in the functions.php if you want to remove any (or all) of the product tabs, such as the description and reviews:

 

Remove the ‘reviews’ tab so that only ‘product description’ appears

Thanks to Amy Garrett for this little tip.

Just add this little line of code to your custom.css file:

Add videos to your products for customers to watch

 

Thanks to Seb’s Studio  for this one.

This simple little plugin allows you to add a Video to the Product page with an additional tab that allows your customers to view the video you embedded..simple!



WooCommerce Video Product Tab

Connect your eBay store to your WooCommerce shop with ease

We give thanks to WP Lab for this little gem.

Using this easy yet flexible plugin, you can link up your eBay store with your WooCommerce shop as well as benefit from all the added features, including verifying items and getting listing fees before actually listing them.

WP-Lister for eBay

Want to re-order the product tabs?

Thank you to the legendary woothemes  for this snippet.

Change it as you want it and add to the functions.php, but here is a snippet to put the reviews first, description second and additional info third:

Create discount deals on bulk orders

Thanks to  Mr Rene Puchinger for this number.

Apply bulk discounts to items in the shopping cart with the WooCommerce Bulk Discount plugin, making it super simple yet super extensive to edit it to suit your specifications. With this plugin discount can be made visible on a number of different pages or when hovering over the product in the cart as well as being easily disabled in the product options pages. WooCommerce Bulk Discount

Change the Woocommerce star ratings to show stars rather than theme ratings

 

We must show thanks to the Woo ninjas for this loving tutorial.

The default rating system that comes with WooCommerce is the stars, but we have disable this so that the rating system matched our themes. If you wold like to replace this with the WooCommerce default. Save the image below or get it from “plugins/WooCommerce/assets/images” and place it  in your themes “images” folder Then  add the following to your custom.css (if you have child theme the style.css) :

If you’re seeing duplicate stars on your product add the css below as well:

 

Hiding products in store that you’re not ready to sell

To ‘hide’ products that you don’t want customers to purchase until you’re ready, you just need to change the catalog visibility option to `hidden` on the product page:

Get rid of the ‘sort by price’ option

 

Thank you to the genius that is Chris Lema for this snippet.

Simply use this bit of css to hide it:

 

Personalise a product tab to say exactly what you want

 

Thank you again to Woo docs for your generous snippet.

Add this into your functions.php making sure you replace the description tab with a custom function:

Show the product description underneath an image

 

This was courtesy of a support post on WordPress from ManusH

Add the code below to your functions.php:

Automatically add product to cart on visit

 

Thank you for the awesome Woo Documentation for this snippet.

If you want to automatically add a product to cart on visit, add this to your functions.php (or custom plugin):

Remove product content based on the category

 

All hail Woo Docs for your awesome snippet.

Add the following to your themes functions.php file to e.g: remove product imagery on products within the ‘Cookware’ category. Replace the category in the snippet as required:

Don’t want products from a particular category to show on the shop page?

 

Thanks to wptaskforce for this tweak.

Hide products that are packages or subscription which belong to a page or has its own page by adding this into your functions.php:

Change the number of related products displayed in your shop

Thanks to True Themes for this one.

Customise the number of rows and the number of products in each row with this little snippet. Change the number of related products displayed within your WooCommerce Shop by adding the following code to the end of your functions.php (Important: “?>” should be the last bit of code within functions.php)

Please Note: – 4 is for the number of products in each row. – 2 is for the number of rows.

 

Customise the number of columns and products displayed per page

 

Thanks to Woo Docs and James Koster for your awesome tips and plugin.

To alter the number of products displayed per page, add this little snippet:

Alternatively if you want to change the number to columns as well as the number of products per page, this plugin will do just the job:

WooCommerce Product Archive Customiser

Customers get to choose a delivery date

Thank you Ashok Rane of Tyche Softwares for this great plugin.

Use this useful too to allow your customers to choose an order delivery date on the checkout page which will then show up to the site administrator on the “Custom Fields” section.

Order Delivery Date for Woocommerce

If your products are not inclusive of VAT, this useful tip will allow “+VAT” to be added after a product price so customers are clear on the price

Thanks to WordPress support for this one.

Woocommerce needs two files to be changed to allow the display of ”+vat” or whichever sales tax needs to be applied. First you need to control the appearance on the actual product details in /woocommerce/single-product/price.php :

Change
<p itemprop="price"><?php echo $product->get_price_html(); ?> + vat</p>

to
<p itemprop="price"><?php echo $product->get_price_html(); ?><strong> + vat</strong></p>

Then you need to control how the price appears everywhere else in /woocommerce/loop/price.php :

Change
<span><?php echo $price_html; ?></span>

to
<span><?php echo $price_html; ?> + vat</span>

Hide the product count next to the category name – e.g. MyCategory(25)

Thank you Amy Garrett for this tip.

Add the code into custom.css:

.count {display:none !important}

‘Cut out the middle man’ and send customers straight to cart

We are forever in your debt Chris Lema for your knowledge!

When your customers are using WooCommerce it is set to navigate them from the shop page, to the product detail page, and from there to the cart page. To ‘get rid of a click’ and send them straight to the checkout this tutorial will take you through it step by step and not just with a hook that only works from a sing product page. It’s definately worth a look!

1 Click To Cart Tutorial

Give yourself some space in the Cart

Thank you Teach Web 101 for this one.

If the cart too far right and everything is too crammed together you can use this snippet just to give you a little bit of spacing:

.cart-collaterals .cart_totals, .cart-collaterals .shipping_calculator, .cart-collaterals .cross-sells {width: 75%; float: right}

Automatically mark orders as ‘complete’

Thank you to Sky Verge for this great snippet.

By default, virtual-downloadable orders are marked as ‘completed’ after successful payment, but if you want to be able to automatically mark a virtual order as complete upon payment (for instance in the case of a site which takes donations where no further action is required) you can use the following code in your functions.php:

add_filter( 'woocommerce_payment_complete_order_status', 'virtual_order_payment_complete_order_status', 10, 2 );

function virtual_order_payment_complete_order_status( $order_status, $order_id ) {

  $order = new WC_Order( $order_id );

  if ( 'processing' == $order_status &&

       ( 'on-hold' == $order->status || 'pending' == $order->status || 'failed' == $order->status ) ) {

    $virtual_order = null;

    if ( count( $order->get_items() ) > 0 ) {

      foreach( $order->get_items() as $item ) {

        if ( 'line_item' == $item['type'] ) {

          $_product = $order->get_product_from_item( $item );

          if ( ! $_product->is_virtual() ) {

            // once we've found one non-virtual product we know we're done, break out of the loop

            $virtual_order = false;

            break;

          } else {

            $virtual_order = true;

          }

        }

      }

    }

    // virtual order, mark as completed

    if ( $virtual_order ) {

      return 'completed';

    }

  }

  // non-virtual order, return original status

  return $order_status;

}

Add a checkbox field to checkout with a simple snippet

This snippet can also be found at gist.github.com

To add a simple checkbox field to you checkout, add this to your functions.php :

?>

Want to alter the default state and country at the checkout?

 

All hail the awesome Woothemes documentation for this one.

To change the default state and country on the checkout simply add this line of css to your functions.php file:

 Automatically complete orders

Thank you Woo Docs for this one.

Automatically mark orders for virtual products as Completed after a successful payment by adding this snippet into your functions.php:

Customise ‘add to cart’ text on single product pages

Thanks to the awesome Remi Corson at wpexplorer for this snippet.

Add the following to your functions.php file replacing ‘my button text’ with whatever you want it to say:

Want to change the ‘add to cart’ text on product archives too?

Thank you for this snippet Woothemes.

Add the following to your functions.php file:

Show cart contents/total

We are forever in your debt Woothemes for this snippet.

To display the cart contents and total in your template use something like:

To ajaxify your cart viewer so it updates when an item is added (via ajax) use:

Redirect users after clicking the add to cart button to the checkout page

Thank you easydigitaldownloads for this code.

If you want users to be immediately redirected to the checkout page after clicking on the “Purchase” button, you can place the code below into your functions.php or any custom plugin:

Note, this only applies to sites that do not have ajax enabled in the Misc settings.

Empty shopping cart?

Thank you for sharing this one Chris Lema.

Sometimes because of caching your shopping cart will appear empty even when you have added an item. To resolve this you need to make sure your page is never cached! Find out more from Chris Lema’s tutorial.

Make managing orders more reliable by adding a ‘confirm email address’ field to checkout page

Thanks to Hugh Lashbroke for this handy little plugin.

To ensure customers enter their correct email address you can add  an extra ‘confirm email address’ field to your checkout you with this simple but useful WooCommerce Email Validation plugin.

WooCommerce Email Validation

Manage your WooCommerce checkout including adding new fields to the checkout page, re-ordering fields and more

Thanks goes to TrottyZone for this one.

‘WooCommerce Checkout Manager’ is a powerful plugin for overall management of your checkout page. It has a vast amount of capabilities to manage your products on checkout such as adding fields, removing fields that you do not need, removing the required attribute rendering the field optional to customer or even perhaps adding more fields to the checkout page.

WooCommerce Checkout Manager

Hide the coupon form on the cart or checkout page to encourage a steamlined order process

Thank you sellwithwp for this code.

Hiding the coupon form or renaming the coupon field can help discourage your customers to go on a ‘coupon hunt’ when reaching the checkout upon ordering. Use this snippet to simply disable the form on the cart/checkout pages, but leave coupon use enabled otherwise:

Alternatively, to rename it you simply change the text inside the single quotes to whatever you’d like the “Apply Coupon” button to say when using this code:

Encourage people to register on your site by adding a message above the login/registration form

Thank you James Koster for this great tip.

List the benefits of registering on your site above the login form by adding this to your child themes functions.php:

Give yourself some extra width in the address fields

Thanks to Woothemes documentation for this one.

Make address fields wider with this snippet:

Ensure your customers are completing the checkout fields

Thank you Remi at WPexplorer for this.

Make the checkout fields required with this little bit of css:

Display My Account link in a template file to let users know if they are logged in or not

Thanks Woothemes for this snippet.

Using this code you can display a link to the user account section. If the user is not logged in the link will display ‘Login / Register’ and take the use to the login / signup page. If the user is logged in the link will display ‘My account’ and take them directly to their account:

Create new fields on the registration page which will then automatically link with the billing address

Thank you Flemming Bækdal for this useful tutorial.

When adding a field on the registration page the information does not automatically link with the billing address. This tutorial takes you step by step through how to make this link whilst visually being able to see how it’s done too.

Create new fields on the WooCommerce registration page tutorial

Center your logo

Thanks to Tech Web 101 for this one.

To center your logo change, place this code into your custom.css: adjusting the width to the exact width of your logo image:

#logo {float: none; margin: 0 auto; width:764px}

Remove the sidebar and make all your pages full width

Thanks to the people who posted this as a support issue on WordPress Support for this!

To hide the sidebar with code you can pop this into your custom.css:

Or you could delete the sidebar completely:

Or you could  take the sidebar out simply by commenting out the information in the woocommerce/templates/shop/sidebar.php file so that you can ‘bring it back’ at a later date. Simply put a /* and */ around everything there and it will take it out.

Customise the ‘Home’ text to say whatever you’d like

Thank you WooThemes for this snippet.

Add this in your theme/child themes functions.php file replacing the ‘Appartment’ with your text:

Change the Home link to a different URL

Thank you WooThemes for your awesome documentation.

Add this in your theme/child themes functions.php file replacing the web address with the URL of your choice:

Get rid of all the breadcrumbs

We are super grateful to the awesome WooThemes team for this.

Add this in your theme/child themes functions.php file:

If you just want to remove the breadcrumbs on WooCommerce pages when using a WooTheme, use the following:

Automatically display a shopping cart in your menu bar and more!

Thank you to the developers at WP OVernight.

Display a shopping cart in your menu bar with this quick ‘one minute install’ plugin as well as utilising the other tweaks such as ‘Float left, float right, or use your menu’s default settings’ or ‘Display items only, price only, or both’

WooCommerce Menu Cart

Add WooCommerce specific URLs to the WordPress menu

Thank you Remi Corson for this handy tutorial.

To add WooCommerce pages URLs to your WordPress main menu, simply go to Appearance > Menus in the WordPress main menu. Click on the links section. Add custom URLs using the “my account” page slug and the endpoints values, and hit the add to menu button. For full details and screenshots click here.

Replace the old page navigation with fancier pagination links

Our thanks go to Lester Chan and Scribu and WPSnacks for this.

This plugin will help to create a cleaner pagination page navigation. You can also find some styling tips for this plugin at ThemeShaper.

If you need to then manually replace the WooCommerce default page navigation then add this code to your current themes functions.php file:

 

WP-PageNavi

Hide the RSS link in the primary navigation

Thank you Tech Web 101 for this one.

Get rid of the RSS link in the primary navigation with this short bit of code:

#navigation ul.rss {display:none !important}

#navigation ul.rss.cart-enabled {display:none !important}

Customise the search results by post type

Thank you to the brilliant WooThemes Ninjas for this tutorial and plugin.

Attach the following code snippet to the bottom of your theme’s functions.php file:

Notice that the key argument is ‘product’. You can use the following keys to determine which type of posts to display:

‘product’ = Products

‘post’ = Posts (blog articles)

‘page’ = Static pages

You can include multiple post types by setting the arguments:

You can also use this with any other custom post type your site uses – for example, if you had the Projects by WooThemes plugin, you could use ‘project’ to filter by Projects.  You can see how to find your post type in the image below:

Keep in mind that this is a site-wide effect. This will not impact search results done through your WordPress dashboard, only front-end searches.  To remove, simply comment out the code or remove it from your functions.php file.

Want to customise the currency or symbol?

Thank you to Remi at WPExplorer for this tip.

Paste this code in your theme functions.php file and swap out the currency code and symbol with your own:

Get rid of, or simply unhook WooCommerce Emails

Woo themes documentation receives our thanks for this.

If you don’t want WooCommerce Emails simply pop this code into your functions.php:

How to add any custom field to your order emails by hooking in and specifying the name of the custom field

Another thank you in the list to the documentation at WooThemes.

Copy the following code to your theme functions.php then go to WooCommerce > Checkout Fields to add your newly created custom field.

Here is a screenshot example of adding in the custom field ‘How did you hear about us’:

Using this example the code would be:

Customise a URL to direct customers to from ‘add to cart’

Our snippet here came from the awesome WooThemes.

Set a custom add to cart URL to redirect to by adding the following code to the file functions.php:

Change the look of your product gallery by customising the number of thumbnails per row

WooThemes we give you thanks again for this.

Change number of thumbnails per row in product galleries by simply adding this code replacing the number of thumbnails per row with the ‘xx’:

Edit the ‘out of stock’ with any text you prefer

WPExplorer we thank you for this lovely little tip.

Add this code to edit the ‘out of stock’ text with your own customisation. Here it has been replaced with ‘sold’:

Add in your own alternative “from” email address

Again we thank WPExplorer for this one.

Use this code to change the ‘from’ email address to any other of your choice. Just replace your own with ‘your@email.com’:

This trick will allow you to order by price, date or title on your shop page

Thank you Remi for sharing this on WPExplorer.

Want to change how many columns you have in your shop?

Thank you to this tip from WPExplorer.

To change the shop column number simply add in this code (note: using this exact code will alter it to 4 columns):

Experience seamless Paypal transactions with this thoroughly tested plugin brought to you by experienced PayPal developers

Thank you to Angel EYE for this great plugin.

Integrate PayPal Express Checkout and Payments Pro into the WooCommerce shopping cart to ensure payments are processed correctly and includes all WooCommerce order data in PayPal transactions so that everything matches in both places.

Paypal for woocommerce

Add payment type to WooCommerce admin email

Thanks to Gerhard Potgieter for this useful trick.

It may be useful on order emails to include the payment type as some WooCommerce store admins would perhaps want to know this data in emails for decisions on whether to ship items immediately or to hold off for a while for money to clear. To add in payment types simply add in this code to your functions.php:

Replace default paypal logo with your own chosen image

Our thanks go to Isabel Castillo for this.

If you only accept credit card payments via PayPal, then you will only have the default PayPal icon displayed.  WooCommerce does not display credit card icons (even if you accept them through paypal) for PayPal by default. Here is how you can change WooCommerce’s default PayPal icon remembering that you must replace the image filename and path with your own image:

/**

 * Custom icon for PayPal payment option on WooCommerce checkout page.

 */

function isa_extended_paypal_icon() {

        // picture of accepted credit card icons for PayPal payments

    return get_bloginfo('template_directory').'/images/paypal-payments.jpg';

}

add_filter( 'woocommerce_paypal_icon', 'isa_extended_paypal_icon' );

Hide all other shipping methods when free shipping is available

Thank you WooThemes for this one in your documentation.

Free shipping!? If you are offering free shipping and want to hide the other shipping methods you can do this by putting this into your functions.php:

$available_methods = array();</