Moving 'add to cart' button

Site URL: https://oliverjwoods.com/shop/blackseed-wax

I would like to move the 'add to cart' button above the product info so the flow is 1. Product name   2. Quantity  3. Add to cart. 4 Product info 5. Additional info.

Is this possible?

Add to Home > design > Custom CSS

.product-quantity-input {
    order: 2 !important;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper {
    order: 3 !important;
}
.ProductItem-details-excerpt {
    order: 4 !important;
}
.product-price {
    order: 5 !important;
}

Awesome! Thanks so much 👍

On 6/8/2020 at 5:42 PM, tuanphan said:

.product-quantity-input { order: 2 !important; } .ProductItem-details .sqs-add-to-cart-button-wrapper { order: 3 !important; } .ProductItem-details-excerpt { order: 4 !important; } .product-price { order: 5 !important; }

I tried this but nothing changed, I wonder if you could help me out with this? many thanks

Page: www.bytemple.co/shop p/w: ModaStill!1290

7 hours ago, Lucha said:

I tried this but nothing changed

The code @tuanphan posted was for a Squarespace v7.0 site. Your site is v7.1 and requires different code.

Add the following to Store Settings > Advanced > Page Header Code Injection.

<style>

  /*
  
    There is something odd going on with v7.1 CSS as of 11/04/20
    .ProductItem-details-checkout has a rule of display block but sub elements
    have order properties on them. The first bit of CSS unsets those items for a
    clean slate returning the elements to natural order.
    
    */
    
  .ProductItem-details .product-quantity-input,
  .ProductItem-details .product-variants,
  .ProductItem-details .ProductItem-details-excerpt,
  .ProductItem-details .ProductItem-product-price,
  .ProductItem-details .sqs-add-to-cart-button-wrapper
  
    {
    
      -webkit-box-ordinal-group: unset;
      -ms-flex-order: unset;
      order: unset;
      
      }
      
  .ProductItem-details .product-variants {
  
    -webkit-box-ordinal-group: 8;
    -ms-flex-order: 7;
    order: 7;
    
    width: auto;
    
    }
    
  .ProductItem-details .ProductItem-details-excerpt {
  
    -webkit-box-ordinal-group: 9;
    -ms-flex-order: 8;
    order: 8;
    
    }
    
  .ProductItem-details .ProductItem-additional {
  
    -webkit-box-ordinal-group: 9;
    -ms-flex-order: 8;
    order: 8;
    
    }
    
  @media only screen and ( pointer: coarse ) and ( min-width: 1025px ), screen and ( min-width: 800px ) {
  
    .ProductItem-details .ProductItem-details-checkout {
    
      -webkit-column-gap: 3vw;
      -moz-column-gap: 3vw;
      grid-column-gap: 3vw;
      column-gap: 3vw;
      
      display: -ms-grid;
      display: grid;
      
      grid-row-gap: 3vh;
      row-gap: 3vh;
      
      -ms-grid-columns: 1fr 3vw 1fr 3vw 1fr 3vw 1fr 3vw 1fr;
      grid-template-columns: repeat( 5, 1fr );
      
      }
      
    .ProductItem-details .ProductItem-details-checkout > * {
    
      -ms-grid-column: 1;
      -ms-grid-column-span: 5;
      grid-column: 1 / 6;
      
      margin: 0;
      margin-right: 1vw;
      
      }
      
    .ProductItem-details .product-quantity-input {
    
      -ms-grid-row-align: end;
      align-self: end;
      
      -ms-grid-column: 1;
      -ms-grid-column-span: 1;
      grid-column: 1 / 2;
      
      margin-right: 0;
      
      }
      
    .ProductItem-details .sqs-add-to-cart-button-wrapper {
    
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      
      -ms-grid-row-align: end;
      align-self: end;
      
      -ms-grid-column: 2;
      -ms-grid-column-span: 4;
      grid-column: 2 / 6;
      
      width: auto;
      
      }
    }
    
  @media only screen and ( pointer: coarse ) and ( max-width: 1024px ), screen and ( max-width: 799px ) {
  
    .ProductItem-details .ProductItem-details-checkout {
    
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      
      }
    }
    
  </style>

Let us know how it goes.

7 minutes ago, creedon said:

Let us know how it goes.

Fantastic, this worked. Thank you.

Is it possible to bring the Product variant fields below the add to cart section too? Really appreciate it!

16 minutes ago, Lucha said:

Is it possible to bring the Product variant fields below the add to cart section too? Really appreciate it!

I've updated my previous post. Is that the order for which you are looking?

Also you will want to remove or comment out the following CSS from Design > Custom CSS.

.product-price {
    order: 2 !important
}

.product-quantity-input {
    order: 3 !important
}

.ProductItem-details .sqs-add-to-cart-button-wrapper {
    order: 4 !important
}

.ProductItem-details-excerpt {
    order: 5 !important
}

7 minutes ago, creedon said:

I've updated my previous post. Is that the order for which you are looking?

 

That's exactly it. Many thanks 👏👏👏

Is there a way of way of moving the quantity input to the same line as the the add to cart button? maybe by reducing the size of the add to cart button?

4 hours ago, Lucha said:

Is there a way of way of moving the quantity input to the same line as the the add to cart button?

We have to take a different tack to accomplish this. I've updated the code in my previous post.

For desktop we use grid and on mobile we use flex.

Remove or comment out the following code in Design > Custom CSS.

.product-quantity-input {
    margin-right: 400px !important;
    margin-top: 0px !important
}

Hi @creedon,
thanks a lot for sharing the code.
It looks great. I was wondering whether there is a way to align the add to card button to the center for full screen:
 

3 hours ago, Carolin_W said:

Hi @creedon,
thanks a lot for sharing the code.
It looks great. I was wondering whether there is a way to align the add to card button to the center for full screen
 

If you share link to product in screenshot, we can help easier

Hi @tuanphan,
Thanks for your quick response
 https://www.cawiart.com/shop/p/lily-7frs8
Pw: Artist123

5 minutes ago, Carolin_W said:

Hi @tuanphan,
Thanks for your quick response
 https://www.cawiart.com/shop/p/lily-7frs8
Pw: Artist123

Try adding to Design > Custom CSS

.ProductItem-details-checkout {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

Wonderful, thanks a lot!

31 minutes ago, Carolin_W said:

Wonderful, thanks a lot!

I see on mobile, product thumbnail show 1/2, you can add slideshow arrows, easier for users navigation to view more photos

Add this to Design > Custom CSS to add slide arrows

/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: white;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}
.ProductItem .ProductItem-gallery-carousel-controls>div::after, .ProductItem .ProductItem-gallery-carousel-controls>div::before {
    border-color: black !important;
}
}

Dear @creedon  could you please give me a hand?

I need to put the "add to cart" button just after the product quantity and variants, but since the original code you shared was updated I can't see it anymore :(

I'm currently using the current code from your comment but the variants are after the "add to cart" button. I'm attaching an image.

Thank you very much in advance for your help!

@Tarta

Please post a URL for one of your product pages.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

@creedon thanks so much for your quick response, I've managed to fix the previous mentioned issue, but I would love to get some help with the following:

1. to check that i didn't messed up the code by changing important things (i'm adding the coded i used below)

2. And also I would like to reduce the space between these items (attached image) so the whole content is closer

This is my link: https://www.tartagelatina.com/shop/p/do-chua-6dwzs

And this is the code I used (modifying yours, but without knowing much):

<style>  
       
  .ProductItem-details .product-quantity-input,
  .ProductItem-details .product-variants,
  .ProductItem-details .ProductItem-details-excerpt,
  .ProductItem-details .ProductItem-product-price,
  .ProductItem-details .sqs-add-to-cart-button-wrapper
  
    {
    
      -webkit-box-ordinal-group: unset;
      -ms-flex-order: unset;
      order: unset;
      
      }
      

    
  .ProductItem-details .ProductItem-details-excerpt {
  
    -webkit-box-ordinal-group: 9;
    -ms-flex-order: 8;
    order: 8;
    
    }
    
  .ProductItem-details .ProductItem-additional {
  
    -webkit-box-ordinal-group: 9;
    -ms-flex-order: 8;
    order: 8;
    
    }
    
@media only screen and ( pointer: coarse ) and ( min-width: 1025px ), screen and ( min-width: 800px ) {
  
   
    .ProductItem-details .ProductItem-details-checkout {
    
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      
      }
    }
    
  @media only screen and ( pointer: coarse ) and ( max-width: 1024px ), screen and ( max-width: 799px ) {
  
    .ProductItem-details .ProductItem-details-checkout {
    
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      
      }
    }
    
  </style>

Thanks again for your support.

@Tarta

Replace your code with the following.

<style>

  /* begin reorder ProductItem-details-checkout */
  
    /*
    
      There is something odd going on with v7.1 CSS as of 11/24/20
      .ProductItem-details-checkout has a rule of display block but sub elements
      have order properties on them. The first bit of CSS unsets those items for a
      clean slate returning the elements to natural order.
      
      */
      
    .ProductItem-details .product-quantity-input,
    .ProductItem-details .product-variants,
    .ProductItem-details .ProductItem-details-excerpt,
    .ProductItem-details .ProductItem-product-price,
    .ProductItem-details .sqs-add-to-cart-button-wrapper
    
      {
      
        -webkit-box-ordinal-group: unset;
        -moz-box-ordinal-group: unset;
        -ms-flex-order: unset;
        -webkit-order: unset;
        order: unset;
        
        }
        
    /* begin change order of elements */
    
      .ProductItem-details .ProductItem-details-excerpt {
      
        -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
        order: 6;
        
        }
        
      /* end change order of elements */
      
    .ProductItem-details .ProductItem-details-checkout {
    
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      
      }
      
    /* end reorder ProductItem-details-checkout */
    
  /* begin change spacing of ProductItem-details-checkout */
  
    .ProductItem-details .ProductItem-details-checkout {
    
      grid-gap: 13px;
      gap: 13px;
      
      }
      
    .ProductItem-details .product-quantity-input,
    .ProductItem-details .ProductItem-product-price,
    .ProductItem-details .sqs-add-to-cart-button-wrapper,
    .ProductItem-details .variant-option
    
      {
      
        margin-bottom: 0;
        
        }
        
    .ProductItem-details .ProductItem-details-excerpt p:first-child {
    
      margin-top: 0;
      
      }
      
    /* end change spacing of ProductItem-details-checkout */
    
  /* begin product variants two-up */
  
    .ProductItem-details .product-variants {
    
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      
      grid-gap: 13px;
      gap: 13px;
      
      }
      
    /* end product variants two-up */
    
  </style>

This is for a v7.1 site and is specific to Tarta's needs.

I'm hesitant to change the spacing under the price as there is some code hidden there that will pop up when certain circumstances are met. If I change the spacing it may look even worse space wise when those conditions are met.

Let us know how it goes.

Thank you so much @creedon you have helped me a lot!

I see what you mean with the code below the price, I tested and it's working perfect (see image1 attached)

Could I please bother you with one last thing?

Following my efforts to reduce the height of that section, would it be possible to show the product variants on a single line when there are 2 of them? I would like to have this only if it's possible to keep the variant full width when there's only one option (see image2 which shows what i mean)

Thanks again for your support!😀

@Tarta

If it is one or two I think that wouldn't be to hard with CSS only.

Three or more and I think you're going to need some CSS and Javascript that would dynamically assign a class to the variants based on the number of variants for the product.

Are you definitely going to have 3 or more variants now or at some point?

@creedon for the moment I will only have 1 or 2 variants so maybe it should be fine with CSS only.

Thank you again for your for your reply and your help!

@Tarta

I updated my previous CSS post above.

Let us know how it goes.

@creedon thank you so much🙏 my shop layout has improved a lot with your help!

Is there anywhere that I can leave a review or something thank you? You're so kind.