Reconfigure the QTY and Add to Cart placement in a shop listing

Hi! I'm hoping to move the art to cart button above the product description – closer to the top of my product title.

On the left is the current configuration, and to the right would be the ideal set up where the QTY is a box matching the height of the add to cart button and they are aligned (with the quantity label removed)

Link to page: https://www.cassandraott.com/shop/studio-play-deck

I've found a few other posts with similar requests, but I haven't been able to get the CSS codes supplied as resolutions to work for my case. Any help appreciated!

Try this guide:

https://www.will-myers.com/articles/reorder-product-details-in-product-item

Thanks Ziggy. I have the Bryant Hill template installed and I'm not able to determine if my product page is using Simple vs Half vs Wrap. Any insight where I could find out?

Sorry, I didn't spot that you were running on a 7.0 template, you'll need a slightly different solution, I'll have to get back to you with that, bear with me!

@Ziggy Circling back to see if there might be a solution to moving the add to cart and quantity option above the product description on a 7.0 template. Any insight or options to try are greatly appreciated!

Add to Design > Custom CSS

div#productDetails {
    display: flex;
    flex-direction: column;
}
h1.product-title {
    order: 1;
}
.product-price {
    order: 2;
}
.product-quantity-input {
    order: 3;
}
.sqs-add-to-cart-button-wrapper {
    order: 4;
    margin-bottom: 20px !important;
}
.product-excerpt {
    order: 5;
}
.product-sharing {
    order: 6;
}
.reviewSummary {
    order: 7;
}

Thank you @tuanphan

That did move the add to cart button up... but also moved the reviews down which I didn't like, because I think they help sell. Is there a way to keep the reviews above the add to cart button?

I appreciate your help!!

On 2/24/2023 at 12:09 AM, cassiott said:

Thank you @tuanphan

That did move the add to cart button up... but also moved the reviews down which I didn't like, because I think they help sell. Is there a way to keep the reviews above the add to cart button?

I appreciate your help!!

Use this new code

div#productDetails {
    display: flex;
    flex-direction: column;
}
h1.product-title {
    order: 1;
}
.product-price {
    order: 2;
}
.product-quantity-input {
    order: 3;
}
.sqs-add-to-cart-button-wrapper {
    order: 4;
    margin-bottom: 20px !important;
}
.product-excerpt {
    order: 5;
}
.product-sharing {
    order: 6;
}
.reviewSummary {
    order: 4;
}