Jump to content

Rearrange order on Product Page

Recommended Posts

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

Edited by creedon
version 2

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

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

1370214146_ScreenShot2021-03-15at1_41_18PM.thumb.png.a7010f1e16bd64048ab0e86bef022386.png

Edited by creedon

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

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