[Resolved] Header Element: different background images for each woocommerce category

[Francisco]

Hi,

I know that I can create a Header Element with the TITLE of each woocommerce category. But is there any way to add a DIFFERENT background image for each header? For example Woocommerce category “T-shirt” should have a specific background image and “Jackets” other one.

Thanks,
Francisco

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Francisco]

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)

[Leo]

Sounds good 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[mkjj]

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

[David]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Francisco]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Francisco]

Hi!

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[mkjj]

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

[David]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Francisco]

Excellent idea David!

[David]

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts