Theming WooCommerce

WordCamp MKE 2015by Bridget Wessel

What I’ll Cover1. Creating a custom theme that supports WooCommerce.

2. WooCommerce pages and the templates they use.

3. How to override WooCommerce templates.

4. WooCommerce hooks - and why they are better than overriding templates (in my opinion).

5. Using WooCommerce conditionals.

6. Removing WooCommerce default stylesheets.

Make WooCommerce Your OwnAfter switching to your own custom theme, WooCommerce will warn you to add WooCommerce support:

To remove this warning, use code below. However, this just removes the message and does not set up WooCommerce support. There is still work to do.

add_action( 'after_setup_theme', 'woocommerce_support' );function woocommerce_support() { add_theme_support( 'woocommerce' );}

WooCommerce Default Templates● To create a theme that supports WooCommerce, you’ll

need to style at least the shop, single-product, cart, checkout, my account and possibly product category pages.

● Checkout, Cart and My Account pages use your theme’s page.php template. They replace <?php the_content(); ?> with their own content.

● Shop, Single Product and Taxonomy pages (product categories and tags) use their own WooCommerce templates.

● All WooCommerce pages will use your theme’s header and footer templates ~ unless you create a header-shop.php and/or footer-shop.php. I use my site wide header.php and footer.php templates, and I add conditionals, if needed, to change any data in my header.php and footer.php for WooCommerce pages.

My Account Default Template

Shop Default Template

Simplest (and least customizable) Way to Fix Shop, Single Product and Taxonomy PagesCopy page.php template in your theme to woocommerce.php in your theme root. Replace the loop in woocommerce.php with <?php woocommerce_content(); ?> This will replace the loop with WooCommerce’s own loop.

If needed, add any HTML around this function to make the WooCommerce data display the way you want it to.

Shop Page with woocommerce.php template

But, using the woocommerce.php template lacks some customization● Using woocommerce.php template in your theme stops a

few WooCommerce templates from being overwritten from your theme. The following do not override when woocommerce.php file is added to your theme. There may be more, these are what I found doing a few quick tests.

○ archive-product.php

○ single-product.php

○ taxonomy-product_cat.php

● It also stops the actions woocommerce_before_main_content and woocommerce_after_main_content from being overwritten in your theme.

More Customizeable Alternative: Overriding Templates

For this example, let’s add a note to every product below the ‘Add to Cart’ button. First, find the template in the plugin folder that creates the ‘Add to Cart’ button. Then copy that template to your own theme so you can override it.

Change the copied template in your theme

Excerpt from simple.php

</form>

<?php do_action( 'woocommerce_after_add_to_cart_form' ); ?>

/* BW: Added note below */

<p class="notice">Please note: All products are as is. No returns.</p>

<?php endif; ?>

With Note Added

Another Option: Use WooCommerce Hooks

WooCommerce makes use of extensive hooks throughout their templates. You can change almost anything in WooCommerce through a hook.

Why are hooks better? Because they don’t need to be changed any time WooCommerce makes a change to their own templates ~ which they do fairly often.

You can see all WooCommerce templates overwritten in a theme by going to WP Dashboard -> WooCommerce -> System Status and looking at the bottom of the page. So far, mine looks like this:

If a template needs to be updated, WooCommerce will add a note next to it on this page.

Quick Review of Hooks: ActionsActions:● Executed at specific points as WordPress generates page

content.● You can remove actions, replace with your own, or add

additional functions that are executed when an action is called.

Action creation (WooCommerce creates the actions):

do_action( $tag, $var_a, $var_b, $etc );

$tag = hook name

$var_x = One or more additional variables passed to the action functions. Optional.

Using ActionsTo use:First, find the action within the WooCommerce template. Example:

/* * woocommerce_before_main_content hook

* @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)

* @hooked woocommerce_breadcrumb - 20 */

do_action( 'woocommerce_before_main_content' );

Add Own Functions to ActionsYou can add in your own function:add_action( $tag, $function_to_add, $priority, $accepted_args );

$tag = The action hook to which the function to be added is hooked.

$function_to_add = The name of your function that should be run instead.

$priority = priority (order it runs) as defined when function replacing was

originally hooked - or you could change to run function earlier or later in

the action hook.

$accepted_args = If the function takes passed arguments, how many does

it take. Default is 1. If an accepted argument is available, you’ll find it in

the original do_action method in the WooCommerce template. Example:

do_action( 'woocommerce_before_checkout_form', $checkout ); in

/woocommerce/templates/checkout/form-checkout.php

Remove Functions in ActionsYou can remove a function from an action defined by WooCommerce in your theme’s functions.phpremove_action( $tag, $function_to_remove, $priority );

$tag = The action hook to which the function to be removed is

hooked.

$function_to_remove = The name of the function which should be

removed.

$priority = priority (order it runs) as defined when function originally

hooked.

Fix Shop, Single Product and Taxonomy Pages with Hooks instead of woocommerce.php template.//removes div#container & div#contentremove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);

remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() { echo '<div class="row"><div class="large-12 columns">';}

function my_theme_wrapper_end() { echo '</div></div>';}

Shop Page Using Hooks to Fix Up the Template.

Let’s Remove the Extra StuffLuckily, WooCommerce gives us hooks we can use to remove the extra stuff from its pages. I included actions I commonly remove from my sites below.

//remove breadcrumbsremove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );

//remove sortingremove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

//remove result countremove_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );

//remove sidebarremove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10);

//remove SKU Meta dataremove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40);

Cleaned Up Shop Page

Let’s add a note after every ‘Add to Cart’ button with an actionThe /woocommerce/templates/single-product/add-to-cart/simple.php has an action right above the note I added.

</form>

<?php do_action( 'woocommerce_after_add_to_cart_form' ); ?>

<p class="notice">Please note: All products are as is. No returns.</p>

<?php endif; ?>

Message using action instead of changing template.Code added to functions.php

add_action('woocommerce_after_add_to_cart_form', 'my_theme_add_message_after_add_button', 999);

function my_theme_add_message_after_add_button(){

echo '<p class="notice">Take our word for it. You\'re gonna like our stuff.</p>';

}

Hooks: FiltersFilters:● Used to change a value.

● Always return a value.

Filter creation (WooCommerce creates the filters):

apply_filters( $tag, $value, $var_a, $var_b, $etc );

$tag = hook name

$value = The value which can be modified by filters hooked to $tag.

$var_x = Any additional variables passed to the filter functions. Optional.

Returns: The result of $value after all hooked functions are applied to it.

Changing $value with Filter:

add_filter( $tag, $function_to_add, $priority, $accepted_args );

$tag = hook name, as defined in apply_filters function you are changing value of

$function_to_add = The name of the function to be called when the custom Filter is applied.

$priority = If there is more than one function used on this filter, which order should this function be called

$accepted_args = The number of arguments the function(s) accept(s). Default is 1. $value is included in count.

Filters in WooCommerceChange number of products per page

Example:

add_filter( 'loop_shop_per_page', 'my_theme_shop_per_page', 20, 1 );

function my_theme_shop_per_page($posts_per_page){

return 1;

}

This particular filter is found in plugins\woocommerce\includes\class-wc-query.php

Number of Items per page changed

Add an Ingredients Tab on the Product PageAdd an ‘ingredients’ custom field to Product. (ACF is a great plugin for adding custom fields.)

/woocommerce/templates/single-product/tabs/tabs.php defines the following filter:

/**

* Filter tabs and allow third parties to add their own

*

* Each tab is an array containing title, callback and priority.

* @see woocommerce_default_product_tabs()

*/

$tabs = apply_filters( 'woocommerce_product_tabs', array() );

This is what we want to hook into to define other tabs.

Add an Ingredients Tab on Single Product PageThen add filter to ‘woocommerce_product_tabs’ to add Ingredients into tab array.

add_filter( 'woocommerce_product_tabs', 'my_theme_product_tabs', 99, 1 );

function my_theme_product_tabs( $tabs ) {

if( get_field("ingredients") ) { //get_field function is part of ACF

$tabs['ingredients_tab'] = array(

'title' => __('Ingredients', 'woocommerce'),

'priority' => 40,

'callback' => 'my_theme_ingredient_product_tab_content'

);

}

return $tabs;

}

function my_theme_ingredient_product_tab_content() {

echo get_field("ingredients");

}

Ingredients Tab Display

WooCommerce ConditionalsWithin your theme you can use WooCommerce Conditionals to do different things on different pages. Information on WooCommerce Conditionals, can be found here: http://docs.woothemes.com/document/conditional-tags/Example:

add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);

function my_theme_wrapper_start() {

echo '<div class="row">';

if(is_shop()) {

echo '<div class="large-8 columns large-centered"><p class="info">[On SHOP PAGE]</p>';

}else {

echo '<div class="large-12 columns"><p class="info">[Using woocommerce_before_main_content]</p>';

}

}

Removing WooCommerce Styles

Remove WooCommerce’s StylesWooCommerce comes with its own styles, but you don’t have to use them. For example, WooCommerce adds rounded corners to buttons, makes prices green, and ‘Add to Cart’ button purple.

WooCommerce comes with a filter to remove these styles so you can replace with your own without overriding everything in your CSS,

add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

WooCommerce Default Styles Removed

Wrap UpQuick Review● The templates you’ll need to style to support WooCommerce● Why using hooks is better than overwriting templates● WooCommerce Conditionals and how to remove WooCommerce

Styles

My InfoWebsite: http://www.unboxinteractive.comTwitter: @bridgetwes

Thank you!