ONE TOP BANNER IMAGE PER CATEGORY PAGE
I want to display a dedicated banner for each woocommerce category page, instead of the generic one applying globally to all category pages.
Wordpress and all extensions are updated.
I found the good overriding way, the category template taxonomy-product_cat-{my_category_slug}.php and wrote a simple condition to identify current category and override archive-product-{my_category_slug}.php to display each category page.
My problem is that the background image is loaded in a CSS class page_title, but I can’t see the section it is applied to in the templates.
This is the section tag from the page source code :
<section class="page_title ds s-pt-60 s-pb-60 s-pt-md-90 s-pb-md-90 s-pt-xl-150 s-pb-xl-150 cover-background s-overlay">
This is the archive-product.php HTML :
<header class="woocommerce-products-header">
<?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
<h1 class="woocommerce-products-header__title page-title"><?php
woocommerce_page_title(); ?></h1>
<?php endif;
/* ……… */
do_action( 'woocommerce_archive_description' );
?>
</header>
I see the image section in the inspector of course, but can’t find it in templates and in the up sample I see only an H1 tag in the header. The full template is here.
I guess it might be in a hook, but I don’t find it in the woocommerce includes directory.
What I tried :
Different plugins without success, most of them worked fine but added banners to the main one without replacing it. Payware is OK but I don’t wanna spend $90 just to change top banners.
Creating my own classes. This was useless since I found no way to attach it to each category page.
Find a unique CSS selector to “catch” the section. I found none (I don’t say there are none).
What I wouldn’t want to do :
How could I achieve this properly ?
This is probably not the best way since it involves manually editing HTML in functions.php, but for now this is how we're doing it.
File: Your theme or child theme's functions.php
Code:
// Inject custom HTML on specific category pages
function custom_category_html() {
$page = get_queried_object();
if ($page) {
if ($page->term_id == 1) // Replace this with your intended Category ID #
echo '
<center><img src="/wp-content/uploads/.../some-image-for-category-1.jpg" /></center>
<h2>Example Heading</h2>
<p>Example paragraph</p>';
else if ($page->term_id == 2) // ....and so on
echo '...HTML for category ID 2';
}
}
add_action('woocommerce_before_shop_loop', 'custom_category_html');
We use the term or category ID # instead of category name so that changing the category name won't break the code. Here is an example of what get_queried_object() looks like while viewing a category page:
$page = get_queried_object();
echo '<pre>' . print_r($page, 1) . '</pre>';
Result:
WP_Term Object
(
[term_id] => 279
[name] => Shirts
[slug] => shirts
[term_group] => 0
[term_taxonomy_id] => 279
[taxonomy] => product_cat
[description] =>
[parent] => 277
[count] => 54
[filter] => raw
)
Take a look at pages like this for all available hooks on where to insert the custom HTML: https://www.businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/
In the example above, we're using woocommerce_before_shop_loop to display an image, heading, and short paragraph above a specific Category Archive Products display. For us we only need this method for a couple category views so it's acceptable for now. You could use PHP switch if you have many categories to use this on, but granted it isn't the most beautiful approach.