Header for Shop Page

Support
#1

Hi,

I want shop page https://new.cherofitness.com/store/ to have same header like other pages https://new.cherofitness.com/about/

Help me with this.

Thanks.

#2

Hi Rita,

Thank you for writing in, you can achieve that banner look with the custom CSS below however it is not easily editable like a section.

.archive.woocommerce-page .x-header-landmark {
	background-image: url(https://new.cherofitness.com/wp-content/uploads/2019/09/Rodely92.jpg);
    background-color: transparent;
    padding: 15% 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.archive.woocommerce-page .x-header-landmark .h-landmark {
	text-align: center;
	color: #fff;
}

You can add this to Theme Options > CSS.

Maybe you might want to change that (The Shop) headline there, you can change that under Theme Options > Renew > Shop Title

Hope it helps,
Cheers!

1 Like
#3

Thanks a lot. This works exactly as I want.
But other shop pages are not working like https://new.cherofitness.com/product/16-sessions-personal-training-copy/ and https://new.cherofitness.com/cart/

Please help me on how to apply same settings on it.

Thanks.

#4

Hello Rita,

If you want to apply to single product post and other woo pages, please update the code and use this:

.archive.woocommerce-page .x-header-landmark,
.single-product.woocommerce-page .x-header-landmark,
.woocommerce-cart.woocommerce-page .x-header-landmark {
  background-image: url(https://new.cherofitness.com/wp-content/uploads/2019/09/Rodely92.jpg);
    background-color: transparent;
    padding: 15% 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.archive.woocommerce-page .x-header-landmark .h-landmark,
.single-product.woocommerce-page .x-header-landmark .h-landmark,
.woocommerce-cart.woocommerce-page .x-header-landmark .h-landmark {
  text-align: center;
  color: #fff;
}

We would love to know if this has worked for you. Thank you.

1 Like
#5

Thanks a lot. This worked exactly as I want it.

But the single product page like https://new.cherofitness.com/product/pmt-8/ doesnt show product image and the attributes alignment are out of place. https://prntscr.com/pj2gdk

Also, For checkout page https://new.cherofitness.com/checkout/, my account page, etc, how can I make the Logo on those pages to fit in properly to the line where the menu is.

Finally, And I want the menu to have a little dark background (faded transparent) so that the text will be seen clearly. (Menu and it’s dropdown are not clearly visible, even on home page)

#6

Hi Rita,

It seems you put an “under construction” page on your site, please provide us login credentials in a secure note so we can take a closer look.

The CSS code we provided is only for x-header-landmark it should not affect other elements outside of x-header-landmark. There might be syntax errors somewhere on your custom CSS.

Please check all your custom CSS here and address all found errors (if any).

Thanks,

#8

I have disabled the coming soon option so that you will see the website

https://new.cherofitness.com/product/2-class/ (product image doesnt show, and product attributes not aligned properly)

https://new.cherofitness.com/my-account/ (Header and breadcrumb overlap)

Also, the drop down menu for the website pages lap with header title https://prnt.sc/pjth7p, I would like a light dark background on the drop down menu so that it would be very distinct from the header title.

I am attaching the secure note here too

#9

Hi Rita,

It looks like you need to regenerate your woocommerce thumbnails. Please follow this steps here: https://www.magikcommerce.com/kb/how-to-regenerate-thumbnails-in-woocommerce/

Try adding this custom css.

@media (min-width: 980px) {
    .woocommerce-account .x-header-landmark ,  .woocommerce-checkout .x-header-landmark{
        margin-top: 90px;
    }
}

To achieve that please add this custom css.

.x-nav ul.sub-menu {
    background: #232323 !important;
}

Please let us know how it goes. Thanks!

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.