Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Moving 'add to cart' button


Gilbert

Question

  • Answers 30
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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. &l

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 {     ord

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-

Posted Images

Recommended Posts

  • 0

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

 

Link to post
  • 0
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

Link to post
  • 1
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.

Edited by creedon
version 3

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0
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!

Link to post
  • 0
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
}

 

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0
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
}

 

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0
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

Link to post
  • 0
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;
}

 

Link to post
  • 0
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;
}
}

 

Link to post
  • 0

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!

Screenshot 2020-11-24 at 18.11.46.png

Link to post
  • 0

@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.

Screenshot 2020-11-24 at 23.06.12.png

Link to post
  • 1

@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.

Edited by creedon
version 2 of CSS

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0

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!😀image1.thumb.png.2529365b77553248ea0aafb24d8a6b40.png

image2.thumb.jpg.23f49222f315127c643e9a85fdea3615.jpg

 

 

Link to post
  • 0

@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?

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...