Woocommerce price and add to cart alignments

[SacredSlang]

Hey there,

So I’m fiddling with the styling of Woocommerce elements, and while I’ve been able to get a number of things changed I can’t seem to get these two to work or find solutions in the forum. Any help is appreciated!

1.) Align the price (on single product pages) to center under title.

2.) Moving the “Add to cart” button inline with the quantity selector.

Screenshot: https://imgur.com/tkMSTF9

[Prasant]

Hello @SacredSlang,

Thanks for asking. Hope you’re having a great day.

To align Add to Cart and Quantity selector please add following CSS under X > Theme Options > CSS:

.woocommerce .quantity {
    float: left;
    width: 30%;
}

button.single_add_to_cart_button.button.alt {
    float: left;
}

.product_meta {
    clear: both;
}

For price alignment, can you please share website URL?

Thanks.

[SacredSlang]

Thanks! It partially worked, but threw off the product summary and I can’t seem to properly center or pull the two elements closer to close the gap. I’ll keep playing with it in the meantime though.

Link to webpage

[nabeel]

Hi again,

Please replace the previous code with the following code:

.woocommerce .quantity {
    display: inline-block;
    margin-bottom: 0;
}

And find and remove the following code:

.woocommerce .summary form.cart {
    text-align: center;
}

Let us know how this goes!

[SacredSlang]

Perfect, that replacement code did the trick! I didn’t remove the centering code though, as it keeps it exactly where I want it. Thank you!

And I finally figured out why I couldn’t center align the price - I was using the wrong class selector.

For anyone who may search this topic in the future, centering the woocommerce single product price is simply:

.woocommerce .price   {
    text-align: center;
}

[ruenel]

You’re welcome!
Thanks for letting us know that it has worked for you.