Jump to content

Rearrange order on Product Page

Recommended Posts

  • Replies 16
  • Views 1.4k
  • Created
  • Last Reply
  • 3 weeks later...
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.

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 2 weeks later...

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.