Huge space between the header and my shop!

Thank you that seemed to help the cart and checkout.

The problem now is the formatting of the shop. I would like my products to be displayed in rows of 3 without any ‘Add Cart’ or ‘Price’ until the customer has clicked the image. At the moment the whole shop looks a mess.

Under the customiser the ‘Checkout’ H3 is black but when I switch to the front end and view the website it returns to white???

To change number of items per row, see:
https://docs.woothemes.com/document/change-number-of-products-per-row/
The code goes in functions.php for your child theme:
https://codex.www.ads-software.com/Child_Themes

To hide add-to-cart buttons and prices:

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .add_to_cart_button
{display:none}

Don’t know about customiser, but you can change the h3 color with:

h3 {color:#000}

in custom css.

The shop looks a mess because of how the theme and any options you’ve applied have laid it out. There’s really too much wrong with the layout to be able to advise how to fix it remotely. If you can’t fix it in customiser, consider trying another theme. Don’t get too committed to one theme. Maybe one of the Woo themes aimed at shops, or virtue which is a popular and well supported one with good WC integration. The process of setting up WooCommerce does not normally generate this number of issues.

Hey Lorro,
Is there a way to add 3 buttons up in the shop header space? Next to the word shop?

https://www.guitarclef.com/shop/

So it would say SHOP JEWELRY APPAREL COMPILATION
Just using the theme buttons?

Next to the word shop is a big ask because it would be necessary to make a new custom template.

You could put the buttons in the page content, either above or below the slider. First, give an id to each section heading, for example:

<h3 id="jewelery">Jewelry</h3>

Next, make a button with a link something like this:

<a href="#jewelery">Link to Jewelery section>/a>

Sorry not tested, but there’s lots of info out there about linking to page sections. Ensure you read about behaviour in HTML5, not HTML4.

Hey Lorro,
So i put this link on top of the jewelry section (is this the right location?):

<h3 id=”jewelery”>Jewelry</h3>

then here is the button:
Jewelry

but I’m not sure what to paste in place of https://www.tyler.com

Thanks

sry here is button code: Jewelry

<a class="button darkblue-outline" href="https://www.tyler.com">Jewelry</a>

The link is the link to the page plus a # plus whatever is in the id.

Ok thx Lorro, worked perfect. When i click the button link it takes me to the correct spot, but it outlines the <h3
Can i hide this?

Please post the link to the page.

https://www.guitarclef.com/shop/

Can you change:

<a class="button darkblue-outline" href="#jewelry">Jewelry</a>

for

<a class="button" href="#jewelry">Jewelry</a>

The id for jewelry is misspelt.

So yes it works, but i wasn’t clear.
When i click apparel it goes to apparel but the h3> is outlined when it goes the that section of the page.

h3:focus {outline:none}