Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #16285

    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

    #90928

    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

    #90929

    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

    #90930

    Hey,

    Glad Devin could help.

    Regards,

    Ismael

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Product tile and price centering’ is closed to new replies.