Move the Add to Cart Button above the product descriptions (CSS ineffective so far)

Site URL: https://www.railwaymania.net/shop/sudrian-decals

Hello, I'm a bit of a novice with using Squarespace so I apologise if there is an obvious answer to this.

I would like to do the same as 'Arch' in this thread, which is to move the 'Type', 'Quantity' and 'Purchase' to the top rather than the user having to scroll all the way to the bottom.

jpeter suggested adding this custom CSS:

Quote

@media screen and (min-width: 768px ) {
  .ProductItem-details .ProductItem-details-checkout {
    display: flex;
  }
}

Which I have copied and pasted into the custom CSS editor, then clicked 'save', but nothing happens, the page remains the same, even after refreshing. Have I missed a step or done something wrong?

Many thanks in advance

RM

The code from that solution is for a v7.1 site. Your site is v7.0 using an Avenue template.

Right, gotcha, I'd not heard of 7.1 before. Reading about switching from 7.0 to 7.1, it sounds like a massive faff. Is there any way of doing the same thing in 7.0?

Thank you

Add the following to Page Settings > Advanced > PAGE HEADER CODE INJECTION for the Product page.

<style>

  #productDetails {
  
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    
    }
    
  #productDetails .product-quantity-input {
  
    -webkit-box-ordinal-group: -2;
    -ms-flex-order: -3;
    order: -3;
    
    }
    
  #productDetails .product-sharing {
  
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    
    }
    
  #productDetails .product-title {
  
    padding-top: 4vh;
    
    }
    
  #productDetails .product-variants {
  
    -webkit-box-ordinal-group: -3;  
    -ms-flex-order: -4;
    order: -4;
    
    }
    
  #productDetails .sqs-add-to-cart-button-wrapper {
  
    -webkit-box-ordinal-group: -1;
    -ms-flex-order: -2;
    order: -2;
    
    }
    
  </style>

The previous is for a v7.0 site using Avenue template.

Let us know how it goes.

I updated the CSS in my previous post.

YES! You lovely wizard, thank you so much, this is even better as I can see how you specify the order.

Thank you again.