[Resolved] Display of WooCommerce Price Amount

[Josh]

The display of the price on the Product Pages when variations are selected is crammed up against the Elementor ‘Add to Cart’ widget. Screenshot:

https://ibb.co/1nrvYFB

I’ve tried some CSS hacks but no luck so far.

The class is .woocommerce-Price-amount, thanks!

GeneratePress 2.2.2

GP Premium 1.7.8

[David]

Hi there,

where would you ideally want the price to be displayed?
Inline with the qty and add to cart for example?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Josh]

Hi David – simply having an equal cap top and bottom of the price will work fine.

ie. put the price middle between ‘Size’ on top, and the Add to Cart widget on bottom.

[David]

Does this do it:

.woocommerce-variation-price {
    margin-bottom: 2em;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Josh]

Yes, thanks! I also reset the bottom margin on the dropdown box above, so the gap is even on top and bottom:

‘/* Set gap between product price variations and Add to Cart widget */
.woocommerce div.product form.cart .variations {
margin-bottom: 2em;
}

.woocommerce-variation-price {
margin-top: 0;
margin-bottom: 2em;
}’

[David]

Glad to be of help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts