Jump to content

Display price above Quantity and Add to Cart Buttons

Recommended Posts

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!

Link to comment
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?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.