reordering content on product page

Site URL: https://greyhound-alpaca-f863.squarespace.com/vintage-watches-store/p/zodiacaerospacejet

Hiya Community & @creedon,

I would like some help reordering my product page as well.

1. I would like to move the “Inquiries” button (which is a contact form) to below the price
2. For the “Inquiries” button to be larger in width 
3. For the “Inquiries” button, price & title to centre on mobile
4. Reduce spacing between the information on mobile

site: https://greyhound-alpaca-f863.squarespace.com/vintage-watches-store/p/zodiacaerospacejet

password: alpaca

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

  /* begin style product item page */
  
    .ProductItem-details .sqs-block-form {
    
      order : 1;
      
      }
      
    #block-yui_3_17_2_1_1610646193479_17149 {
    
      margin-bottom : 20px; /* space below Inquiries button */
      
      }
      
    body:not( .button-style-default ) .ProductItem-details .sqs-block-form .sqs-editable-button {
    
      padding-bottom : 0.5em;
      padding-top : 0.5em;
      width : 300px;
      
      }
      
    @media screen and ( min-width: 768px ) {
    
      .ProductItem-details h1.ProductItem-details-title {
        
          margin-bottom : 0;
          
          }
          
      .ProductItem-details .ProductItem-product-price,
      .sold-out .ProductItem-details .product-mark.sold-out,
      .ProductItem-details .ProductItem-details-excerpt
      
        {
        
          margin-bottom : 1.5vh;
          
          }
          
      .ProductItem .ProductItem-additional {
      
        margin-top : 1.5vh;
        
        }
        
      .ProductItem-details .ProductItem-details-title,
      .ProductItem-details .ProductItem-product-price
      
        {
        
          text-align : center;
          
          }
      }
      
    @media screen and ( max-width: 767px ) {
    
      .ProductItem-gallery {
      
        padding-bottom : 4;
        
        }
        
      .tweak-product-basic-item-gallery-design-slideshow .ProductItem-gallery-thumbnails {
      
        margin-bottom : 7vh;
        
        }
        
      .ProductItem-details h1.ProductItem-details-title {
      
          margin-bottom : 0;
          
          }
          
      .ProductItem-details .ProductItem-product-price,
      .sold-out .ProductItem-details .product-mark.sold-out,
      .ProductItem-details .ProductItem-details-excerpt
      
        {
        
          margin-bottom : 0.2vh;
          
          }
          
      .ProductItem .ProductItem-additional {
      
        margin-top : 0;
        
        }
        
      .ProductItem-details .ProductItem-details-title,
      .ProductItem-details .ProductItem-product-price
      
        {
        
          text-align : center;
          
          }
      }
      
    /* end style product item page */
    
  </style>

<script>

  $( ( ) => {
  
    /* move first form block in product additional info after price */
    
    $( '.ProductItem-additional .sqs-block-form:first' )
    
      .insertAfter ( '.ProductItem-product-price' );
      
    } );
    
  </script>

This is for a v7.1 site.

Let us know how it goes.

Hiya @creedon,

Thanks so much for providing the code, its looks so much better already! There were a few tweaks I was hoping you could help me with still.

I added a little of bit of margin to your code between the information as you can see in the screenshots I have provided.

1. Would it be possible to have equal spacing between the title and price/sold, and the price/sold and the inquiries button, both on desktop and mobile.

2. Would it be possible to have a bit of padding between the inquiries button and the body of text below it, on both desktop and mobile.

3. Finally, can the inquiries button (contact form) height be reduced slightly. 

Thank you for your time and help.

I've updated my previous code post.

I'm hesitant to try to play with the spacing around the price any more than I've done. There are some dynamic behaviors involved there. I've been burned before when things looked great one way then the dynamic behaviour kicked in and it looks bad.

@creedon works perfectly - thanks so much for your help.