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

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. 

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

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)

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>

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?

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