Include WooCommerce options in the WordPress Customizer for robust theme customization

If you’ve done anything more than basic blogging with WordPress, then you most certainly have at least heard of WooCommerce; it’s the premier ecommerce plugin that’s so effective and popular that most WordPress shop-focused themes (including our own) are built to support it. In my last article we looked at using WP_Query to display your products in your theme, but in this article, we’ll come at things from another direction; making modifying WooCommerce even more intuitive for your users by incorporating options specific to WooCommerce into the WordPress Customizer.

Adding WooCommerce support to a theme

The first step is to declare support for WooCommerce via the add_theme_support function:

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

since we’re supporting WooCommerce in a theme, then generally-speaking we’re also going to have some dedicated options specific to the plugin; this isn’t necessarily the case every time of course, but it is the standard. We want these options to be intuitive and easy-to-find, so it’s recommended that they are placed in one section and panel specific to WooCommerce; this makes it easy for users to access, and helps us to better explain each options purpose within the wider WooCommerce context.

Creating your WooCommerce Customizer panel

Panels, sections and the individual customization settings in the customizer all have the theme_supports parameter, which lets us check if the theme supports the function in question – with this functionality we can hide the panel/section that contains the WooCommerce-specific options whenever WooCommerce is not installed or inactive. For example, it’s enough to provide an appropriate value to the theme_supports parameter next to the declaration:

$wp_customize->add_section(
        'woocommerce_options', 
        array(
            'title' => __('WooCommerce Settings'),
            'description' => __('Options dedicated for the WooCommerce plugin subpages'),
            'theme_supports' => array('woocommerce')
        )
    );

With this code we’ve setup the section for the customizer, but bear in mind that until you add at least one new control to the section using the $wp_customize->add_control function the section will still not appear in the customizer; without any options to set WordPress considers it pointless to display such sections.

Now, if we’ve used the above code, included the add_theme_support function, and added at least one control to the section, then the section should appear in the theme customization screen. However, as is often the case with things that seem simple at first, there’s an issue; if the WooCommerce plugin is disabled or uninstalled, this new option panel will still be visible in the customizer despite the fact that it can’t actually do anything useful. Since we’re trying to make our options as intuitive as possible, it’s imperative that we make this section appear only if WooCommerce is installed and active in the WordPress installation.

To achieve this, we should add a slight modification to our existing code, changing the manner in which we add support for WooCommerce in the theme:

add_action( 'after_setup_theme', 'woocommerce_support' );
    function woocommerce_support() {
        if (
            !in_array(
                'woocommerce/woocommerce.php', 
                apply_filters('active_plugins', get_option('active_plugins'))
             )
        ) {
            return;
        }

        add_theme_support('woocommerce');
    }

Instead of just adding WooCommerce support, this modified code now includes a condition which first checks whether the list of active plugins in the WordPress installation includes the woocommerce.php files; if not, then the add_theme_support function is not called, and this prevents the WooCommerce options section from being loaded in the WordPress Customizer.

Summary

With this article we now know how to make the various items of the theme customization screen appear only when their relevant plugin, such as WooCommerce, is installed and active in the WordPress instance. As a final thing to take away from this article, remember that the theme_supports parameter is mainly implemented for plugins to allow them to add their own options to the Customizer when certain conditions are fulfilled; thus, in the same way, when we create a plugin we can control if its additional options will only be visible when the theme actively supports the specific functions/plugin. As always, we hope this short guide has helped you get to grips with the option panel in the customizer, and don't forget to let us know of your own experiences and tips when coding themes in the comments below!