• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

The Cre8tive Diva - WordPress Developer

Digital Nomad | Helping WordPress & Genesis Framework Website Owners All Over the World

  • Home
  • About
    • Terms of Service & Privacy
    • Accessibility
  • Services
    • Blogger to WordPress Migration
    • Buddypress Installation
  • My Work
  • Blog
    • Tutorials
    • Five on Friday
    • Genesis Framework
    • Tipsy Tuesday
    • WordPress
  • Contact
Home » Add a Sales Banner Widget Area to Your WooCommerce Shop Using Genesis

Published on July 12, 2016 / Published on July 12, 2016 / Reading Time: 2 minutes

Add a Sales Banner Widget Area to Your WooCommerce Shop Using Genesis


Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 12 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 14 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 15 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 29 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 31 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 32 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 12 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 14 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 15 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag template invalid in Entity, line: 29 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag svg invalid in Entity, line: 31 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

Warning: DOMDocument::loadHTML(): Tag path invalid in Entity, line: 32 in /home/customer/www/cre8tivediva.com/public_html/wp-content/plugins/gistpress-develop/includes/class-gistpress.php on line 466

A few nights ago I was in one of the developer groups and a member asked me if I could assist them with adding a widget area on the Shop pages of a WooCommerce project.

2016-07-12_16-22-14

Below is the code and instructions on how I did that.

If you are unfamiliar with working with your theme files, stop and ask for help. If you are familiar with modifying your theme files – you should back them up before proceeding.

Please note the location/position I have used is below the Primary Nav (or Secondary Nav depending on your theme). If you want to move it to a different location, check out the Genesis Visual Hook guide.

To Add a Widget Area on All Shop Pages

If you would like to add one widget area to display on All Shop Pages, click “View Raw” in the bottom right of the code box below. Then copy/paste the following code into your functions.php file. Make sure you hit “Enter” to begin a new line.

//* Register the WooCommerce Shop Banner Widget Area on All Shop Pages
genesis_register_sidebar( array(
'id' => 'woocommerce-shop-banner',
'name' => __( 'WooCommerce Shop Banner', 'themename' ),
'description' => __( 'This is the WooCommerce shop banner widget area.', 'themename' ),
) );
//* Hook WooCommerce Shop Banner Widget on All Shop Pages
add_action( 'genesis_before_content_sidebar_wrap', 'c8d_before_shop_content' );
function c8d_before_shop_content() {
if ( is_woocommerce() ) {
genesis_widget_area( 'woocommerce-shop-banner', array(
'before' => '<div class="woocommerce-shop-banner" class="widget-area"><div class="wrap">',
'after' => '</div></div>',
) );
}
}
view raw functions.php hosted with ❤ by GitHub

To Add a Widget Area on Product Categories Only

If you would like to add one widget area to display on Product Categories Only, click “View Raw” in the bottom right of the code box below. Then copy/paste the following code into your functions.php file. Make sure you hit “Enter” to begin a new line.

//* Register the WooCommerce Shop Banner Widget Area on Product Categories Only
genesis_register_sidebar( array(
'id' => 'woocommerce-shop-banner',
'name' => __( 'WooCommerce Shop Banner', 'themename' ),
'description' => __( 'This is the WooCommerce shop banner widget area.', 'themename' ),
) );
//* Hook WooCommerce Shop Banner Widget on Product Categories Only
add_action( 'genesis_before_content_sidebar_wrap', 'c8d_before_shop_content' );
function c8d_before_shop_content() {
if ( is_product_category() ) {
genesis_widget_area( 'woocommerce-shop-banner', array(
'before' => '<div class="woocommerce-shop-banner" class="widget-area"><div class="wrap">',
'after' => '</div></div>',
) );
}
}
view raw functions2.php hosted with ❤ by GitHub

You can also add the widget area to single products, a specific category, a combination of categories or by using one of the other WooCommerce Conditional Tags.

You can see how it looks on all Shop pages here on the demo.

 

  • Like my Signature? Get the Signature Widget for Genesis right here!

  • FacebookTweetPinPrintShares2

    Filed Under: Genesis Framework, Tutorials, WooCommerce Tagged With: customization, ecommerce, how-to, online stores, shop

    A recent conflict was found when Genesis Simple Share is activated and configured while using the Posts and Page Grid in Genesis Blocks. The error can be seen when viewing the content on the front end. The error does not display in edit mode. Below is a temporary fix that will allow you to manually set […]

    Primary Sidebar

    It's just me and my dog Bella. I am a freelance web developer at Cre8tiveDiva.com. I build websites using WordPress and the Genesis Framework, WooCommerce and provide troubleshooting and support. I also build with Shopify. I love chocolate, lots of coffee!

    Sign Me Up!

    Receive my blog posts, tips and updates delivered to your inbox!

    Yes, Sign Me Up

    *By signing up you will receive new blogs, updates on products, services and important alerts.

    Categories

    • Design
    • eCommerce
    • Five on Friday
    • Fonts
    • Free Themes
    • Freebie Friday
    • Genesis Framework
    • Genesis Plugins
    • Genesis Themes
    • Genesis Untapped
    • Instagram
    • MailChimp
    • News
    • Plugins
    • Press This News
    • Social Media
    • Tipsy Tuesday
    • Troubleshooting
    • Tutorials
    • Uncategorized
    • Web Development
    • WooCommerce
    • WordPress
    • WordPress Plugins

    Footer

    Digital Nomad! I can be anywhere I wanna be now.

    Latest Blog Posts

    • Temporary Fix When Using Genesis Blocks Posts and Page Grid with Genesis Simple Share
    • How to Add Reading Time to a WordPress Genesis Child Theme Without a Plugin
    • How to Add “Shop” to WooCommerce Breadcrumbs when Using Yoast

    Looking for Something?

    Copyright © 2012–2022 · Designed with by Me! · Hosted on SiteGround

    We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.OkPrivacy policy