Jump to content

Moving Add to Cart button next to Quantity

Recommended Posts

Hello.

I want to place the Add To Cart button next to the Quantity input on the product details page here:

https://www.skinnies.co.uk/skinnies-shop/p/skinnies-long-island-iced-tea

I've found this code on the forum from a previous thread ( https://forum.squarespace.com/topic/178145-moving-add-to-cart-next-to-quantity-input-squarespace-71/ ) but while it's resizing the button, as you can see from the screenshots it's not actually moving either element.

/* add to cart next to quantity */
@media screen and (min-width:768px) {
.sqs-add-to-cart-button-wrapper {
    width: 70% !important;
    float: left;
    margin-bottom: 0 !important;
    position: relative;
    bottom: -25px;
}
.product-quantity-input {
    width: 30% !important;
    float: left !important;
}
}

I've removed the code again for now, but as I have also reordered the product item details I wondered if this is why the above code isn't having the desired effect.

Any ideas?

Thanks again.

Screenshot 2023-02-07 at 10.07.05.png

Screenshot 2023-02-07 at 10.06.51.png

Edited by cynanc
adding url
Link to comment
  • Replies 1
  • Views 439
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
.product-quantity-input {
    width: 30% !important;
    float: left !important;
}
.sqs-add-to-cart-button-wrapper {
    width: 65% !important;
    float: left !important;
    position: relative;
    top: -90px;
    right: -115px;
}
}

 

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.