Product tile and price centering « Support Forum | Kriesi.at

Product tile and price centering

4 posts from 3 voices

Tags:

No tags yet.

kitticraft
Member

Hi,

What would be the CSS for centering the product name and price on the store page?

I've tried:
h3
{
text-align:center
}

But that only centers the name, I tried to use the selectors span.amount and span.price to center the price, but neither work...

Thanks,
Lawrence

Posted 8 months ago #
Devin
Moderator
Hi Lawrence,

This is a bit of a tough one. I can get the name of the product centered but not the price. The issue is the sale price of items starts messing with any kind of positioning that I try and apply.

So you can use:
```
#top.woocommerce-page .template-shop ul.products li a {
    text-align: center;
}
```
But then the prices need something like:
```
#top .template-shop .price span {
    text-align: center;
    display: block;
}
```
But this won't work with the on sale items since it causes a line break. You can try tweaking from there but the only other thing I can think of is to do a padding or margin hack with 45% left to fake the centering. It looks a bit odd on low priced items however so it isn't great either.

Regards,

Devin
Posted 8 months ago #
kitticraft
Member

Hi Devin,

Thank you for that CSS code, I understand what your saying, I think I will leave the text left aligned to avoid the other subtle problems.

Regards,
Lawrence

Posted 8 months ago #
Ismael
Moderator

Hey,

Glad Devin could help.

Regards,
Ismael

Posted 8 months ago #

This topic has been closed to new replies.