Jump to content

Move "Additional Information" on Product Page

Recommended Posts

Guest samsuss

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. 

Link to comment
  • Replies 2
  • Created
  • Last Reply
  • 9 months later...
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;
}  
}
 

Link to comment

Archived

This topic is now archived and is closed to further replies.

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