One thing that’s frequently requested with Kadence is the ability to add a banner on the WooCommerce Shop page. While Kadence doesn’t provide a built-in option for this, you can easily achieve it by adding the following code to your theme’s functions.php file and applying the accompanying CSS in the Additional CSS box.
Step 1: Add This Code to Your functions.php File
This registers a widget area and displays it on the shop, category, and tag pages.
This file contains hidden or 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 | |
| function c8d_register_shop_banner_widget() { | |
| register_sidebar( array( | |
| 'id' => 'woocommerce-shop-banner', | |
| 'name' => __( 'WooCommerce Shop Banner', 'themename' ), | |
| 'description' => __( 'This is the WooCommerce shop banner widget area.', 'themename' ), | |
| 'before_widget' => '<div class="woocommerce-shop-banner widget %2$s">', | |
| 'after_widget' => '</div>', | |
| 'before_title' => '<h2 class="widget-title">', | |
| 'after_title' => '</h2>', | |
| ) ); | |
| } | |
| add_action( 'widgets_init', 'c8d_register_shop_banner_widget' ); | |
| // Display the Shop Banner Widget on Shop & Category Pages | |
| function c8d_before_shop_content() { | |
| if ( ( is_shop() || is_product_category() || is_product_tag() ) && is_active_sidebar( 'woocommerce-shop-banner' ) ) { | |
| echo '<div class="woocommerce-shop-banner-wrapper">'; | |
| dynamic_sidebar( 'woocommerce-shop-banner' ); | |
| echo '</div>'; | |
| } | |
| } | |
| add_action( 'woocommerce_before_main_content', 'c8d_before_shop_content', 5 ); |
Step 2: Add This CSS in Appearance > Customize > Additional CSS
This centers the banner content and adds spacing for a clean layout.
This file contains hidden or 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
| /* CSS to center the banner contents */ | |
| .woocommerce-shop-banner-wrapper { | |
| display: flex; | |
| justify-content: center; /* Center horizontally */ | |
| align-items: center; | |
| text-align: center; | |
| margin-top: 20px; /* Adjust as needed */ | |
| } | |
| .woocommerce-shop-banner { | |
| max-width: 1200px; /* Prevents content from stretching too wide */ | |
| width: 100%; | |
| } |
How to Use It
- Add the PHP code to your functions.php file.
- Add the CSS to the Additional CSS section.
- Go to Appearance > Widgets and add any widget (like an image or text) to the WooCommerce Shop Banner area.
This will display the banner above the shop content on the Shop and Category pages.
![Add an “Affiliate Disclaimer” Widget to Your Blog Posts [Genesis]](https://cre8tivediva.com/wp-content/uploads/2016/09/genesis-add-disclaimer.png)
![Add an “Affiliate Disclaimer” Widget to Your Blog Posts [Kadence]](https://cre8tivediva.com/wp-content/uploads/2025/01/austin-distel-goFBjlQiZFU-unsplash-scaled.jpg)