Skip to main content
WordPress made easy with the drag & drop Total WordPress Theme!Learn More

How to Make A WordPress Theme WooCommerce Ready

Last updated on:
Make Your WordPress Theme WooCommerce Compatible with Theses Helpful Snippets

So you want to add a shop to your theme – awesome! WooCommerce is a great choice. Technically speaking ALL themes are “WooCommerce Compatible” because it’s a plugin. In theory any plugin should work with any WordPress theme (that is coded properly).

As a theme developer though you may want to tweak the output of WooCommerce to better fit your theme or to provide options to your end users not readily available in the WooCommerce settings (such as altering the number of columns on the shop). Below you will find some helpful snippets that you can use to provide “better” support for WooCommerce in your theme and/or to alter things for your specific design.

Important: Many of the snippets below use functions available in WooCommerce only. So make sure these snippets aren’t just dumped at the bottom of your functions.php file in a theme created for distribution. If you are going to share your theme with others or sell it be sure to place the snippets in their own file loaded only when the WooCommerce plugin is active.

Check if WooCommerce is Enabled

In my themes I like to define a custom constant that can be used to check if WooCommerce is enabled this way I can include files or run functions only when WooCommerce is active (see important message above if you haven’t yet).

// Add new constant that returns true if WooCommerce is active
define( 'WPEX_WOOCOMMERCE_ACTIVE', class_exists( 'WooCommerce' ) );

// Checking if WooCommerce is active
    // Do something...
    // Such as including a new file with all your Woo edits.

Declare WooCommerce Support

This is the first and most important piece of code to add to your theme which “enables” WooCommerce support and prevents the warnings from the plugin telling the end user that the theme is not compatible.

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

Remove WooCommerce CSS

Personally I rather override WooCommerce styles to prevent any possible issues with 3rd party WooCommerce plugins. However, if you want to remove all WooCommerce styles it is very easy.

The following snippet is for removing ALL WooCommerce styles:

// Remove all Woo Styles
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

This snippet is an example of conditionally removing specific CSS styles:

function wpex_remove_woo_styles( $styles ) {
	unset( $styles['woocommerce-general'] );
	unset( $styles['woocommerce-layout'] );
	unset( $styles['woocommerce-smallscreen'] );
	return $styles;
add_filter( 'woocommerce_enqueue_styles', 'wpex_remove_woo_styles' );

Enable WooCommerce Product Gallery, Zoom & Lightbox (v3.0+)

In WooCommerce 3.0 they introduced a new product gallery, zoom and lightbox. These must all be enabled via “add_theme_support” if you want to make use of them in your theme.

add_theme_support( 'wc-product-gallery-slider' );
add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );

Remove The Shop Title

A lot of themes already have functions to display archive titles so this code removes the extra title from WooCommerce which is better then hiding it via CSS.

add_filter( 'woocommerce_show_page_title', '__return_false' );

Alter The Archive Title for The Shop

If your theme is using the archive_title() or get_archive_title() functions to display the title for your archives you can easily tweak it via a filter to grab the name of your product page instead for the shop archive title.

function wpex_woo_archive_title( $title ) {
	if ( is_shop() && $shop_id = wc_get_page_id( 'shop' ) ) {
		$title = get_the_title( $shop_id );
	return $title;
add_filter( 'get_the_archive_title', 'wpex_woo_archive_title' );

Change the number of products displayed per page on the shop

Used to alter how many products display per page on the shop and product archives (categories and tags).

// Alter WooCommerce shop posts per page
function wpex_woo_posts_per_page( $cols ) {
    return 12;
add_filter( 'loop_shop_per_page', 'wpex_woo_posts_per_page' );

Change the number of columns displayed on the shop per row

I don’t understand why WooCommerce works in this way but you can’t just alter the ‘loop_shop_columns’ filter, you must also add the unique classes to the body tag in order for the columns to work. While the Woo Shortcodes have a div wrapper with the correct classes the shop pages do not, that’s why we need two functions.

// Alter shop columns
function wpex_woo_shop_columns( $columns ) {
	return 4;
add_filter( 'loop_shop_columns', 'wpex_woo_shop_columns' );

// Add correct body class for shop columns
function wpex_woo_shop_columns_body_class( $classes ) {
	if ( is_shop() || is_product_category() || is_product_tag() ) {
		$classes[] = 'columns-4';
	return $classes;
add_filter( 'body_class', 'wpex_woo_shop_columns_body_class' );

Change the Next & Previous Pagination Arrows

This snippet will allow you to tweak the pagination arrows on the shop to match those in your theme.

function wpex_woo_pagination_args( $args ) {
	$args['prev_text'] = '<i class="fa fa-angle-left"></i>';
	$args['next_text'] = '<i class="fa fa-angle-right"></i>';
	return $args;
add_filter( 'woocommerce_pagination_args', 'wpex_woo_pagination_args' );

Change the OnSale Badge Text

Especially useful on sites using a different language or to remove the exclamation mark which I am not a huge fan of.

function wpex_woo_sale_flash() {
	return '<span class="onsale">' . esc_html__( 'Sale', 'woocommerce' ) . '</span>';
add_filter( 'woocommerce_sale_flash', 'wpex_woo_sale_flash' );

Change Product Gallery thumbnails columns

You may want to change the number of columns for the single product gallery thumbnails depending on your layout and this function will do just that.

function wpex_woo_product_thumbnails_columns() {
	return 4;
add_action( 'woocommerce_product_thumbnails_columns', 'wpex_woo_product_thumbnails_columns' );

Alter the number of displayed related products

Used to alter the number of products displayed for related products on the single product page.

// Set related products to display 4 products
function wpex_woo_related_posts_per_page( $args ) {
	$args['posts_per_page'] = 4;
	return $args;
add_filter( 'woocommerce_output_related_products_args', 'wpex_woo_related_posts_per_page' );

Change the number of columns per row for related & up-sells sections on products

Just like the shop if you want to properly alter the number of columns for related and up-sell products on the single product pages you must filter the columns and also alter the body classes accordingly.

// Filter up-sells columns
function wpex_woo_single_loops_columns( $columns ) {
	return 4;
add_filter( 'woocommerce_up_sells_columns', 'wpex_woo_single_loops_columns' );

// Filter related args
function wpex_woo_related_columns( $args ) {
	$args['columns'] = 4;
	return $args;
add_filter( 'woocommerce_output_related_products_args', 'wpex_woo_related_columns', 10 );

// Filter body classes to add column class
function wpex_woo_single_loops_columns_body_class( $classes ) {
	if ( is_singular( 'product' ) ) {
		$classes[] = 'columns-4';
	return $classes;
add_filter( 'body_class', 'wpex_woo_single_loops_columns_body_class' );

Add a dynamic cart link & cart cost to your menu

This snippet will add a WooCommerce cart item to your menu that displays the cost of the items in your cart. Plus if your site has Font-Awesome enabled it will display a little shopping bag icon. Important: These functions must not be wrapped in an is_admin() conditional because they rely on AJAX to update the cost you must make sure the functions are available when is_admin() returns true and false.

// Add the cart link to menu
function wpex_add_menu_cart_item_to_menus( $items, $args ) {

	// Make sure your change 'wpex_main' to your Menu location !!!!
	if ( $args->theme_location === 'wpex_main' ) {

		$css_class = 'menu-item menu-item-type-cart menu-item-type-woocommerce-cart';
		if ( is_cart() ) {
			$css_class .= ' current-menu-item';

		$items .= '<li class="' . esc_attr( $css_class ) . '">';

			$items .= wpex_menu_cart_item();

		$items .= '</li>';


	return $items;

add_filter( 'wp_nav_menu_items', 'wpex_add_menu_cart_item_to_menus', 10, 2 );

// Function returns the main menu cart link
function wpex_menu_cart_item() {

	$output = '';

	$cart_count = WC()->cart->cart_contents_count;

	$css_class = 'wpex-menu-cart-total wpex-cart-total-'. intval( $cart_count );

	if ( $cart_count ) {
		$url  = WC()->cart->get_cart_url();
	} else {
		$url  = wc_get_page_permalink( 'shop' );

	$html = $cart_extra = WC()->cart->get_cart_total();
	$html = str_replace( 'amount', '', $html );

	$output .= '<a href="'. esc_url( $url ) .'" class="' . esc_attr( $css_class ) . '">';

		$output .= '<span class="fa fa-shopping-bag"></span>';

		$output .= wp_kses_post( $html );

	$output .= '</a>';

	return $output;

// Update cart link with AJAX
function wpex_main_menu_cart_link_fragments( $fragments ) {
	$fragments['.wpex-menu-cart-total'] = wpex_menu_cart_item();
	return $fragments;
add_filter( 'add_to_cart_fragments', 'wpex_main_menu_cart_link_fragments' );


WooCommerce will work with any theme by default but adding some extra support for the plugin so that it better fits your theme is very easy to do. I actually wrote this post while coding our New York WordPress Blog & Shop theme so most of these tweaks are included in our theme. Or if you’d rather you can purchase the theme to have a look at how everything was done (see the files at wpex-new-york/inc/woocommerce) – it may be an easier way for you to learn how to properly add custom support for the WooCommerce plugin by looking at an already coded theme.

Are there any other snippets you think belong on this list or you would find helpful when developing new WooCommerce-ready themes?

Subscribe to the Newsletter

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.


  1. Ankur Gupta

    Thanks for sharing. this post is very helpful for my new startup website.

  2. sameeuor

    Thank you very much for your article. You saved my lot times.

  3. Appstrape Solution

    Hello Thanks for sharing .
    I did all steps but on product page It is not showing any product

    Fatal error: Call to a member function is_on_sale() on null in wp-content\plugins\woocommerce\templates\single-product\sale-flash.php on line 29

    • AJ Clarke

      None of the snippets above would cause the issue sounds like a core plugin bug you should report on the WooCommerce github page. Based on the error the global $product variable is returning null (which it never should). But it could also be a theme or plugin issue, so before reporting any bug I would first recommend you try switching themes and disabling active plugins to test.

  4. Josh

    So, I am decent enough at piecing together HTML/CSS and tweaking the PHP files in wordpress but there is a lot of code here to deal with.

    Could I just dump each section of code here into a new php document then simply include that file in my main theme? Or I read something about using on woocommerce pages only, so would I only do an include with some sort of IF statement over the URL or another variable to make sure its loaded only when woocommerce is loaded?

    • AJ Clarke


      Yes you could just dump each section into a new php document and use require_once to include it via the functions.php file. All the filters used in the code target WooCommerce exclusively so you don’t need to use any if/else statements.The thing is you don’t NEED all of this, technically every theme out there will work with WooCommerce these are added functions you can use to provider better support for the plugin so read through each description so you are only adding the snippets you want/need.

  5. Waqas

    Thanks for the article. Helped me a lot.

Leave a Reply

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

Learn how your comment data is processed by viewing our privacy policy here.