ievavi Posted November 2, 2021 Share Posted November 2, 2021 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! Beyondspace 1 Link to comment
Beyondspace Posted November 3, 2021 Share Posted November 3, 2021 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? ednaw 1 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, Lightbox Studio pluginIf 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
ievavi Posted November 3, 2021 Author Share Posted November 3, 2021 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment