WooCommerce product category custom image

Question

I've been digging and digging, but I'm not finding the answers I need on this. I currently am using WordPress - Woocommerce, a purchased theme called Shopifiq.

I want to display a different banner on each product category page. The only thing I can think of is adding something like:

if ( is_product_category( '#' ) ) {
    echo do_something(); //display category thumbnail 
}

in maybe the functions.php file, but I'm not too familiar with PHP and I'm struggling. Any help would be super appreciated!

• edit

I should have mentioned I want the banner to replace the blue bar across the top, which is handles in page_titles.php. I installed a plugin that will display banners on product category pages if anyone is looking - http://wpbackoffice.com/plugins/woocommerce-category-banner/

But I want it to replace the blue title bar, not just show on the page.

Here's a category page of mine right now: http://dev.arnoldsofficefurniture.com/product-category/conference/

The logic should be something like:

• if product category, then div class="slider single page" should display a background of the product category banner.

Answer 1

not sure how your folder structure is setup in your purchased theme, but if you have Woocommerce installed already go to your woocommerce plugin (in the plugins folder) and inside that folder copy all the files under the folder directory called "templates" and place them in the root of your Shopifiq theme in a new folder directory that you're going name "woocommerce". Inside this folder you're going to see a php file called taxonomy-product_cat.php. This is the main landing page for your woocommerce categories. Place your conditional statement here.

if (is_product_category( 'shirts' )) { echo "whatever html/php you want to show up";  }

Push all files to your server and you should be good to go now.

Answer 2

After digging in the PHP files, I gave up and tried what I know best as a front-end developer - CSS. This is not ideal since it will need to be manually updated in the CSS whenever you want to change it, but it's a work around and seems to be functional!

Each product category page has a unique body class. In my case the class terms that were unique were term-conference and term-11 , which I targeted in the CSS. So it wound up like this:

body.archive.tax-product_cat.term-conference.term-11.woocommerce.woocommerce-page div.slider.single-page {
 background: rgba(0, 0, 0, 0) url("/wp-content/uploads/2015/04/conference_banner.jpg") no-repeat scroll center bottom / cover !important;
}