Docs

[snapos]

Hey Guys,

I just have a couple of questions regarding WooCommerce styling. I am still waiting for images but I am having a few issues with the styling in the shop pages at http://sportingedge.co.nz/product-category/cricket/

1.) My headings seem to be getting cut off (just the first letter) and I’m not sure why this is?
2.) Down the bottom, the page navigation is way off centre on the first page. On the second page it is perfect. On the third page it seems to be right aligned. I want these all centred?

Please refer to the screenshot here: http://prnt.sc/cry97x

Any help with this would be greatly appreciated.

[Christopher]

Hi there,

#1 Please add following code in Customize -> Custom -> Global CSS :

.woocommerce li.product .entry-header {
    position: relative;
    padding-left: 5px;
}

#2 Please install and activate cornerstone plugin.

Hope that helps.

[snapos]

Hi Christopher,

#1 worked, thanks for that.

#2 – I deleted Cornerstone because I don’t use it. I can’t see it under extensions. Do I need it? If so, how can I get it?

[snapos]

This reply has been marked as private.

[Christopher]

Hi there,

#1 Please clear cache and check again, as I don’t see the issue anymore. See the attachment.
#2 Cornerstone is a required plugin in X, please visit X addons page to install it automatically.

Hope it helps.

[snapos]

Hi Christopher,

#1 I see what you mean. It looks perfect on the product pages, but on the actual shop page, the problerm has not been fixed. I would also like to know how to center the product headings and reduce the space between the image and the heading? http://sportingedge.co.nz/shop

#2 Cornerstone is now active – but still no change

Thanks for your help to date!

[Christopher]

Hi there,

Please add this as well :

li.product-category.product h3 {
    padding-left: 3px;
}
ul.page-numbers {
    display: table !important;
    margin: 0 auto !Important;
    clear: left;
}

Hope it helps.

[snapos]

Hi Christopher,

Great, they both worked. Thanks!

In my last post I also asked if it was possible to remove the spacing between the category image and the heading? How can I control this heading font size?

http://prnt.sc/csee5s

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

.products li.product-category.product h3 {
     margin-top: 10px;
     font-size: 30px;
}

You may change 10px and 30px to achieve your desired look.

Thanks

[snapos]

Hi Christopher,

Sorry for the delayed reply, that worked though thank you!!!

I just have one final question: How do I remove the yellow highlighted section where it shows how many items are in that category? It looks really ugly, what would you suggest? Can I remove it completely?

http://prntscr.com/ctr1d8

[Jade]

Hi there,

You can get rid of the yellow highlight completely by adding this code in the customizer:

mark.count {
    background-color: transparent !important;
}

Hope this helps.

[Author]

Posts