Jump to content

Re ordering Blocks

Go to solution Solved by creedon,

Recommended Posts

I'm having a little trouble figuring out exactly what you want moved and to where.

Using the following list could you order it in your desired order?

add-to-cart-button
description
price
quantity
review-summary
share
title
variants

I think what you want will require some CSS code.

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
  • 4 weeks later...
  1. title
  2. review-summary
  3. description
  4. variants
  5. quantity
  6. price
  7. add-to-cart-button
  8. share

I find it odd that the default placement for the price is so far from the add to cart button. It's also frustrating that adjusting these tables/order require so much code and knowledge. Squarespace is sold as a simple user friendly platform. Shopify makes these kind of changes drag and drop. 

Thanks for your help.

Link to comment
  • Solution

Please see the following.

For the CSS variable you'll want to set the following numbers.

      --add-to-cart-button : 2;
      --description : 1;
      --price : 2;
      --quantity : 1;
      --review-summary : 1;
      --share : 2;
      --title : 1;
      --variants : 1;

Let us know how it goes.

As to your dismay about the inability to easily reorder detail elements, please Contact Customer Support. Contacting them is the only way they officially take in new information.

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
4 hours ago, creedon said:
      --add-to-cart-button : 2;
      --description : 1;
      --price : 2;
      --quantity : 1;
      --review-summary : 1;
      --share : 2;
      --title : 1;
      --variants : 1;

So where do I put this bit? I'm not a web developer and again I chose this platform for it's easy of use. I have my own are of expertise and it's not in this language. 

Thanks for the help. 

Link to comment

Ok here's what I have copied from the post you quoted. I don't see any similar code to replace. I've tried to just paste it in the lower sections but obviously not working. 

<!--

  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>
  
      
    /* 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 -->

 

Link to comment
On 7/2/2022 at 11:00 PM, dbean said:

Ok here's what I have copied from the post you quoted.

You copied code from my Mar 2nd post. The post I pointed to was the Mar 4th 2021 post.

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

That made a bid difference. As stated, this is not my field. I thought you were referencing the code you posted on the post and not the link you had posted. Lots of links and codes. 

Thanks for your help. It's working the way I would like it to. 

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.