how to override banner on category/ archive pages

[goldpig]

Hello, you can see what I am trying to do here:
https://www.chinesecoins.com/product-category/panda-coins/

I am using this plugin:

WooCommerce Category Banner

and want to be able to customize the banner image for each category. Unfortunately, I don’t know how to get rid of the default one showing.

Please note, I would like to keep the associated text and have it overlay the banner I choose with the plugin. It would also be cool to put whatever text I like to overlay this area on each product category page like this.

Look forward to your reply, have purchased two of your themes and love your work.

Thanks,
Richard

[Mohammad – SUPPORT]

Hi,
Please open to edit woocommerce-category-banner.php at /wp-content/plugins/woocommerce-category-banner/

Find this code:-
echo "<img src='" . $url . "' class='category_banner_image' />";
Change to:-
echo '<style>.page-heading{background-image: url("'.$url.'") !important;background-position: center top;background-repeat: repeat;background-size: auto auto;}</style>';

Thanks
Mohammad

[goldpig]

Hello, thanks for your reply but it didn’t work.
See: https://www.chinesecoins.com/product-category/panda-coins/

It is now as if the plugin were not installed, showing the default image and not the one uploaded through the plugin.

[Mohammad – SUPPORT]

Hi,
Please provide me wordpress admin login detail so i can check and resolve the issue.
Thanks
Mohammad

[goldpig]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
I have resolved the issue by using same code so please check it now. You forgot to paste echo so it did not work.
Thanks
Mohammad

[goldpig]

Hi Mohammad, that’s great thanks!

Do you know how to insert a break (and for it to work) on the product category name/ title? <br> doesn’t do it..

[Mohammad – SUPPORT]

Hi,
I am not getting you clearly so please attach a marked screenshot.
Thanks
Mohammad

[goldpig]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-
.term-2 .page-heading h1{width:150px !important;}

Thanks

[goldpig]

thanks but this does not allow the <br> to work in the area shown on the previous screenshot. Let me know if you can get it to work.

Cheers!

[Mohammad – SUPPORT]

Hi,
I am afraid that its not possible.
Thanks
Mohammad