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

[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?

[David]

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.

[Joe]

Hi David. Thank you!

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

[David]

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.

[Joe]

Thank you — I had a feeling it would be something simple that I was missing 🙂

[David]

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.

[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..?

[David]

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

[Author]

Posts