Hello lukasgodoy,
Thanks for reaching out to us.
Actually, our plugin category banner is working based on the hook given below. "woocommerce_before_main_content"
So, if your current theme does not contains the above hook then, you need to add that hook on your theme file location in which you want to show the banner.
Please add hook like below.
do_action('woocommerce_before_main_content');
Let me know still if any.
Thanks,
Hello,
please can you explain me “to add that hook on your theme file location in which you want to show the banner” how to do?
Thank you
Chris
Should I insert this in the archive page?
Hello lukasgodoy, macmorre,
Thanks for reaching out to us.
Actually, do_action('woocommerce_before_main_content'); this is the code which will insert the banner html once you call it.
So, yes you can add that action(line) in archive page or header.php file based on your layout requirement.
For eg. if you want to display the banner after the navigation menu then, you need to add this line after the nav tag.
Like:
<nav>
</nav>
So, after this ‘</nav>’ tag you can add our line of code like below.
<?php
echo do_action('woocommerce_before_main_content');
?>
So, it will display the banner after that nav menu.
I hope this clear now. Let us know still if any.
Thanks,
Hello,
thank you very much for your answer. It works, but the banner is displayed across the entire width of the page. Is it possible to limit this to the shop width only?
Thx Chris
Hello Lukas,
can you define the width of the banner. In which php-file did you enter the hook?
Thx Chris
@macmorre I define the width of the banner with custom css, like this:
.wbm_banner_image {
width: 1160px;
margin: auto;
}
“Margin: auto” will center the bannner.
Hello Lukas,
thank you very much. I placed the hook on the header.php, is this correct?
Now I have a lot of space between banner and shop.
I set padding: 20px; to have distance between page title and banner.
Best regards
Christoph
@macmorre I set the hook in archive page, because I want to show in Woocommerce categories. You can use the inspector in the browser to correct the space between banner and the rest of the content.
Thank you so much!!!
Best regards from Austria
Chris
Hello Lukas,
do you also habe a solution for mobile version?
Thx Chris
Hello macmorre,
Thanks for your query.
For the mobile version, you need to manage the CSS based on your current them layout.
If you are using the default woocommmerce theme like “twentysixteen” then, it will auto adjust the responsive of banner in mobile version.
If you are using custom theme then, you need to manage it by adding the media CSS.
I hope this helps. Let us know still if any.
Thanks,
Support team
Hi, @dots!
Is this correct?
get_header( ‘shop’ ); ?>
<?php
/**
* woocommerce_before_main_content hook
*
* @hooked woocommerce_output_content_wrapper – 10 (outputs opening divs for the content)
* @hooked woocommerce_breadcrumb – 20
*/
woocommerce_breadcrumb();
woocommerce_output_content_wrapper();
woocommerce_before_main_content ();
?>
Hello lukasgodoy,
Thanks for your reply.
You can add like below.
get_header( ‘shop’ ); ?>
<?php
/**
* woocommerce_before_main_content hook
*
* @hooked woocommerce_output_content_wrapper – 10 (outputs opening divs for the content)
* @hooked woocommerce_breadcrumb – 20
*/
echo do_action(‘woocommerce_before_main_content’);
woocommerce_breadcrumb();
woocommerce_output_content_wrapper();
woocommerce_before_main_content ();
?>
As you can see in above code that I have just added one line which you can add any place to display the banner.
For ex. If you want banner after the woocommerce_breadcrumb() this function then add that one live after that function and so on.
I hope this helps.
Thanks,
