Lucha reacted to
creedon in Moving 'add to cart' button
November 5, 2020
The code @tuanphan posted was for a Squarespace v7.0 site. Your site is v7.1 and requires different code.
Add the following to Store Settings > Advanced > Page Header Code Injection.
<style>
/*
There is something odd going on with v7.1 CSS as of 11/04/20
.ProductItem-details-checkout has a rule of display block but sub elements
have order properties on them. The first bit of CSS unsets those items for a
clean slate returning the elements to natural order.
*/
.ProductItem-details .product-quantity-input,
.ProductItem-details .product-variants,
.ProductItem-details .ProductItem-details-excerpt,
.ProductItem-details .ProductItem-product-price,
.ProductItem-details .sqs-add-to-cart-button-wrapper
{
-webkit-box-ordinal-group: unset;
-ms-flex-order: unset;
order: unset;
}
.ProductItem-details .product-variants {
-webkit-box-ordinal-group: 8;
-ms-flex-order: 7;
order: 7;
width: auto;
}
.ProductItem-details .ProductItem-details-excerpt {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8;
}
.ProductItem-details .ProductItem-additional {
-webkit-box-ordinal-group: 9;
-ms-flex-order: 8;
order: 8;
}
@media only screen and ( pointer: coarse ) and ( min-width: 1025px ), screen and ( min-width: 800px ) {
.ProductItem-details .ProductItem-details-checkout {
-webkit-column-gap: 3vw;
-moz-column-gap: 3vw;
grid-column-gap: 3vw;
column-gap: 3vw;
display: -ms-grid;
display: grid;
grid-row-gap: 3vh;
row-gap: 3vh;
-ms-grid-columns: 1fr 3vw 1fr 3vw 1fr 3vw 1fr 3vw 1fr;
grid-template-columns: repeat( 5, 1fr );
}
.ProductItem-details .ProductItem-details-checkout > * {
-ms-grid-column: 1;
-ms-grid-column-span: 5;
grid-column: 1 / 6;
margin: 0;
margin-right: 1vw;
}
.ProductItem-details .product-quantity-input {
-ms-grid-row-align: end;
align-self: end;
-ms-grid-column: 1;
-ms-grid-column-span: 1;
grid-column: 1 / 2;
margin-right: 0;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-grid-row-align: end;
align-self: end;
-ms-grid-column: 2;
-ms-grid-column-span: 4;
grid-column: 2 / 6;
width: auto;
}
}
@media only screen and ( pointer: coarse ) and ( max-width: 1024px ), screen and ( max-width: 799px ) {
.ProductItem-details .ProductItem-details-checkout {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
</style>
Let us know how it goes.