Jump to content

Moving 'add to cart' button

Recommended Posts

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

It looks like you've got some old code going there. Remove it and please see the following.

With the new code you can get this.

ScreenShot2023-08-25at7_49_19PM.png.7613a0374a07b1fb9126b6e424c4da6b.png

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
1 hour ago, creedon said:

It looks like you've got some old code going there. Remove it and please see the following.

With the new code you can get this.

ScreenShot2023-08-25at7_49_19PM.png.7613a0374a07b1fb9126b6e424c4da6b.png

Let us know how it goes.

Hi -- I really appreciate your reply. I'm so sorry but which code are you referring to?--that page is quite long now. Are you referring to the code on Github that is referred to? Thank you for your help! A

Link to comment
25 minutes ago, artgirl81 said:

I'm so sorry but which code are you referring to?

I'm suggesting that whatever code you have installed on your site's Store page be removed because it appears to me to be old code.

Then install the codes I pointed to in my previous post.

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
20 hours ago, creedon said:

I'm suggesting that whatever code you have installed on your site's Store page be removed because it appears to me to be old code.

Then install the codes I pointed to in my previous post.

Hello -- I did remove it when you said to, but I'm unclear what part of that page has the correct code for my template. There are several entries of code. The script that starts like this??: 

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

Thank you!!

Edited by artgirl81
wrong punctuation
Link to comment
On 8/26/2023 at 5:49 PM, artgirl81 said:

but I'm unclear what part of that page has the correct code for my template. There are several entries of code. The script that starts like this??:

At this point given I don't know what code you've installed or not installed I wouldn't suggest trying surgery to install the right code. Just cut out any code related to the effect you want to achieve and install from ground zero. Use the code I pointed to above.

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 hour ago, creedon said:

At this point given I don't know what code you've installed or not installed I wouldn't suggest trying surgery to install the right code. Just cut out any code related to the effect you want to achieve and install from ground zero. Use the code I pointed to above.

I extracted everything. I'm really sorry, but the issues is I *cannot* decipher what you are pointing me to. I'm not sure how else to articulate. Thank you -- I really appreciate your time. A

Link to comment
20 hours ago, artgirl81 said:

I *cannot* decipher what you are pointing me to.

Did you try following the install instructions?

Tip to copy code you can use the copy (done for you) or raw (you copy and paste from a page) buttons.

ScreenShot2023-08-29at1_36_42PM.png.6c839d118d9cd0cfd982784951cf482b.png

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

Hi. I'm trying to move up the "add to cart" (in my case, purchase) button above my digital product description. I need a solution that can be applied across all my digital product pages. 

The product page I am working on finding a solution for currently is linked below. 

https://www.monarchera.com/shop/p/the-monarch-planner

If you could help me, I would greatly appreciate it!

Edited by MaiyaM
Link to comment
1 hour ago, MaiyaM said:

I need a solution that can be applied across all my digital product pages.

Do you want all your products to have this effect? If so my code previously cited in this thread will do the trick. There is even a settings example specifically for the effect you want.

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
9 hours ago, creedon said:

Do you want all your products to have this effect? If so my code previously cited in this thread will do the trick. There is even a settings example specifically for the effect you want.

Yes, I see it has product quantity & variants lines of code. Can I remove those lines, without it messing up the code and still get the solution I need? I just have the product description, price, and the add-to-cart button. 

Edited by MaiyaM
Link to comment
4 hours ago, MaiyaM said:

Can I remove those lines, without it messing up the code and still get the solution I need?

You can't remove lines. Just leave the ones you don't use to unset. You could rearrange the CSS variables to make it a little clearer which ones you are using if you like. I generally recommend interacting with the code as little as possible to reduce the possibility of introducing syntax errors, break the code.

      --price : -1;
      --add-to-cart-button : -1;
      
      --description : 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
22 hours ago, creedon said:

You can't remove lines. Just leave the ones you don't use to unset. You could rearrange the CSS variables to make it a little clearer which ones you are using if you like. I generally recommend interacting with the code as little as possible to reduce the possibility of introducing syntax errors, break the code.

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

 

It worked! Thank you so much!

Link to comment
  • 7 months later...
On 5/22/2024 at 12:09 AM, mgroeteke said:

The original 7.0 code seems not to work for me. Is there a solution for reordering this on a "Wells" template product page as well? The only change I would need is to put the price after the description and directly before the Size / Style variants selections. See screenshot.

Screen Shot 2024-05-21 um 19.07.50.png

If you share link to this product, we can help easier

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
22 hours ago, mgroeteke said:

Sorry, totally forgot about this, here an example:

https://architectureshooting.com/druckeditionen-print-editions/berlin-tempelhof-runway

Kind regards

Use this to Website Tools > Custom CSS

/* Well Price order */
div#productDetails {
    display: flex;
    flex-direction: column;
}

div.product-excerpt {
    order: 1;
}

#productDetails .product-price {
    order: 2;
}

#productDetails .product-variants {
    order: 3 !important;
}

div.sqs-add-to-cart-button-wrapper {
    order: 4 !important;
}

div.product-sharing {
    order: 5;
}

 

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
On 5/24/2024 at 3:34 PM, mgroeteke said:

I forgot one more thing: there seems to be an extra line or a padding rendered after the price, Would it be possible to remove it?

Screen Shot 2024-05-24 um 10.35.17.png

Use this CSS under

div.product-quantity-input {
    display: none;
}

 

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

Hi, I've tried all the different CSS codes I can find in this and other threads however I'm unable to get the product price to move from above the product excerpt down to just above the Add to cart button. The price used to be just above the add to cart button, however it appears there's been a change which has affected that.

I'm hoping someone can take a look at this product page (https://www.terratag.com.au/shop/p/seed-paper-name-badges) and guide me in the right direction. 

Some CSS moves the price down to the bottom, but also moves the add to cart button to the top. I can't seem to keep the add to cart button where it is and just move the price to immediately above the add to cart button. 

I have tried @creedon's CSS, but I don't know where to insert the variables, and I get a syntax error on the first line it's added to. The code in the attached image also isn't doing anything. Apologies for my ignorance. Any help is greatly appreciated. 

I've tried adding the code to the shop > settings > advanced > page header code injection page, and also to the website tools > custom css page. Help with the correct place to add the css would also be appreciated. 

Many thanks

 

 

Uiljefoemq.png

Link to comment
Posted (edited)

@Terratag try this out. It looks like you have a typo first of all... so let's fix that.

image.jpeg.90118c6e997496bbe465f5e78719a6dc.jpeg

 

Try this code. Add or change margins under each one to adjust spacing since its possible that will be off with a different order of elements. Just uncomment the margin and change the 0 to something else.

#page .ProductItem-details-checkout {
  display: flex;
  flex-direction: column;
  
  .ProductItem-details-excerpt {
    order: 1 !important;
    //margin-bottom: 0px;
  }
  
  .product-variants {
    order: 2 !important; //this looks to be already set.
    //margin-bottom: 0px;
  }
  
  .ProductItem-product-price {
    order: 3 !important;
    //margin-bottom: 0px;
  }
  .ProductItem-quantity-add-to-cart {
    order: 4 !important;
    //margin-bottom: 0px;
  }
  
}

 

Edited by JayVanDyke
swapped a word

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

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.