Jump to content

Moving "Add to Cart" button to bottom of Product Page

Go to solution Solved by SignBoss,

Recommended Posts

Site URL: https://www.gillettecamels.com

I set up a commerce option for a local Booster Club. They need donors to fill out a custom form, but I didn't find the info they needed on the Squarespace form that's found in Product Settings. I did find the info they needed on Jotform so I embedded that into the Product Page.

The problem is that the layout encourages a customer to Add to Cart before filling out the necessary form. I didn't see a way to arrange the blocks on that page since it includes the Add to Cart button in Product Details, but we really need the quantity and Add to Cart button to be at the bottom of the page below the embedded Jotform. 

Link to comment
  • Replies 5
  • Views 520
  • Created
  • Last Reply

Top Posters In This Topic

On 8/11/2021 at 9:29 PM, SignBoss said:

Site URL: https://www.gillettecamels.com

I set up a commerce option for a local Booster Club. They need donors to fill out a custom form, but I didn't find the info they needed on the Squarespace form that's found in Product Settings. I did find the info they needed on Jotform so I embedded that into the Product Page.

The problem is that the layout encourages a customer to Add to Cart before filling out the necessary form. I didn't see a way to arrange the blocks on that page since it includes the Add to Cart button in Product Details, but we really need the quantity and Add to Cart button to be at the bottom of the page below the embedded Jotform. 

Hi,

You want to move Quantity + Add to cart under Jotform (in Additional Info)?

Or move Jotform to above Quantity/Add to cart (in Short Description)?

 

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 8/13/2021 at 10:05 PM, tuanphan said:

Hi,

You want to move Quantity + Add to cart under Jotform (in Additional Info)?

Or move Jotform to above Quantity/Add to cart (in Short Description)?

 

Hi Tuanphan, please move Quantity + Add to cart under Jotform (in Additional Info)

Link to comment
On 8/16/2021 at 10:49 PM, SignBoss said:

Hi Tuanphan, please move Quantity + Add to cart under Jotform (in Additional Info)

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('.product-quantity-input, div.sqs-add-to-cart-button-wrapper').insertAfter('section.ProductItem-additional .embed-block');
	});
</script>

 

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
  • Solution
6 hours ago, tuanphan said:

Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('.product-quantity-input, div.sqs-add-to-cart-button-wrapper').insertAfter('section.ProductItem-additional .embed-block');
	});
</script>

 

You are amazing! That's exactly what I needed. One question though, is there any way to make the wrapper a little larger around product quantity and button?

Link to comment
On 8/18/2021 at 9:02 PM, SignBoss said:

You are amazing! That's exactly what I needed. One question though, is there any way to make the wrapper a little larger around product quantity and button?

Hi. Sorry for the delay.

Add to Design > Custom CSS

/* top bottom spacing of quantity */
.product-quantity-input {
    padding-bottom: 30px;
    padding-top: 10px;
}

 

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.