Jump to content

Moving 'add to cart' button

Recommended Posts

  • 2 months later...

@creedon  Your code for this is beautiful, however, I'm curious if you could help with my desired layout.

1. In my "DesktopImage" photo, I'd like to switch the color and size buttons.  I'd like Size to be on top of Color.

2. I'd like this to be the same on my mobile as well.

3. The product description on my Desktop view is below the dollar amount and above the Color button(which soon will hopefully be the Size Button).  However, on my mobile view, the product description moves to the bottom(see other mobile photos attached).  I'd love for the mobile view to be the same as the Desktop view with the product description below the dollar amount and above the newly located Size Button.

Can these 3 things be done?  

Thanks a million!

Joey

DesktopImage.thumb.PNG.6076bf881e177da1d37136123a740be7.PNG481146734_ProductdescriptionplacedaboveSizeButtonandbelowDollarAmount.PNG.5ee40f0e3f9d1500790554f50552d36a.PNG1101787592_MovedescriptionaboveSizeButtonandbelowDollarAmount.PNG.e5ce324735c5dab11476d4b07c296c4b.PNG

Link to comment

@joeystephensmusic

Please post the URL for the product page you show.

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@joeystephensmusic

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

<style>

  .ProductItem-details .product-variants {
  
    display : -webkit-box;
    display : -ms-flexbox;
    display : flex;
    
    -webkit-box-orient : vertical;
    -webkit-box-direction : reverse;
    -ms-flex-direction : column-reverse;
    flex-direction : column-reverse;
    
    }
    
  .ProductItem-details .ProductItem-details-excerpt {
  
    -webkit-box-ordinal-group : 2;
    -ms-flex-order : 1;
    order : 1;
    
    }
    
  </style>

This is for a v7.1 site.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 3 months later...

Hi @tuanphan 

Thank you for posting the code! I am building my site right now, and used the 7.1 code to move the "add to cart" button to the top, and then I used your posted code to move the button to the side (below)

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

However, when I did the second code, it moved the price to the center (see screenshot). Can you help me align both to the left?

I'm still on a trial version, so I can't share the site, but is there anyway you can help with this?

Screen Shot 2021-05-14 at 11.37.44 AM.png

Link to comment
39 minutes ago, HaleyLM said:

I'm still on a trial version, so I can't share the site, but is there anyway you can help with this?

Please post the URL for your site.

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

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 5/14/2021 at 12:31 PM, creedon said:

Please post the URL for your site.

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

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Hi @creedon

Sorry for the delay. 

https://pufferfish-wolverine-zpym.squarespace.com/shop/p/2003-fender-telecaster-left-handed

Password: Boneyard! 

Link to comment
  • 3 weeks later...

@DevonHarris

For the product grid title.

.collection-type-products .grid-title

For detail.

.collection-type-products .ProductItem-details h1.ProductItem-details-title

 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 4 weeks later...

@DevonHarris

Please see the following.

The code doesn't reflect the order you need but should give you an idea of the code needed. If you need further help, hit us up.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 month later...
On 11/24/2020 at 8:12 PM, creedon said:

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

Hello @creedon! I used your code above (THANK YOU!) but now my product image & thumbnail carousel is displaying really low on the page - do you know how I can fix this? Thank you!

Here is a link to a product page - https://www.visitplanetjoy.com/shop/p/abstract-rainbow-recycled-high-waisted-bikini-top-bottom-set

Link to comment
1 hour ago, breesmith12010 said:

I used your code above (THANK YOU!) but now my product image & thumbnail carousel is displaying really low on the page - do you know how I can fix this?

My code doesn't change the gallery. Change your Content Alignment to Top. Go to a products detail.  Edit Design.

1985556116_ScreenShot2021-08-18at7_10_44PM.png.b33ee51d3c8491dd26c9cbf4dfc883e8.png

Change the alignment.

1768005443_ScreenShot2021-08-18at7_07_35PM.png.ae23d54f2826a725e731eac2a28bbe74.png

Save.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 month later...
On 6/8/2020 at 5:42 PM, tuanphan said:

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

 

Hi @tuanphan

I'm trying to do a similar thing. I'd like to move my product options dropdown box and purchase button up to sit below the price.

Order would be 1. product name 2. price 3. product option 4. add to cart 5. product description

I'm working in 7.0 

url is annasassi.com

Thanks 

Screen Shot 2021-09-30 at 10.00.20 pm.png

Link to comment
On 9/30/2021 at 7:07 PM, asassi said:

Hi @tuanphan

I'm trying to do a similar thing. I'd like to move my product options dropdown box and purchase button up to sit below the price.

Order would be 1. product name 2. price 3. product option 4. add to cart 5. product description

I'm working in 7.0 

url is annasassi.com

Thanks 

Screen Shot 2021-09-30 at 10.00.20 pm.png

Add to Settings > Advanced > Code Injection > Footer

/* variant */
.product-variants {
    order: 2 !important;
}
/* purchase */
.sqs-add-to-cart-button-wrapper {
    order: 2 !important;
}

image.thumb.png.096538387e5a08753cc931fdcb204e9d.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
5 minutes ago, tuanphan said:

Add to Settings > Advanced > Code Injection > Footer

/* variant */
.product-variants {
    order: 2 !important;
}
/* purchase */
.sqs-add-to-cart-button-wrapper {
    order: 2 !important;
}

image.thumb.png.096538387e5a08753cc931fdcb204e9d.png

@tuanphan do I need to add the original code as well?

I added the code to the code injector footer but nothing changed 

Thanks

Link to comment
On 10/2/2021 at 9:03 AM, asassi said:

@tuanphan do I need to add the original code as well?

I added the code to the code injector footer but nothing changed 

Thanks

sorry, missing style tag, use this code

<style>
  /* variant */
.product-variants {
    order: 2 !important;
}
/* purchase */
.sqs-add-to-cart-button-wrapper {
    order: 2 !important;
}
</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

I'm on 7.1 and would like the product page to display these one above another on desktop:

1. Product name, 2. Price, 3. Size selection, 4. Quantity field, 5. Add to cart, 6. Description

@creedon I am not sure how to adapt your code to do this. It's similar to the first request in this post, but it's been edited to a different order and I don't want the qty next to the add to cart.

My site: https://francescaelisia.com/shop/p/landscape-i-art-print

Thanks so much! 😊

 

 

Edited by francesca_
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.