How to Fix WooCommerce Template Overriding Problem

WooCommerce is great! Not only does it allow you to set up an eCommerce store in a blink of an eye, but it is also highly customizable allowing you to further advance its functionalities. But since expanding functionalities is no joke, it often involves customizing WooCommerce’s default templates.

Considering the fact that you clicked on this article, you are probably aware that doing the customizations can be a bit tricky, will require a decent amount of PHP knowledge, and can often produce unexpected results or none at all.

You make customizations to your #WooCommerce store but they keep disappearing after upgrades? You need to declare WooCommerce support in your theme! Click To Tweet

And while we can’t do much about the fact that you have to acquire some PHP knowledge, we can tell you what to do when your attempts at overriding template files fail and when all the changes you made in the templates simply disappear

That is why in this article, we’re going to teach you how to allow your WooCommerce template files to be overwritten. And in all honesty, doing that is very simple since the only thing you have to do is add a snippet of code to the child theme which will declare that your theme supports WooCommerce.

So in order to avoid stalling any longer, let’s jump right into it!

Declaring WooCommerce support

Laptop with code up close

Why do I have to do this?

Like we said earlier, WooCommerce is a wonderland for customizations, but if you want those customizations to stay on your site even when you upgrade it, you have to declare WooCommerce support in your WordPress theme.

You have to do it because WooCommerce template overriding only works on themes that have the support declared. Why? Well, for themes without declared support, WooCommerce assumes that they are not compatible with it and sticks to shortcode-based unsupported theme rendering.

How can you know the support isn’t already declared? Easily!

Just look into your functions.php file and look for the “add_theme_support” function. If that function is not present in the file, all the WooCommerce templates you add to the “/wp-content/[your-theme]/woocommerce/” folder won’t load.

Meaning any customization you make will vanish post-upgrade.

Paper toy

How do I do it?

Now that we have highlighted why it’s so important to declare support for WooCommerce in your theme, it’s only fair that we tell you how you can do so yourself.

Luckily for you, the process is super straightforward and basically involves adding just one function to your theme’s functions.php file.

Below we are going to include two types of functions used for declaring support. One is just for basic support, while the other one is for more advanced support.

Function for basic support

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

Function for more advanced support (support with settings)

This is considered to be the function for more advanced support because it allows you to specify default settings for your theme. Of course, keep in mind that these settings can be configured in Customizer if they are left unspecified.

function mytheme_add_woocommerce_support() {
add_theme_support( 'woocommerce', array(
'thumbnail_image_width' => 150,
'single_image_width' => 300,
'product_grid' => array(
'default_rows' => 3,
'min_rows' => 2,
'max_rows' => 8,
'default_columns' => 4,
'min_columns' => 2,
'max_columns' => 5,
 ),) );} add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );

Extra tip

You also have the following (optional) theme settings that you can set when declaring support. Those settings being:

  • thumbnail_image_width and single_image_width (these set the image sizes for the shop)
  • product_grid (these set default, minimum, and maximum column and row settings for the shop)

Conclusion

And there you have it, a super easy solution for how to make WooCommerce template overriding possible in WordPress.

We really hope that everything we said, was explained clearly enough. But in case it wasn’t, or in case you have any questions regarding this topic, let us know in the comments below!

Leave a Comment