1

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 :

  • Any barbarian inline JS
  • Breaking the theme with excess of CSS fixes

How could I achieve this properly ?

GwadaKing
  • 61
  • 11
  • This method is not optimal. You need to add a meta field for each product category, then save it when adding a new category or editing the category, and then check in each product category whether this category has a banner or not. If it has a banner, display it. – Hamid Reza Yazdani Feb 22 '21 at 02:22
  • @HamidRezaYazdani Basically, Woocommerce doesn't give the option to chose one top banner per category. What you can do in the UI is defining one ** thumbnail ** per category. My theme use them to illustrate categories in shop page, but not to display on top of page in full width... – GwadaKing Feb 22 '21 at 16:15

0 Answers0