Jump to content

Lucha

Member
  • Posts

    12
  • Joined

  • Last visited

Reputation Activity

  1. Like
    Lucha got a reaction from creedon in Moving 'add to cart' button   
    Fantastic, this worked. Thank you.
    Is it possible to bring the Product variant fields below the add to cart section too? Really appreciate it!
  2. Like
    Lucha got a reaction from creedon in Moving 'add to cart' button   
    That's exactly it. Many thanks 👏👏👏
  3. Thanks
    Lucha reacted to creedon in Moving 'add to cart' button   
    I've updated my previous post. Is that the order for which you are looking?
    Also you will want to remove or comment out the following CSS from Design > Custom CSS.
    .product-price {     order: 2 !important } .product-quantity-input {     order: 3 !important } .ProductItem-details .sqs-add-to-cart-button-wrapper {     order: 4 !important } .ProductItem-details-excerpt {     order: 5 !important }  
  4. Thanks
    Lucha reacted to creedon in Moving 'add to cart' button   
    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.
×
×
  • 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.