[Support request] Page Header on WooCommerce Product Archive not working

Home Forums Support [Support request] Page Header on WooCommerce Product Archive not working

Home Forums Support Page Header on WooCommerce Product Archive not working

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #918244
    Joe

    Hello,

    I’m currently unable to get a Page Header element to work on the WooCommerce Product Archive: https://impressionberlin.com/all-products/

    I have a Page Header set-up and set to Custom Image, but it does not display the image. (If I add a div with text to the page header content it does display, so the problem is not with the display rule).

    On the other pages on the site, I am only able to display Page Header images by using Featured Image β€” if I set them just as a custom image, they do not display. (eg. https://impressionberlin.com/studio/ β€” the Page Header is displaying featured image)

    Could you make any suggestions of how to fix this, please?

    #918300
    David
    Staff
    Customer Support

    Hi there,

    this page: https://impressionberlin.com/studio/ isn’t actually showing the Header Element background but the normal featured image for that page – edit the header element and add some Top and Bottom padding to the element and you will see what i mean.

    Is this possibly the issue you’re having with the Product Archive? Let me know.

    #918301
    Joe

    Hi David. Thank you!

    You’re quite right, so the question is: why aren’t Page Header Elements displaying backround images?

    #918303
    David
    Staff
    Customer Support

    The header element requires top and bottom padding to give it some height – if the padding is 0 and there is no content in the element than it has zero height.

    #918310
    Joe

    Thank you β€” I had a feeling it would be something simple that I was missing πŸ™‚

    #918317
    David
    Staff
    Customer Support

    You’re welcome.
    As a guide for making images show full size and to be responsive use % top / bottom padding instead of pixels. Best method is to calculate the aspect ratio % by dividing the original image height by its width. The % you have should then be applied as the total top and bottom padding.

    #918334
    Joe

    Thanks again β€” I was going to ask about making it responsive.

    I’ve done what you suggested, but that sets the padding as a percentage of the browser width, not the container, right?

    So on larger screens, where browser is considerably wider than container, the padding is too great. ( as seen on staging site: https://incandenza.net/impression_DEV/all-products/ )

    I guess I just have to address that with responsive CSS for the largest screens, unless you can suggest something else I’m missing..?

    #918350
    David
    Staff
    Customer Support

    Use the pixel padding for desktop and % padding for mobile.

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