Display price above Quantity and Add to Cart Buttons

Site URL: https://rocksforlife.com/

Hello,

I would love the price to be displayed above Quantity and Add to Cart buttons rather than under the product title.  How could I achieve that?

This code doesn't work for me since I also want Quantity and Add to Cart buttons to be displayed in one line for desktop.

section.ProductItem-details .ProductItem-details-checkout { 
display: flex; 
flex-flow: column; 
} 

.ProductItem-details .ProductItem-details-excerpt { 
order: 1 !important; 
} 

.ProductItem-details .product-variants { 
order: 2 !important; 
} 

.ProductItem .ProductItem-details .product-quantity-input { 
order: 3 !important; 
} 

.ProductItem-details .ProductItem-product-price { 
order: 4 !important; 
} 

.ProductItem-details .sqs-add-to-cart-button-wrapper { 
order: 5 !important; 
} 

.ProductItem .ProductItem-additional { 
order: 6 !important; 
}

Example: https://rocksforlife.com/our-jewellery/double-pav-hoop-large-white-gold

Thank you!

13 hours ago, ievavi said:

Site URL: https://rocksforlife.com/

Hello,

I would love the price to be displayed above Quantity and Add to Cart buttons rather than under the product title.  How could I achieve that?

This code doesn't work for me since I also want Quantity and Add to Cart buttons to be displayed in one line for desktop.

section.ProductItem-details .ProductItem-details-checkout { 
display: flex; 
flex-flow: column; 
} 

.ProductItem-details .ProductItem-details-excerpt { 
order: 1 !important; 
} 

.ProductItem-details .product-variants { 
order: 2 !important; 
} 

.ProductItem .ProductItem-details .product-quantity-input { 
order: 3 !important; 
} 

.ProductItem-details .ProductItem-product-price { 
order: 4 !important; 
} 

.ProductItem-details .sqs-add-to-cart-button-wrapper { 
order: 5 !important; 
} 

.ProductItem .ProductItem-additional { 
order: 6 !important; 
}

Example: https://rocksforlife.com/our-jewellery/double-pav-hoop-large-white-gold

Thank you!

To enable css order, you should enable flex positon for the .ProductItem-details, but I saw you are setting it as block display, what was the intention?

2 hours ago, bangank36 said:

To enable css order, you should enable flex positon for the .ProductItem-details, but I saw you are setting it as block display, what was the intention?

Ah, I see! The intention is to keep add to cart & variants buttons to stay in one line.
How could I reorder the productItem-details and also make those two stay in one line, @bangank36?