Shop page products wont center and remove header/footer from checkout page

Hello, I love the shapely theme, but am having a few problems with a few things on my site.

First, the products on my shop page are not centered. I am fine with 4 items per row, but i wanted to see how to get the items centered. I think that if I use larger images that will help some too, but right now the products are nowhere near centered.

I also wanted to see about removing the header and footer on the checkout page only. Is that possible?

I also wanted to see about changing the color of the header from white to another color. I found a few recommendations on the forums but the 3-4 I tried did not work for me.

Lastly, i wanted to reduce the footer size from what it is now to around half of the current height.

I did browse the forums a little for these topics and didnt find the topics or like i said with the header color the fixes I tried didnt work. Thanks for the help.

one other thing I just noticed, I found a fix on the forums to center the title which has worked on every page except the store page.

Hi there

Hope you are having a good day and thank you for your question :slight_smile: In order to check your question i need to see your live website, please provide url and i will take a look


the address is


hi there

  1. you have sidebar enabled on this page and you have to use full width page layout in order to fill entire area of the page
  2. removing header and checkout page is not possible from the theme default options
  3. header color can be changed by this code, add it in appearance > customize > additional css:
.main-navigation {
background: red;
  1. footer size can b changed by this code:
footer {
    padding: 22px 0;
  1. center product titiles:
.woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3 {
    text-align: center;

at this time i have answered on all your questions, please note, almost all your question is about customization, we can help if you ask normal amount of questions, this is free support and we have to help others as well :slight_smile:

I am not sure how to remove the sidebar. I believe you do this by going to Page attributes → template, but when I bring up the shop page template is not listed. On all the other pages I have the option to change that.

Any suggestions on how to remove the sidebar?

Hello there,

I hope you are doing well today.

You can remove the sidebar via Appearance > Customize > Blog Settings > Blog Index Settings and set the Blog Template to no sidebar.

Best Regards,

I tried this with no luck. any other thoughts?

hey there

Hope you are having a good day and thank you for your question :slight_smile:
Please add this CSS in appearance - customize - additional CSS

@media (min-width: 992px){
#primary.col-md-8 {
width: 100%;

Colorlib Support Team

I tried this as well and it didnt work either.

Good morning

I cant see if the code is added, most probably its added with mistakes, please use copy/paste properly and try again


i copied and pasted the text before, I have done it again twice just to try it out with no luck.

Hi there

please send me your access credentials along with your website URL and I will investigate this case. Don’t forget to mark your reply as private!
Colorlib Support Team


Here is my login information:

Login: admin
Password: 3LBELbrothers

If you fix it please let me know how you do it because I have another site I am doing and I am thinking about Shapely for it too and would like to center the shop page on it as well.


This is the final css code i included and you can see the effect on the page :wink:

@media (min-width: 992px){ #primary.col-md-8 {
width: 100% !important;

Thanks so much Noda.

Hi, there

Nice, to hear your problem is fixed:) Now I will now close the topic and mark it as resolved. Feel free to contact us again Thanks!