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 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, 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