Shop Wide (Not Site Wide) Page Headers To Be The Same

  • isawcompany · Member ·

    https://premium-themes.forums.wordpress.com/topic/full-size-shop-page-header-image-problem/#post-163773

    Hi Taras,

    Guess who’s baaaack!

    I’ve been doing some thinking, and from the thread above of the last conversation we had, I’m thinking I would like all my shop pages to have the black and white gradient look now, just to keep it uniform, you know!

    So, can you kindly sprinkle a little star dust again and tell me:

    1 – What would the CSS code be to control all the pages under the shop category (not site wide) to have the black and white grade?

    2 – What would the CSS code be to control all the pages under the shop category to be the same height? (like you told me before with specifically the single product pages)

    I’m looking forward to this!

    Thank you… as always.

    Speak soon!
    Chris (iSAW)

    The blog I need help with is: (visible only to logged in users)

  • tarasdashkevych · Theme Author ·

    Hello Chris :)

    Please try this custom CSS:

    
.hfeed.woocommerce .fullscreen-header,
.woocommerce-shop .fullscreen-header {
  height: 28vh;
  background: linear-gradient(to bottom,var(--th-color-primary-base), #ffffff);
}

.woocommerce-shop .fullscreen-header img,
.woocommerce-shop .fullscreen-header::before {
  display: none;
}

    This CSS sets the same height for the page header as you have for single product pages. Also, displays the black and white gradient in the page header on your product archive pages.

    Please let me know if you have any additional questions.

    Kind regards,
    Taras

  • isawcompany · Member ·

    Hi Taras,

    Firstly, thank you for working so late into the night to answer my query. I noticed this morning I received your reply at nearly midnight. Seriously, thank you for your dedication.

    Now to matters at hand, the shop homepage worked brilliantly!
    Can I ask for codes to make my other pages look the same please, examples below:

    Shop Home Page w CSS – PERFECT:

    Single Product Page w CSS – PERFECT:

    My Account Page – NEED HELP WITH

    Checkout Page – NEED HELP WITH

    Cart Page – NEED HELP WITH

    There is also a Purchases page but I forgot to take a screenshot, so that is another page in need of a css code please.

    Thank you for all your help, I really appreciate you helping me to fine tune my site.

    Regards

    Chris (iSAW)

  • tarasdashkevych · Theme Author ·

    Hi Chris,
    I am always happy to help :)

    Also, thank you for screenshots, and I am sorry for misunderstanding. By “shop category”, I’ve thought that you were referring to shop archive pages.

    By default, WooCommerce adds woocommerce-page CSS class to the body of the site. So, we can use this CSS class to modify WooCommerce pages.

    Could you please replace the CSS that I’ve posted previously in this topic with this one:

    
.hfeed.woocommerce .fullscreen-header,
.woocommerce-page .fullscreen-header {
  height: 28vh;
  background: linear-gradient(to bottom,var(--th-color-primary-base), #ffffff);
}

.woocommerce-page .fullscreen-header img,
.woocommerce-page .fullscreen-header::before {
  display: none;
}

    It should modify the page header section for all WooCommerce pages.

    Hope this helps. Please let me know if you have any additional questions.

    Kind regards,
    Taras

  • isawcompany · Member ·

    Hi Taras,

    Thank you for all your help.

    The various shop sub menu pages have worked a treat! examples below:

    Shop Home Page w CSS – NEARLY PERFECT:

    Single Product Page w CSS – PERFECT:

    My Account Page – PERFECT:

    Checkout Page – PERFECT:

    Cart Page – PERFECT:

    I got myself into a little pickle at some point earlier today, trying to fine tune my pages a little too much, I have somehow managed to change the colour of the word SHOP on the main shop page to black, as well as lost the little bouncing arrow (see the Shop Home Page link above). Do you know how I can get that back please?

    Also another side point if I may – Is it possible to create a side widget JUST for the shop products and shop home page? or is this particular question for the WooCommerce team?

    Thank you for your help… as always.

    Kind Regards

    Chris (iSAW)

  • tarasdashkevych · Theme Author ·

    Hello Chris,

    “Do you know how I can get that back please?”
    – If the page does not have a set featured image then the page header section does not display this button. Here are examples:
    – With featured image: https://demo.themesharbor.com/hermes/full-width-page/
    – Without featured image: https://demo.themesharbor.com/hermes/typography/

    However, you can add this custom CSS to display the button on your shop page:

    
.woocommerce-shop .skip-to-entry {
  border: 1px solid;
  border-radius: 999px;
  color: inherit;
  display: inline-block;
  height: 35px;
  width: 35px;
  animation: bounce 4s 2s infinite;
}

.woocommerce-shop .skip-to-entry .svg-icon {
  margin: auto;
  width: 20px;
  height: 20px;
}

    —

    “Is it possible to create a side widget JUST for the shop products and shop home page?”
    – Yes, but only when creating the shop page using WooCommerce blocks.

    So, create a new page using a default (blank) template. Then, add All Products to the content of the page.

    Since regular pages comes a sidebar, you will be able to display your widget(s) on your custom shop page.

    If you want to display your widget(s) on specific page(s) then you need to use Widget Visibility options: https://wordpress.com/support/widgets/#widget-visibility

    Please let me know if you have any additional questions.

    Kind regards,
    Taras

  • isawcompany · Member ·

    Hi Taras,

    Reading your last email, I now realise where and what I did to lose my shop colour and arrow, so I just added the header image back on the shop home page and all is good.

    As regards my other ideas, I will give those a try in due course and see how I get on.

    All in all, I’m beginning to realise visions of HOW I want something to look, doesn’t always work out, so on this occasion, it’s best I work at creating a shop that is functioning properly, rather than the pretty looking thing I have in my head.

    For now, I’m gonna take a break (more like give you a break), and come back to it next week or so. I know where you are if I come unstuck again.

    Thanks again for all your knowledge and help Taras.

    Have a good day, and I wish you well.

    Kind Regards

    Chris (iSAW)

  • tarasdashkevych · Theme Author ·

    Hi Chris,
    You are always welcome!

    “… come back to it next week or so …”
    – Not a problem :) Any time you have a question regarding the theme, feel free to open a new thread in this forum, and I will be happy to help!

    Have a wonderful weekend.

    Kind regard,
    Taras

  • The topic ‘Shop Wide (Not Site Wide) Page Headers To Be The Same’ is closed to new replies.