Jump to content

Moving 'add to cart' button

Recommended Posts

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

Edited by creedon

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

Link to comment
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?

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
  • 2 weeks later...
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.

Link to comment
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

IMAGE2.thumb.jpg.939a31569cb26c6076cf9c4b703c4915.jpg

 

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:



1960139760_Sanstitre.thumb.jpg.3c7e60f451448fc13413e226ccd94782.jpg

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

 

Edited by iJizzy1
Wrong question asked
Link to comment
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.

Edited by creedon

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

Edited by creedon

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

 

Capture.JPG

Link to comment

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

 

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

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

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 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 🙂 !

Edited by iJizzy1
Link to comment
  • 3 months later...
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.

 

Link to comment
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.

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 weeks later...
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.

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

Link to comment

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

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
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 🙂

Link to comment
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>

 

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
  • 4 weeks later...

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.