Category Customisation

Support
#1

Looking for some advice on customisation categories, on a site basis, not individually:

Is there any way to amend the size of the heading for a product category?

Is there any way to centrally align the product cards themselves? i.e. rather than 2 products aligning to the left, can I align them to the centre.

Is there any way to align the images / thumbnails, so they appear in the centre of the space, not at the top, or bottom?

Sorry if these are simple, but any help would be great.

#2

Hi There,

Thanks for writing in! I have checked the site URL registered to your account but I could not see any working site. Could you please provide us with a sample URL to your category, so that we can assist you with a possible workaround.

Thanks!

#4

Thanks for getting back to me.

Example URL is https://ecauk.com/product-category/chassis/.

Thanks

#5

Hi There,

Thanks for the URL!

I can see your product images are already center align.

To make the product item in center please add this css in global CSS.

.woocommerce ul.products {
   text-align: center;
}
.woocommerce li.product {
 float: none;
display: inline-block;
width: 20%;
}

Hope this helps.

Thanks

#6

This seems to work, however it kicks the subcategories into 3 columns, not 4?

#7

Hi there,

I just checked and it’s now displayed in 4 columns, I see that it’s now using cols-4 as product list class name which is correct.

Thanks!

#8

Is there anyway to change the size of the heading on product category pages?

Thanks

#9

Hello @slowbear,

Thanks for updating thread. :slight_smile:

I see that you have added a custom CSS to change font size of products in category pages. Here is the CSS:

.woocommerce .woocommerce-loop-category__title, .woocommerce li.product .entry-header h3 {
    font-size: 18px !important;
    text-align: center;
}

You can change the value 18px as per your requirement.

You can also add following CSS under X > Theme Options > CSS to change font size:

.woocommerce-loop-category__title {
    font-size: 20px !important;
}

Thanks.

#10

This doesn’t seem to do anything. Perhaps I’m confused, but I’m looking to change this:

Any ideas to change the size of this?

#11

Hello @slowbear,

Thanks for the clarification and apologies for the confusion. Please use following CSS under X > Theme Options > CSS to change headline font size:

.woocommerce-page h1.h-landmark span {
    font-size: 1.2em;
}

Please change the values (1.2em) as per your requirement. If you would like to learn more about em unit value, please take a look at following article:

https://www.w3schools.com/cssref/css_units.asp

Thanks.

#12

Thanks @Prasant, this works great, however it seems to be playing around with the accent bar:

On some pages, it looks full width, however on some, it’s trimming it down. Do you know how to correct this?

If not, do you know how I can remove this? Just on Woocommerce pages though.

Thanks

#13

Hi There,

Please add the following code to Theme Options CSS

.woocommerce .h-landmark span:before,.woocommerce  .h-landmark span:after {
display: none;

}

Hope it helps!

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.