Jump to content

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

Recommended Posts

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!

Screen Shot 2023-01-31 at 4.42.52 PM_edits3.jpg

Link to comment

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 2 weeks later...

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;
}

image.png.7305f4813a029296b70bef51f8bc52ee.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.