How To Add Custom Sidebars For WooCommerce Pages On Your Genesis Powered Website

In the latest version of Lander, we have added a feature called “Custom Sidebars for WooCommerce pages”. This is in line with making sidebars on the WooCommerce pages relevant to the page content. It goes without saying, that you need to show right content at the right place for effective customer engagement.

In case of WooCommerce pages it is ideal to show WooCommerce widgets like WooCommerce product search-box, recently visited products, top rated products in your online store, etc. These widgets are highly contextual and help you in optimizing your sales funnel.

It is a no brainer that contextual WooCommerce widgets on WooCommerce pages will help you in influencing your customer’s decisions in a positive manner. And will ultimately result in driving more sales for your online store. In effect, this smart tip will help you in “Boosting the CONVERSION” for your online store powered by WooCommerce.

Here are 3 simple steps to help you achieve this (to add custom sidebars to WooCommerce pages on your Genesis powered website).

Step 1: Register the custom sidebars (widget areas)

Let’s begin with registering WooCommerce specific primary and secondary sidebars.

/* Register WooCommerce Primary sidebar */
genesis_register_sidebar( array(
    'name' => __( 'WooCommerce Primary Sidebar', 'genesis' ),
    'id' => 'bt-woo-primary-sb',
    'description' => __( 'This is the primary sidebar that will show up on all WooCommerce pages', 'genesis' ),
) );

/* Register WooCommerce Secondary sidebar */
genesis_register_sidebar( array(
    'name' => __( 'WooCommerce Secondary Sidebar', 'genesis' ),
    'id' => 'bt-woo-secondary-sb',
    'description' => __( 'This is the secondary sidebar that will show up on all WooCommerce pages', 'genesis' ),
) );

Step 2: Display the WooCommerce sidebars on WooCommerce pages

After registering the sidebars, you will need to unhook the primary and secondary sidebars from your Genesis site and add WooCommerce specific primary and secondary sidebars.

We will do this only for WooCommerce pages. First check if WooCommerce is active and then specify the WooCommerce pages where you want to show WooCommerce specific sidebars. Check out WooCommerce conditional tags here.

/* Unhook the WordPress Primary and Secondary Sidebars and hook the custom sidebars on WooCommerce pages */
add_action( 'genesis_before', 'bt_hook_woo_sidebars', 20 );
function bt_hook_woo_sidebars() {
    if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {    // Check if WooCommerce plugin is active
        if( is_woocommerce() || is_cart() || is_checkout() || is_account_page() ) {    // Proceed only if on a WooCommerce page
            remove_action( 'genesis_sidebar', 'genesis_do_sidebar' );
            remove_action( 'genesis_sidebar_alt', 'genesis_do_sidebar_alt' );
            add_action( 'genesis_sidebar', 'bt_woo_do_primary_sidebar' );
            add_action( 'genesis_sidebar_alt', 'bt_woo_do_secondary_sidebar' );
        }
    }
}

Step 3: Add Default Content for newly added sidebars

The default content for widget areas is a good indicator for showing the widget areas and defining its purpose to the site admin. The Genesis default widget area content enables you to show the sidebar with default content in place.

This comes in handy especially when you are planning to include the custom sidebars for WooCommerce pages in a Genesis child theme.

// Callback to display default WooCommerce Primary widget area on the specified pages
function bt_woo_do_primary_sidebar() {
    if ( ! dynamic_sidebar( 'bt-woo-primary-sb' ) && current_user_can( 'edit_theme_options' )  ) {
        genesis_default_widget_area_content( __( 'WooCommerce Primary Sidebar', 'genesis' ) );
    }
}

// Callback to display default WooCommerce Secondary widget area on the specified pages
function bt_woo_do_secondary_sidebar() {
    if ( ! dynamic_sidebar( 'bt-woo-secondary-sb' ) && current_user_can( 'edit_theme_options' )  ) {
        genesis_default_widget_area_content( __( 'WooCommerce Secondary Sidebar', 'genesis' ) );
    }
}

Think about conversion… Think Lander 🙂