Move "Additional Information" on Product Page

Hello - 

I have a form enabled on my product page. I would like people to click on the button for the form in lightbox mode to place the order for their product (rather than going through the cart). The problem is I can't seem to move the form button to somewhere that makes sense on the page, like the far right and up close to the description. (Basically where the cart button would be - working on figuring out how to remove that in separate thread). Any thoughts on some code to move the additional information would be super helpful. 

@paul2009 sells a plugin that would do exactly what you want and will save you a lot of manual work. Just remember to read the limitations regarding which templates it is compatible with before you purchase it.

https://sf.digital/squarespace-product-enquiry-form

On 10/26/2019 at 3:26 AM, Guest samsuss said:

Hello - 

I have a form enabled on my product page. I would like people to click on the button for the form in lightbox mode to place the order for their product (rather than going through the cart). The problem is I can't seem to move the form button to somewhere that makes sense on the page, like the far right and up close to the description. (Basically where the cart button would be - working on figuring out how to remove that in separate thread). Any thoughts on some code to move the additional information would be super helpful. 

Hi, I was able to reorder the display of individual elements on my product (price, excerpt, variant dropdown, quantity, Add to Cart Button, and an Additional Button) using the Custom CSS below (add to Design>Custom CSS). 

(In the code below the last item, ".ProductItem-details .sqs-block.button-block.sqs-block-button" relates to the Additional Button I added which I needed to display after the Add to Cart. You would need to replace that with your own button details u can find on Inspect Element).  You can change the 1/2/3/4/5/6 to set your own order priority.

I hope this helps you. I am not a techie and arrived at this solution after much search online and then a lot of playing around, and it worked for me (Brine family template).

PS - I suspect the solution below will be dependent on how you added your extra form button to the product page and where you added it. In my case, I used code to create the button as a link to another page, using Advanced Code Injection (header). i.e., I did not add a form block to the Additional Info section of the product page. I had tried that first and could not adjust the order when it was in Additional info.

CUSTOM CSS BELOW:
 

@media screen and (max-width: 1511px) and (min-width: 0) and (orientation: portrait) {

.ProductItem-product-price {
    order: 1 !important; margin-bottom: 0 !important;
}
.ProductItem-details-excerpt {
    order: 2 !important; margin-bottom: 0 !important;
}
.product-variants {
    order: 3 !important;
}
.product-quantity-input {
    order: 4 !important;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper {
    order: 5 !important; margin-bottom: 0 !important;
}
.ProductItem-details .sqs-block.button-block.sqs-block-button {
    order: 6 !important; margin-bottom: 0 !important;
}  
}