Moving 'add to cart' button

1 hour ago, jeaninewilson said:

Is there a way to move the quantity and add to cart button below the additional product description?

You can't move the existing quantity and perhaps the add to cart button as it breaks the functionality of the product detail page.

You can however use a product block and add one referencing the current product you are viewing.

Then with some CSS hide the original quantity and add to cart. Leaving the product block.

Do you think that would work for your need?

Hello, I have the same request: move the "add to cart" button above the description site-wide. @creedon can you lend a hand? I've tried a few different things with no success.

website: https://www.shoppemberley.com/shop/p/smoke-across-the-highlands-by-nigel-tranter

46 minutes ago, Pemberley said:

I have the same request: move the "add to cart" button above the description site-wide.

Please see my October 7, 2021 post earlier in this thread.

Then set the CSS variables thusly.

        --add-to-cart-button : -1;
        --description : unset;
        --price : -1;
        --quantity : unset;
        --variants : unset;

You may want to read the several posts following as some folks had trouble following the instructions. They may seem a bit obtuse but basically you are using building blocks to build up the elements needed to reach the final effect. Also the solution is a little more generalized to fit several uses cases.

Let us know how it goes.

@creedon Hi - following up from your help back in January.

On 1/27/2022 at 7:11 PM, Slyoung said:

@creedon, it seems to be working perfectly! Thanks so much!

I looked at my website on my phone this week and noticed that on the desktop, the price shows below the description, which is what I wanted. But on mobile, it still shows above the description. Is there additional code to re-order these elements for mobile?

I already have installed, in this order:

• store product details natural order desktop
• store product details display flex desktop
• store product details reorder desktop

Thanks for any help!

1 hour ago, Slyoung said:

I looked at my website on my phone this week and noticed that on the desktop, the price shows below the description, which is what I wanted. But on mobile, it still shows above the description.

Please post the URL for a page on your site where we can see your issue.

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 does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

2 minutes ago, creedon said:

Please post the URL for a page on your site where we can see your issue.

Here ya go. Price is below description on desktop, but above the description on mobile. 

https://www.sarahyoungart.com/shop/p/hidden-stream-at-graveyard-fields

17 hours ago, Slyoung said:

Price is below description on desktop, but above the description on mobile. 

Ah ha! I was a bit slow on the uptake. The reason the effect doesn't work on mobile is that is was designed for desktop only.

As a work around you could change the following line...

@media screen and ( min-width : 768px ) {

...in the store product details reorder desktop code to the following...

@media screen {

That would remove the viewport width check.

Let us know how it goes.

On 2/16/2022 at 2:49 AM, Jay_Encinares said:

Worked like a charm! 
Legend! thanks a lot 🙂

Hi Jay,

I tried your css above but its not working, maybe because our site is Flores (Bedford family).  Could you poss help with this?

thanks

Niki

On 5/30/2022 at 11:06 PM, Nikitaly said:

Hi Jay,

I tried your css above but its not working, maybe because our site is Flores (Bedford family).  Could you poss help with this?

thanks

Niki

What is your site url? We can check easier

Thanks.

https://www.rebelrebel.co.uk/bouquets-online

@Nikitaly

I answered your question here...

Thank you so much.  Apologies.  I was getting confused with which code to use because of the site being v7. working great now.

On 5/26/2022 at 3:22 PM, creedon said:

 

As a work around you could change the following line...

@media screen and ( min-width : 768px ) {

...in the store product details reorder desktop code to the following...

@media screen {

 

That worked! You're the best, @creedon, thanks! (Sorry for the slow response; I was away.)

On 5/26/2022 at 2:21 AM, Slyoung said:

I looked at my website on my phone this week and noticed that on the desktop, the price shows below the description, which is what I wanted. But on mobile, it still shows above the description. Is there additional code to re-order these elements for mobile?

Im trying to do a similar thing but with the add to cart button also. I want it to be the last thing you see in the mobile site. I haven't added any code yet since im a little bit lost regarding what code will work. Would appreciate any help. 

site: https://giraffe-harmonica-sk3p.squarespace.com/config/

5 hours ago, Arkaitx said:

Im trying to do a similar thing but with the add to cart button also. I want it to be the last thing you see in the mobile site. I haven't added any code yet since im a little bit lost regarding what code will work. Would appreciate any help. 

site: https://giraffe-harmonica-sk3p.squarespace.com/config/

@Arkaitx, follow instructions from @creedon. I followed his instructions - he's fabulous! If it helps, here is the summary I wrote for myself of what I did (following his instructions) in case I needed to redo it on another website etc. If this doesn't do what you need, then tag Creedon. Good luck!

Moved price down on the product detail page:

1. Shop page - Settings - Advanced - Custom code - copied 3 sets of code from here https://github.com/tomsWebConsulting/twcsl/tree/main/v7.1/Store Product Details Reorder Desktop#store-product-details-reorder-desktop, and in this order: Natural Order, Display Flex, and Reorder - and then change the numerical sequence in the Reorder section.
2. My help request, followed by his response. https://forum.squarespace.com/topic/163909-moving-add-to-cart-button/?do=findComment&comment=524798
3. Getting it fixed on mobile….posted to that thread on 5/25/2022
   1. Solution - removed ( min-width : 768px ) from the Reorder section.

@Slyoung I made a new topic and got an short answer that got it done. Thanks though, much appreciated!

Hi @creedon, reposting in this thread. I'm having an issue where using the "Half" format for products on Mobile, the reviews appear directly below the image rather than below the item's description at the bottom. Squarespace said they'll try to fix this but of course no ETA. Would it be possible to modify this to adjust the location of the reviews? I haven't had any luck finding the class to point to to move it using your existing code.

Thanks!

3 hours ago, wootiown said:

I'm having an issue

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

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

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

On 3/10/2023 at 3:55 PM, creedon said:

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

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

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

Thanks for your response, my site is live so I didn't want to show it with the problematic config unless I had to. You can see the reviews at the following: https://www.sunkentreasureaquatics.com/plants/p/mystery-plant-treasure-chest-3ne9n

The issue is only present on the mobile version of the site, there is no site password.

Thank you.

On 3/10/2023 at 9:39 AM, wootiown said:

I'm having an issue where using the "Half" format for products on Mobile, the reviews appear directly below the image rather than below the item's description at the bottom.

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>

  .view-item .products.collection-content-wrapper {
  
    display : flex;
    flex-direction : column;
    
    }
    
  .view-item .pdp-layout .reviewsSection {
  
    order : 1;
    
    }
    
  </style>

This is for v7.1.

Let us know how it goes.

18 hours ago, creedon said:

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>

  .products.collection-content-wrapper {
  
    display : flex;
    flex-direction : column;
    
    }
    
  .pdp-layout .reviewsSection {
  
    order : 1;
    
    }
    
  </style>

This is for v7.1.

Let us know how it goes.

Thank you so much for your help, that did work! Unfortunately, it also caused an issue on the main store page, where it broke the side by side columns. The item categories were moved above the list of items rather than being to the left of them. 
Before https://prnt.sc/SJo3XgAcCxBD
After https://prnt.sc/y_FQAPVAZ9kn

I've left the code in my site so you can see it here https://www.sunkentreasureaquatics.com/plants

Is there any way to fix this? Thank you. 

Also, do you have a donate button? Happy to throw some cash your way for the help!

1 hour ago, wootiown said:

Unfortunately, it also caused an issue on the main store page, where it broke the side by side columns.

I have updated my code post.

1 hour ago, creedon said:

I have updated my code post.

Works perfectly. Thanks so much!

On 11/4/2020 at 11:32 PM, creedon said:

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.

This is super close for me....I just need to move that button over or span it the whole column. I tried changing "center" to "start" and "left" but it didn't seem to work. Help? https://www.autoharpmusic.co/music/p/o-little-town-of-bethlehem-autoharp Thanks, A

20 hours ago, artgirl81 said:

This is super close for me....I just need to move that button over or span it the whole column. I tried changing "center" to "start" and "left" but it didn't seem to work. Help? https://www.autoharpmusic.co/music/p/o-little-town-of-bethlehem-autoharp Thanks, A

please 🙂