Customize Header for WooCommerce Product Page

Paulito240 · December 2016

I would like to add a header image to my WooCommerce Product Page, but there is no option for muffin builder or visual composer. Is there anyway I could add a header image like this one for our store front page applied to an individual product page?

Store Front Page: http://curtisliferesearch.com/shop-ecmo/

Product Page: http://curtisliferesearch.com/product/eigenflow-ecmo/

Albert · December 2016

Hi,

to set header's background on single product pages, you need to use the following custom css:

.single-product #Header_wrapper {
    background-image: url('http://curtisliferesearch.com/wp-content/uploads/2016/12/qtq80-7EwnTd2.jpg') !important;
    min-height: 400px;
}

Paulito240 · December 2016

Looks great! Is there anyway I could add some padding between the header and the body?

http://curtisliferesearch.com/product/eigenflow-ecmo/

Albert · December 2016

To add padding between the header and content on single product pages, you need to use the following css:

.single-product #Content { padding-top: 50px !important; }

Paulito240 · December 2016

Great Thanks!

Albert · December 2016

You're welcome!

Customize Header for WooCommerce Product Page

Comments