Jump to content

Moving Add to Cart next to Quantity Input Squarespace 7.1

Recommended Posts

Site URL: https://www.anothercomb.com/comb/p/cesibon-20

Hi there

Is there a way to move the add to cart button next to the quantity input field via CSS or Code Injection? 

I have added a screenshot. Ideally the add to art + quantity field should be the same width as the product variant. 

Also, I have looked at several forums already and haven't been able to find a working solution for this. 

Thanks in advance!

Bildschirmfoto 2021-01-06 um 16.31.28.png

Link to comment

Add to Home > Design > Custom CSS

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

 

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 1/8/2021 at 5:19 PM, savannahjanssen said:

WOW thank you that worked like a charm. Wonderful.

Is there a way to increase the height of the Add to Cart button as well without affecting the alignment? So that the height is the same as the quantity input field and they look aligned?

Thanks again. 

Bildschirmfoto 2021-01-08 um 11.19.25.png

New code

/* 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: -23px;
}
.product-quantity-input {
    width: 30% !important;
    float: left !important;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}
}

 

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
  • 6 months later...
On 1/10/2021 at 5:01 PM, tuanphan said:

New code

/* 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: -23px;
}
.product-quantity-input {
    width: 30% !important;
    float: left !important;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}
}

 

How can I apply to my mobile version as well? Thanks

Link to comment
On 8/6/2021 at 9:14 AM, Botbot said:

How can I apply to my mobile version as well? Thanks

It looks like it sets the section to have a flex direction of column which is why they are all stacking. I would use different code here altogether to help combat the flexbox code. Try this...
 

.ProductItem-details .ProductItem-details-checkout {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.ProductItem-product-price, .ProductItem-details-excerpt {
flex-basis:100%;
}
.sqs-add-to-cart-button-wrapper {
margin-bottom: 0 !important;
position: relative;
bottom: -28px;
}
.product-quantity-input {
flex-basis:30%;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
padding-top: 1.5em;
padding-bottom: 1.5em;
}
@media screen and (min-width:767px) {
.sqs-add-to-cart-button-wrapper {
flex-basis:70%;
}
}
@media screen and (max-width:767px) {
.sqs-add-to-cart-button-wrapper {
flex-basis:60%;
margin-left: 5vw;
}
}

 

Coding Wiz at rebeccagracedesigns.com

📖 Code Encyclopedia for Squarespace: rebeccagracedesigns.com/encyclopedia-of-code

🔥 Free CSS Tutorials: rebeccagracedesigns.com/blog

️ Free Guide to the 41 Most Popular CSS Properties: rebeccagracedesigns.com/popular-css-properties

 

Link to comment
  • 8 months later...

Is there a way to apply this solution to both desktop and mobile without having it impact the accordion table within my Product Details section?

my url: https://www.glassworkpixie.com/shop/p/fused-glass-ice-cream-statement-earrings

I'm using the below code to move the buttons to the correct placement, but now my accordion table below them is squished horizontally. 

.ProductItem-details .ProductItem-details-checkout {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.ProductItem-product-price, .ProductItem-details-excerpt {
flex-basis:100%;
}
.sqs-add-to-cart-button-wrapper {
margin-bottom: 0 !important;
position: relative;
bottom: -28px;
}
.product-quantity-input {
flex-basis:30%;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
padding-top: 1.5em;
padding-bottom: 1.5em;
}
@media screen and (min-width:767px) {
.sqs-add-to-cart-button-wrapper {
flex-basis:70%;
}
}
@media screen and (max-width:767px) {
.sqs-add-to-cart-button-wrapper {
flex-basis:60%;
margin-left: 5vw;
}
}

FYI I'm using the Store Page Header Code Injection referenced within this thread to move my accordion block, in case that has any impact.

 

Link to comment
On 1/6/2021 at 3:33 PM, savannahjanssen said:

Is there a way to move the add to cart button next to the quantity input field

After this question was posted, Squarespace launched several new Product Details Page (PDP) Layouts on Squarespace 7.1 and these newer layouts show the Add to Cart button beside the Quantity selector. No CSS or code is required. 

To choose a different Product Details Page:

  1. Open the product details page you want to edit.
  2. Click Edit design in the top-left corner. On some sites, you may need to hover over Edit, click Edit design, then click the Pencil icon.
  3. Choose from one of the following layout options:

Full - Product images display in a full-bleed carousel above the description.

image.thumb.png.d0a16a48a279fdd72d2113c7d693bddd.png

 

Half - The product image splits the page with the description. The image is always aligned left.

image.thumb.png.c96ce30a0bd57f1a3002a3245c1ea8fd.png

 

Wrap - The product images wrap around the description. Images are always aligned left.

image.thumb.png.38dbdf446fd171624e39d6bd5e4c35ca.png

 

Simple - This is the default option where the product image and description display side by side, surrounded by whitespace. 

image.thumb.png.aa42104d2162a83d637914a8968968ee.png

Was this post helpful? Please give feedback by clicking an icon below  ⬇️

 

Edited by paul2009
Typo

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment
On 1/10/2021 at 10:01 AM, tuanphan said:

New code

/* 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: -23px;
}
.product-quantity-input {
    width: 30% !important;
    float: left !important;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}
}

 

I've modified some value of the code:

/* add to cart next to quantity */
@media screen and (min-width:768px) {
.sqs-add-to-cart-button-wrapper {
    width: 50% !important;
    float: left;
    margin-bottom: 0 !important;
    position: relative;
    bottom: -29px;
}
.product-quantity-input {
    width: 40% !important;
    float: left !important;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}
}

The add to cart button now aligns perfectly with the quantity on tablet and browsers.

How to implement the code to make it work also on mobile? Thanks!

(website: https://watermelon-sponge-6pkp.squarespace.com/ )

Link to comment
On 5/8/2022 at 12:39 PM, Sitar said:

I've modified some value of the code:

/* add to cart next to quantity */
@media screen and (min-width:768px) {
.sqs-add-to-cart-button-wrapper {
    width: 50% !important;
    float: left;
    margin-bottom: 0 !important;
    position: relative;
    bottom: -29px;
}
.product-quantity-input {
    width: 40% !important;
    float: left !important;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}
}

The add to cart button now aligns perfectly with the quantity on tablet and browsers.

How to implement the code to make it work also on mobile? Thanks!

(website: https://watermelon-sponge-6pkp.squarespace.com/ )

edit 768px to 1px

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 5/19/2022 at 1:26 AM, Sitar said:

That weird. Just tried the code & it looks fine

Try adding this to Code Injection > Header

<style>
  /* add to cart next to quantity */
@media screen and (min-width:768px) {
.sqs-add-to-cart-button-wrapper {
    width: 50% !important;
    float: left;
    margin-bottom: 0 !important;
    position: relative;
    bottom: -29px;
}
.product-quantity-input {
    width: 40% !important;
    float: left !important;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper .sqs-add-to-cart-button {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}
}
</style>

 

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.