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.
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //* 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>', | |
| ) ); | |
| } | |
| } |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //* 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>', | |
| ) ); | |
| } | |
| } |
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.
