Woocommerce shop page

Hi, can I please set this page to style ‘wide with featured header’ https://westhighlandwayrace.org/shop/

I tried the code I would usually use but it just pushed the sidebar down to the bottom. I need to ad a custom header and the products show nicely across the page,

Thanks

Louise

Hi Louise,

Try this custom CSS code:


.woocommerce #secondary {
  display: none;
}

.woocommerce #primary.col-md-9 {
  width: 100%;
}

To apply it to your site, add it into Appearance > Customize > Additional CSS in your site dashboard.

Regards,
Kharis

Thanks Kharis, I can’t seem to change the header still for the page, is that possible?

Thanks

Hello there,

To set different header image on your shop pages, you’ll need some extra jQuery code since there is no an option for that by default. Please follow the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

jQuery(function($) {

  if( $('body').hasClass('woocommerce') ) {

    var newImage = 'http://yoursite.com/path/to/shop-header-image.jpg';

    if( $('.header-image').length ) {

      $('.woocommerce .header-image').css('background-image', 'url(' + newImage + ')');

      $('.header-inner').attr('src', newImage);
      
    }
  
  }

});

Replace http://yoursite.com/path/to/shop-header-image.jpg with your valid image URL. You can get it from media library (Dashboard > Media).

  1. Update

Regards,
Kharis

Thanks Kharis :slight_smile:

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis