Change Woocomerce shop-category header image

Hello.
I am in the process of developing a new site with Sydney pro.
It seems like the theme or woocommerce are using an the catagory image by default.

Example with catagery image: https://bjdev2.brodahljahren.no/produktkategori/interior/lykter-og-lysestaker/
Example without catagory image: https://bjdev2.brodahljahren.no/produktkategori/interior/tekstil/

Is it possible to ovverride this with some code?

Hello,

Is it possible to ovverride this with some code?

I’m not sure what exactly you want to achieve, can you please provide more details?

Kind Regards, Roman.
aThemes Support

I would like to change the header image woocommerce shop pages.
Please see attached image.

Hello, try to edit page and change the Featured Image:

Kind Regards, Roman.
aThemes Support

Edit page, do I need to create own shop page for that?
The site use standard woocommerce catagory page, not specific pages.

Hello there,

You can use this CSS code to change the header image on a specific product category page.

    .archive.term-55 .header-image {
    	 background-image: url('https://yoursite.com/path/to/image.jpg');
    }
    .archive.term-55 .header-image .header-inner {
    	 opacity: 0;
    }

Add it to Appearance > Customize > Additional CSS from dashboard.

Replace https://yoursite.com/path/to/image.jpg with your image from media library under the Dashboard > Media.

term-55 refers to category ID number 55. You need to adjust it and you can find it from Dashboard > Products > Categories > edit one category and navigate to the web browser’s address bar; you’ll see an address that looks like this:

wp-admin/term.php?taxonomy=product_cat&tag_ID=55 

​I hope this reply helps.

Regards,
Kharis
aThemes Support

Thanx, It doesnt work with this code unfortunately, can you see something wrong?

.archive.term-36 .header-image {
background-image: url(‘https://bjdev2.brodahljahren.no/wp-content/uploads/2020/08/englesson-web-atn2048_Englesson_soffa_carlton.jpg’);
}
.archive.term-36 .header-image .header-inner {
opacity: 0;
}

Dashboard > Products > Categories, adress:
https://bjdev2.brodahljahren.no/wp-admin/term.php?taxonomy=product_cat&tag_ID=36&post_type=product&wp_http_referer=%2Fwp-admin%2Fedit-tags.php%3Ftaxonomy%3Dproduct_cat%26post_type%3Dproduct

Result: https://bjdev2.brodahljahren.no/produktkategori/interior/

Hello there,

Try this code:

    .archive.term-36 .header-image {
      background-image: url('https://bjdev2.brodahljahren.no/wp-content/uploads/2020/08/englesson-web-atn2048_Englesson_soffa_carlton.jpg') !important;
    }
    .archive.term-36 .header-image .header-inner {
      opacity: 0;
    }

We need to add !important on the background image line to override the default style.

Regards,
Kharis
aThemes Support

Perfect, many thanks :slightly_smiling_face:

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support