Rearrange order on Product Page

Site URL: https://mandolin-green-86sj.squarespace.com/

Hi! Can anyone help? I'm having the same issue. I would like the quantity and add to cart button to be below the price. With additional + accordion after button. Similar to this page: https://www.net-a-porter.com/en-us/shop/product/philosophy-di-lorenzo-serafini/double-breasted-houndstooth-cotton-blazer/1299457.

Hi. Can you share link to a product? We can help easier

Please also post your site-wide password so we can access your site.

The password is SilverIsGold. Thank you!

On 2/13/2021 at 9:19 PM, creedon said:

Please also post your site-wide password so we can access your site.

On 2/13/2021 at 8:09 PM, tuanphan said:

Hi. Can you share link to a product? We can help easier

Hi! The password is SilverIsGold.

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

<!--

  begin reorder .ProductItem-details-checkout child elements
  
  SS Version : 7.1
  
  the code is comprised of two style tags both of which must be present for the
  effect to work. the second style tag is where the user controls the order of
  elements
  
  -->
  
  <style>
  
    /*
    
      There is something odd going on with .ProductItem-details-checkout CSS as
      of 03/02/21. The rule-set has a display property value of block but child
      elements of .ProductItem-details-checkout have order properties on them.
      The first bit of CSS unsets those properties for a clean slate returning
      the elements to natural order.
      
      */
      
    /* no user serviceable parts below */
    
    .ProductItem-details-checkout .product-quantity-input,
    .ProductItem-details-checkout .product-variants,
    .ProductItem-details-checkout .ProductItem-details-excerpt,
    .ProductItem-details-checkout .ProductItem-product-price,
    .ProductItem-details-checkout .sqs-add-to-cart-button-wrapper
    
      {
      
        -webkit-box-ordinal-group : unset;
        -ms-flex-order : unset;
        order : unset;
        
        }
        
    .ProductItem-details .ProductItem-details-checkout {
    
      display : -webkit-box;
      display : -ms-flexbox;
      display : flex;
      
      }
      
    </style>
    
  <style>
  
    /* begin user reorder, this is where you get to control the order */
    
      .ProductItem-details-checkout .product-quantity-input {
      
        -webkit-box-ordinal-group : 2;
        -ms-flex-order : 1;
        order : 1;
        
        }
        
      .ProductItem-details-checkout .sqs-add-to-cart-button-wrapper {
      
        -webkit-box-ordinal-group : 2;
        -ms-flex-order : 1;
        order : 1;
        
        }
        
      /* end user reorder */
      
    </style>
    
  <!-- end reorder .ProductItem-details-checkout child elements -->

This is for v7.1.

Quote

With additional + accordion after button.

I didn't see any accordion so was unable to provide reordering code for it. I suspect though that would require some Javascript to move into place and then CSS to reorder.

Let us know how it goes.

Hi,

I'd like to add this feature to my website as well but the code doesn't work for me. most likely because I am using 7.0. is there a way you could tweak this code to work for me as well? 

I'd really appreciate it. 

Best.

@kyraunfltd

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

https://kyraunfltd.com/

@creedon Hi! Just made my site private. the password is 'jireh'

@kyraunfltd

Please see Store Product Details Reorder.

Let us know how it goes.

Hi,  I'd like to add this feature to my website as well. It's 7.1 
Product Page: https://www.valbanera.com/tienda/p/entre-flores

I'd really appreciate it. 

Best! 
Maribel

@Maribeltb

If you want the exact same effect the code from my March 2nd code post in this thread should do the trick.

Let us know how it goes.

Hi @creedon, I paste the code in March 3nd (didn't see 2nd code), but I doesn't work in my site.

I have another code, could it be this the problem?

Thanks!

@Maribeltb

I'm not seeing the code installed on your site.

When I install the code here locally for your site it works a treat.

@creedonI have this code...

I pasted your code in row 28...

On 3/16/2021 at 5:38 AM, Maribeltb said:

@creedonI have this code...

I pasted your code in row 28...

Have you solved it yet?