Moving 'add to cart' button

@francesca_

Please see Store Page Detail Details Reorder Desktop.

Then set the CSS variables thusly.

        --add-ons : 6;
        --add-to-cart-button : 4;
        --description : 5;
        --price : 1;
        --quantity : 3;
        --variants : 2;

Folks this is a more generalized solution to moving these elements around than the others.

Let us know how it goes.

14 hours ago, creedon said:

@francesca_

Please see Store Product Details Reorder Desktop.

Then set the CSS variables thusly.

        --add-to-cart-button : 4;
        --description : 5;
        --price : 1;
        --quantity : 3;
        --variants : 2;

Folks this is a more generalized solution to moving these elements around than the others.

Let us know how it goes.

Hello @creedon, thank you for your reply!

I am a beginner, so I have tried to fix this, but I cannot get it to work.

I have copied the code from https://github.com/tomsWebConsulting/twcsl/blob/main/v7.1/Store Product Details Display Flex Desktop/store product details display flex desktop.html#L1

and https://github.com/tomsWebConsulting/twcsl/blob/main/v7.1/Store Product Details Natural Order Desktop/store product details natural order desktop.html#L1

into the Page Header Code Injection in my shop. Do I just copy and paste them one after the other in this location?

Where do I place the CSS variables you list? I have tried added them before and after in the Page Header Code Injection, but it's not working. 

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

Note: I need very specific instructions. Thank you for your help.

On 10/8/2021 at 10:54 PM, francesca_ said:

Hello @creedon, thank you for your reply!

I am a beginner, so I have tried to fix this, but I cannot get it to work.

I have copied the code from https://github.com/tomsWebConsulting/twcsl/blob/main/v7.1/Store Product Details Display Flex Desktop/store product details display flex desktop.html#L1

and https://github.com/tomsWebConsulting/twcsl/blob/main/v7.1/Store Product Details Natural Order Desktop/store product details natural order desktop.html#L1

into the Page Header Code Injection in my shop. Do I just copy and paste them one after the other in this location?

Where do I place the CSS variables you list? I have tried added them before and after in the Page Header Code Injection, but it's not working. 

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

Note: I need very specific instructions. Thank you for your help.

Have you solved it yet?

5 hours ago, tuanphan said:

Have you solved it yet?

We solved it via DM.

On 10/10/2021 at 8:00 PM, creedon said:

We solved it via DM.

Hello Creedon,
First I would like to thank you for taking the time to answer to all of us! It is very nice of you.

I have a problem with my shop product page. I would like to re-arrange the order of my page like this order:
1. Product name, 2. Price, 3. Size selection, 4. Quantity field, 5. Add to cart, 6. Description

This is the same from another person in a previous question, but I would like to keep the "quantity" and the "size selection (in french: taille)" on the same line. I tried everything for 4-5 hours, and I could not find a way.

Also I would love if the box "add to product" (fr: Ajouter au panier) could be longer and take all the space of the line.

Here is my website : https://www.brondyhumphrey.com/shop/p/voyage-etre-poster

My password: soleil 

I would really appreciate if you could help me,
Have a beautiful day.

H.

@iJizzy1

Are you thinking something like the following?

21 hours ago, creedon said:

@iJizzy1

Are you thinking something like the following?

Hello Creedon,

Thank for your fast answer, this is exactly what I am trying to do! Would it be possible to get the code? (Also, I remove the quantity button which I do not need.)

I am currently trying to replicate the same mobile product design from this website : https://store.henriprestes.com/collections/frontpage/products/a-warm-winter?variant=38029900939417

I do not know if it is possible because the website has been created with shopify (I think) but maybe you could enlighten me on this subject?

And If I may ask another question, do you think it is possible to create an accordion in the product description of my shop?
Like this example of a website:

Thank you again for your help, I really appreciate it.

On 10/20/2021 at 12:05 PM, iJizzy1 said:

this is exactly what I am trying to do! Would it be possible to get the code?

This is a little bit involved because we are building code up in layers.

Install the code from Store Product Details Natural Order Desktop.
  
Install the code from Store Product Detail One Left Class Add.
  
Install the code from Store Product Details Reorder Desktop. You'll want to set the CSS variables in this code thusly.

        --add-to-cart-button : 4;
        --description : 5;
        --price : 1;
        --quantity : 3;
        --variants : 2;
        

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

The following code may not be the most up to date. Go to the cited links for the latest versions of the code. I will not be updating the following code listing.

<!--

  begin store product detail quantity right of variants
  
  Version       : 0.1d0
  
  SS Version    : 7.1
  
  Dependancies  : store product details natural order desktop
                  
                  store product detail one left class add
                  
                  store product details reorder desktop
  
  Notes         : the code is comprised of two style tags. both are needed for
                  the effect to work
                  
                  this effect should be installed after the following code,
                  order is important :
                  
                    store product details natural order desktop
                    
                    store product detail one left class add
                    
                    store product details reorder desktop
                    
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    .ProductItem-details .ProductItem-details-checkout {
    
      --gap : 2rem;
      
      }
      
    </style>
    
  <!-- do not change anything below, there be the borg here -->
  
  <style>
  
    .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout {
    
      display : grid;
      gap : var( --gap );
      grid-template-columns : repeat( 5, 1fr );
      
      }
      
    .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout .product-variants {
    
      display : -webkit-box;
      display : -ms-flexbox;
      display : flex;
      
      -webkit-box-orient : vertical;
      -webkit-box-direction : normal;
      -ms-flex-direction : column;
      flex-direction : column;
      
      gap : var( --gap );
      
      }
      
    .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout > *,
    .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout .variant-option,
    .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout .product-price
    
      {
      
        margin : 0 !important;
        width : unset !important;
        
        }
        
    .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout > * {
    
      grid-column : 1 / 6;
      
      }
      
    @media screen and ( min-width : 433px ) {
    
      .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout .product-quantity-input {
      
        grid-column : 3 / 4;
        
        }
        
      .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout .product-variants {
      
        grid-column : 1 / 3;
        
        }
        
      .tweak-product-basic-item-text-alignment-left .ProductItem:not( .one-left ):not( .sold-out ) .ProductItem-details .ProductItem-details-checkout .sqs-add-to-cart-button-wrapper {
      
        grid-column : 1 / 4;
        
        }
        
      }
      
    </style>
    
  <!-- end store product detail add to cart button right of quantity -->

Let us know how it goes.

On 10/20/2021 at 12:05 PM, iJizzy1 said:

do you think it is possible to create an accordion in the product description of my shop?

Yes. Usually what folks do is create their accordion in Additional Info in the product editor. Then if you want to move the accordion to a different location use Javascript to make the move.

21 hours ago, creedon said:

Let us know how it goes.

Hello Creedon,

Thank you for your help. Unfortunately, it doesn't work. I followed your instructions. The only thing working is the order. But the rest doesn't show up. I tried to tweak the order of each code but it doesn't help... (see image)

But I checked the code, and many lines are in red so I supposed it is some syntax errors. (see video)

I am waiting for your answer, for now i'm going to try the accordion.

 

@iJizzy1

One issue is you need to set the CSS variable below as I mentioned previously.

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

3 minutes ago, creedon said:

One issue is you need to set the CSS variable below as I mentioned previously.

I just did that, it does not change anything. Still the same. As you can see right now on the page:
https://www.brondyhumphrey.com/shop/p/ydqled5697n2opspn38512a07e8gv4-gzwpz-za96g-e374z-34j4c-ayrrx-s6w3t-zr29r-gyef8-pcwjc-m3dxg-kleck-ch2r8-a4z9s-rn26d

 

@iJizzy1

The CSS variables are still not quite right. Also remove the following ruleset from Design > Custom CSS.

.collection-type-products .product-quantity-input {
    display: none !important
}

It is hiding your quantity fields.

On 10/20/2021 at 9:05 PM, iJizzy1 said:

(Also, I remove the quantity button which I do not need.)

I decided to remove it because I do not need it.

Thank you for your help and patience @Creedon but I am still quiet lost with your code.
Do the code will replicate the website screenshoot I posted in my second post ?

Thank you again.

PS: I found a way for the accordion 🙂 !

On 10/7/2021 at 9:01 PM, creedon said:

@francesca_

Please see Store Product Details Reorder Desktop.

Then set the CSS variables thusly.

        --add-to-cart-button : 4;
        --description : 5;
        --price : 1;
        --quantity : 3;
        --variants : 2;

Folks this is a more generalized solution to moving these elements around than the others.

Let us know how it goes.

@creedon, I want to reorder the elements on the product detail page, e.g., move the price to just above the buy button. I've never tried any of the custom code.

When I click your link, it then refers me to two other links in a chain:

• Store Product Details Reorder Desktop
• Store Product Details Display Flex Desktop
• Store Product Details Natural Order Desktop

If I just want to rearrange the order, do I need all of 3 of these?

If so, in what order do I add these 3 sets of code to the store page - Natural Order, then Display Flex, then Reorder?

Thank you.

1 hour ago, Slyoung said:

If I just want to rearrange the order, do I need all of 3 of these?

Yes. I know it is a little convoluted but each piece of code builds on the previous code.

Quote

what order do I add these 3 sets of code to the store page - Natural Order, then Display Flex, then Reorder?

That is exactly the order!

Just a note. Squarespace changed the product detail page recently. This cited code was written before the changes.

If it doesn't seem to be working let us know.

1 hour ago, creedon said:

 

Just a note. Squarespace changed the product detail page recently. This cited code was written before the changes.

If it doesn't seem to be working let us know.

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

Hello,
Im new here and I cant get any of the code working ...
here's a link to our website --> https://www.first1000daysaustralia.com/affirmation-cards/affirmation-card

ps, please inform me if I'm violating any forum rules and community policy 🙂
 

13 minutes ago, Jay_Encinares said:

I cant get any of the code working ...

That is most likely because the code posted in this thread is not specific to your v7.0 Bedford template family template.

Please describe where you want to move the add to cart button and perhaps we can help.

11 minutes ago, creedon said:

That is most likely because the code posted in this thread is not specific to your v7.0 Bedford template family template.

Please describe where you want to move the add to cart button and perhaps we can help.

Yes Sorry, 
same as the others I wanted to to be 
1 Title
2 Add to cart
3 quantity
4 excerpt 

what I tried on my end is I inspected all its class and followed some codes above but to no success  

@Jay_Encinares

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

<style>

  #productDetails {
  
    display : flex;
    flex-direction : column;
    
    }
    
  #productDetails .sqs-add-to-cart-button-wrapper {
  
    order : 1;
    
    }
    
  #productDetails .product-quantity-input {
  
    order : 2;
    
    }
    
  #productDetails .product-excerpt,
  #productDetails .product-sharing
  
    {
    
      order : 3;
      
      }
      
  </style>

This is for v7.0 using the Bedford template family.

Let us know how it goes.

16 minutes ago, creedon said:

@Jay_Encinares

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

<style>

  #productDetails {
  
    display : flex;
    flex-direction : column;
    
    }
    
  #productDetails .sqs-add-to-cart-button-wrapper {
  
    order : 1;
    
    }
    
  #productDetails .product-quantity-input {
  
    order : 2;
    
    }
    
  #productDetails .product-excerpt,
  #productDetails .product-sharing
  
    {
    
      order : 3;
      
      }
      
  </style>

This is for v7.0 using the Bedford template family.

Let us know how it goes.

Worked like a charm! 
Legend! thanks a lot 🙂

Hi all, 

Is it possible to move the cart logo to the left side of the site header and leave the button aligned to the right where is currently is please?

https://wvcharge.squarespace.com

Pass: waev

Thank you in advance,

Joe

On 2/24/2022 at 2:26 AM, HG-Design said:

Hi all, 

Is it possible to move the cart logo to the left side of the site header and leave the button aligned to the right where is currently is please?

https://waevcharge.squarespace.com 

Pass: waev

Thank you in advance,

Joe

 

Add to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('.header-display-desktop .header-actions-action.header-actions-action--cart').insertBefore('.header-display-desktop>.header-burger');
	});
</script>
<style>
  .header-actions-action.header-actions-action--cart:first-child {
    display: none;
}
</style>

Is there a way to move the quantity and add to cart button below the additional product description? See:  https://aherosjourney.community/giftstore/p/the-nature-of-love

Thank you!