Moving the "Add to Cart" Button Next to Quantity (7.1, Simple Product Layout)

Hi there!

I'm working with a new client to help them better layout their individual product pages.

I've already added javascript + a bit of css (that I'll add below) to move accordion blocks only from the "Additional Info" section to the product description area, but haven't been able to work out code to get the "Add to Cart" button to move up next to the "Quantity" field, which is the last piece of the puzzle (I know this can be done with zero coding using the "Half" layout, but it's not the look we're going for – we're using the "Simple" layout and would like to stick with it) – everything else is in the order/placement we want it already.

I've browsed a few other forum posts about this issue, but none of the coding proposed in those worked for this site, even after playing around with changing elements, selectors, etc. I'm not sure if it's because the javascript conflicts or I'm simply using the wrong selectors, classes or coding medium. Any help or suggestions would be appreciated!

Side note: I'm starting by only redoing ONE product as we play around with the layout, so despite how many products they have, I'd recommend inspecting the linked page/THIS page only.

SITE JAVASCRIPT FOR ACCORDING BLOCK PLACEMENT:

Located in Developer Tools > Code Injection > Footer

Quote

<script>
  $(function() {
    $('.ProductItem-additional .accordion-block').insertAfter('.sqs-add-to-cart-button');
  });
</script>

PRODUCT PAGE CSS FOR ACCORDING BLOCK PLACEMENT:

Located in Design > Custom CSS

Quote

 

.ProductItem-details .ProductItem-details-checkout {
  display: flex;
}

.ProductItem-details .reviewSummary {
  order: 4;
}

//Mobile spacing

.ProductItem-details .ProductItem-product-price,
.ProductItem-details .ProductItem-details-excerpt {
  margin-bottom: 0;
}

 

Thanks so much!

Your code, current move accordion into add to cart button

If move add to cart next to quantity, it will move both add to cart + accordion

@tuanphan I'm also trying to shuffle around some things with the shopping cart button, quantity and variation sections. Below a screenshot of what it currently looks like. I've found some code to move the cart button above the description of a product, but I would like to change the following as well. If you could help that would be fantastic!

- have quantity and variant next to each other, with the cart button below it

- Lessen the height of the quantity and variant boxes just a tad bit

- Be able to adjust the height gaps between title, price, and pull the description up towards the cart button. If you have any code for this, I could adjust the exact gaps by changing the numbers myself

- Lastly, align the title of the product with the product content at the top, and all of the above moves up with it.

website (product page): https://clementine-salamander-j4rd.squarespace.com/producten/p/odense-rond-e8hlb?p?p

password: sqspjelsan

On 3/3/2024 at 9:36 AM, jelsan said:

@tuanphan I'm also trying to shuffle around some things with the shopping cart button, quantity and variation sections. Below a screenshot of what it currently looks like. I've found some code to move the cart button above the description of a product, but I would like to change the following as well. If you could help that would be fantastic!

- have quantity and variant next to each other, with the cart button below it

- Lessen the height of the quantity and variant boxes just a tad bit

- Be able to adjust the height gaps between title, price, and pull the description up towards the cart button. If you have any code for this, I could adjust the exact gaps by changing the numbers myself

- Lastly, align the title of the product with the product content at the top, and all of the above moves up with it.

website (product page): https://clementine-salamander-j4rd.squarespace.com/producten/p/odense-rond-e8hlb?p?p

password: sqspjelsan

Can you check password again? It is incorrect now

On 3/5/2024 at 4:52 PM, tuanphan said:

Can you check password again? It is incorrect now

Should be able to access it now. In the meantime, I've added another button to the product page, for people wanting to ask for a quota. Even though I have injected the code for both this extra button, plus the code to move everything mentioned before to the top, the latter it's not showing anymore. The codes might be interfering with each other, not sure.