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

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

Home Forums Support Header Element: different background images for each woocommerce category

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #2388433
    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

    #2388450
    Leo
    Staff
    Customer Support

    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.

    #2388538
    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)

    #2388542
    Leo
    Staff
    Customer Support

    Sounds good πŸ™‚

    #2389198
    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

    #2389539
    David
    Staff
    Customer Support

    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 πŸ™‚

    #2390320
    Francisco

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

    #2391152
    David
    Staff
    Customer Support

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

    #2391953
    Francisco

    Hi!

    Captura-de-pantalla-2022-10-28-141853

    #2392615
    David
    Staff
    Customer Support

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

    #2393201
    David
    Staff
    Customer Support

    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 πŸ™‚

    #2393402
    Francisco

    Excellent idea David!

    #2393730
    David
    Staff
    Customer Support

    Glad to be of help

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.