Makers Byte
Published in

Makers Byte

How to enable WooCommerce Support for your custom theme?

A snippet of code for enabling WooCommerce theme support

via unsplash.com

If you’re using a WordPress theme that contains template overrides, you can’t use WooCommerce until you’ve declared support. Fortunately, this process is pretty straightforward and simply requires adding the add_theme_support function to accomplish.

Unless you take this quick step, WooCommerce will assume you’re using an incompatible theme. To help you avoid this mess, we’ll lay out the process from start to finish so you can add WooCommerce support and take advantage of its amazing functions in your theme.

Note — Make sure you backup your site before doing any changes

Declaring WooCommerce support is straightforward and involves adding one function in your theme’s functions.php file.

Basic usage:

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

Make sure you are using the after_setup_theme hook and not the init hook. Read more about this at the documentation for add_theme_support.

Where to add this snippet?

You can place this snippets at the bottom of your theme in functions.php file.

Usage with settings:

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' );

These are optional theme settings that you can set when declaring WooCommerce support.

thumbnail_image_width and single_image_width will set the image sizes for the shop. If these are not declared when adding theme support, the user can set image sizes in the Customizer under the WooCommerce > Product Images section. Read more about this feature here.

The ‘product_grid’ settings let theme developers set default, minimum, and maximum column and row settings for the Shop. Users can set the rows and columns in the Customizer under the WooCommerce > Product Catalog section. Read more about this feature here..

If you enjoyed this post…it would mean a lot to me if you could click on the “claps” icon…up to 50 claps allowed — Thank You!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store