Jump to content

Move "Add to Cart" to above the description or fit the product description on one page without scrolling.

Recommended Posts

I'm looking to move the "add to cart" button so it's next to the price, I've had a look through the forums and I've tried some recommendations in store settings > advanced > page header code injection, but I haven't had any luck with getting any to work.

 

Alternatively, can I change the size of the section so it all fits into one page without scrolling? (minus the additional description, I don't mind the additional description not fitting on one page)

 

Password is: SepiaGreen17!

Link to comment

Can you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Where are you wanting to change the order, in the grid on this page?

https://sepia-green-kn5j.squarespace.com/haworthia

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Ideally it would be on the product itself, rather than the store page 🙂 

I will be putting long descriptions on the product page due to the nature of the product; therefore I need the call to action buttons located next to the price and title 🙂 

An example of one of my long product descriptions would be on my SolX products, which ultimately hides the add to cart further down the page.  

Link to comment

Right, okay, I understand what you're wanting now. Have you tried this?

https://www.will-myers.com/articles/reorder-product-details-in-product-item

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Let me know how it goes!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

It seems to of worked for my SolX products; I was wondering if you know how to align the price and add to cart button? 🙂

I thought it would be as simple as changing the order to the same number, but sadly I was wrong 😄 

    .product-quantity-input {
      order: 1;
    }
    .pdp-details-price {
      order: 1;

Link to comment
On 8/23/2023 at 10:36 PM, Ellagrace said:

It seems to of worked for my SolX products; I was wondering if you know how to align the price and add to cart button? 🙂

I thought it would be as simple as changing the order to the same number, but sadly I was wrong 😄 

    .product-quantity-input {
      order: 1;
    }
    .pdp-details-price {
      order: 1;

You mean make add to cart under price?

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

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.