Header Element: different background images for each woocommerce category

Hi there,

You would need to create a separate header element for each category unfortunately as it's category doesn't have a dynamic property like featured image etc.

OK! I have discovered that I can choose to show the element in "Archive category prodcut" and then choose each category. (I will have to create one element for each woocommerce category, but for small clients it would be OK)

Sounds good :)

Wouldn't it be easier to use category-specific CSS for the background-images? Seems to me a little bit over-the-top to use individual header elements for changing the background images. Do I miss anything?

Mike

Hi there,

a CSS option is definitely a possibility, or a custom developed Custom Field method could be used to do such a thing. But it really comes down to the user and how comfortable they are with a code solution over creating a new header element each time they add a category :)

Yes, custom CSS to each ID would be a good option also, thanks!

Can you share a link to one of the categories where i can see you current header element ?

Hi!

Ok, select the Container Block in that element, the one with the current background image.
In Advanced > Additional CSS Class(es) add: product_category_hero

Now we start with some CSS.

1. For each term slug you need to add a CSS rule like so:

body.term-slugname {
    --category-hero: url(https://your_domain/full_url_to_term_image);
}

This will store an Image URL for the specific category term slug:

For example:

body.term-technology {
    --category-hero: url(https://your_domain/full_url_to_image_for_technology);
}
body.term-travel {
    --category-hero: url(https://your_domain/full_url_to_image_for_travel);
}
body.term-food {
    --category-hero: url(https://your_domain/full_url_to_image_for_food);
}

So when we view the technology category, it will store the appropriate image in the --category-hero variable.

2. Now we can add some CSS to load that variable image:

.product_category_hero {
    background-image: var(--category-hero) !important;
}

Hi David,
do you use variables for a specific reason? By habit, I would have used body.term-food .product_category_hero. Your solution is, of course, more elegant.

Mike

do you use variables for a specific reason?

I do like CSS Variables, so i kind of look at them first.
But in this case, i had them to hand from another project that was auto-generating CSS variables.
So it was a quick copy and paste :)

Excellent idea David!

Glad to be of help