rearrange product page elements and spacing between them.

Hello! So i need help with how to remove the space between size and add to cart on desktop product page as seen on the screenshot and also for the mobile version, i need to remove the space between size and add to cart but also bring description over size choise. Is there any way to do it? Thanks in advance!

Product example page for my website: https://kale-hawk-rdzw.squarespace.com/shop/p/ottawa-2152

#1. You can use this code to Website > Website Tools > Custom CSS

div.product-quantity-input {
    display: none !important;
}

#2. Use this CSS code

@media screen and (max-width:767px) {
div.ProductItem-details-excerpt {
    order: 2 !important;
}
}

That worked perfect! Thank you very much for your time!!

The new PDP update has completely broken the order of things on my product page, as I was using custom CSS. Wondering if you have any idea how to override the new change to return to the previous formatting?

On 5/29/2024 at 2:30 AM, marbleandmilkweed said:

The new PDP update has completely broken the order of things on my product page, as I was using custom CSS. Wondering if you have any idea how to override the new change to return to the previous formatting?

You can share link to product on your site, I will test new code

Thank you, I appreciate it so much! Here is a product: https://www.marbleandmilkweed.com/shop/p/rosebergamotmoodmist

On 6/1/2024 at 8:15 AM, marbleandmilkweed said:

Thank you, I appreciate it so much! Here is a product: https://www.marbleandmilkweed.com/shop/p/rosebergamotmoodmist

What should it look like now? I can test code easier

https://www.marbleandmilkweed.com/shop/p/rosebergamotmoodmist

Thanks so much for your reply! This is the code that I had there before the latest change that Squarespace made, hoping to get everything back in this order:

/**
 * Switch Order of Product
 * Details using
 * Simple Layout
**/

#page .ProductItem-details-checkout {
  display: flex;
  flex-direction: column;

  /* Set Orders */
  .ProductItem-details-excerpt {
    order: 1 !important;
  }
  .ProductItem-details-checkout .accordion-block {
  margin-bottom: 30px;
  order: 2 !important;
}
  .product-variants {
    order: 3 !important;
  }
  .product-quantity-input {
    order: 4 !important;
  }
  .ProductItem-product-price {
    order: 5 !important; 
    font-family: "Baskervillelightitalic" !important;
  }
  .sqs-add-to-cart-button-wrapper {
    order: 6 !important;
  }
  .pdp-product-add-ons{
    order: 7 !important;
  }
 
    .sqs-add-to-cart-button-inner {
  font-family: 'Raleway';
      font-size: 13px;
}
}
  
  @media (max-width: 767px) {
    .ProductItem-details-excerpt {
      order: 1;
    }
    .ProductItem-details-checkout .accordion-block {
  margin-bottom: 30px;
  order: 2;
}
    .product-variants {
      order: 3;
    }
    .product-quantity-input {
      order: 4;
    }
    .ProductItem-product-price {
      order: 5; font-family: "Baskervillelightitalic" !important;
    }
    .sqs-add-to-cart-button-wrapper {
      order: 6;
  }
   .pdp-product-add-ons{
      order: 7;
     padding-top: 60px !important;
    }
      .sqs-add-to-cart-button-inner {
  font-family: 'Raleway';
      font-size: 13px;
}
}  

On 6/3/2024 at 12:37 AM, marbleandmilkweed said:

Thanks so much for your reply! This is the code that I had there before the latest change that Squarespace made, hoping to get everything back in this order:

 

/**
 * Switch Order of Product
 * Details using
 * Simple Layout
**/

#page .ProductItem-details-checkout {
  display: flex;
  flex-direction: column;

  /* Set Orders */
  .ProductItem-details-excerpt {
    order: 1 !important;
  }
  .ProductItem-details-checkout .accordion-block {
  margin-bottom: 30px;
  order: 2 !important;
}
  .product-variants {
    order: 3 !important;
  }
  .product-quantity-input {
    order: 4 !important;
  }
  .ProductItem-product-price {
    order: 5 !important; 
    font-family: "Baskervillelightitalic" !important;
  }
  .sqs-add-to-cart-button-wrapper {
    order: 6 !important;
  }
  .pdp-product-add-ons{
    order: 7 !important;
  }
 
    .sqs-add-to-cart-button-inner {
  font-family: 'Raleway';
      font-size: 13px;
}
}
  
  @media (max-width: 767px) {
    .ProductItem-details-excerpt {
      order: 1;
    }
    .ProductItem-details-checkout .accordion-block {
  margin-bottom: 30px;
  order: 2;
}
    .product-variants {
      order: 3;
    }
    .product-quantity-input {
      order: 4;
    }
    .ProductItem-product-price {
      order: 5; font-family: "Baskervillelightitalic" !important;
    }
    .sqs-add-to-cart-button-wrapper {
      order: 6;
  }
   .pdp-product-add-ons{
      order: 7;
     padding-top: 60px !important;
    }
      .sqs-add-to-cart-button-inner {
  font-family: 'Raleway';
      font-size: 13px;
}
}  

What should order look like? I can test code easier

So the above is the correct order, but whatever change Squarespace just made to PDP is overriding this code. It should be:

description

variants

quantity

price

add to cart button

add-ons

Hope this makes sense! Thank you again so much!

On 6/4/2024 at 10:12 PM, marbleandmilkweed said:

So the above is the correct order, but whatever change Squarespace just made to PDP is overriding this code. It should be:

description

variants

quantity

price

add to cart button

add-ons

 

Hope this makes sense! Thank you again so much!

Title will above Description? and how about afterpay? under Price or?

Can you share link to a product with variant? I can't find it here

https://www.marbleandmilkweed.com/shop/p/rosebergamotmoodmist

Oh yes, forgot that! Title should be the first element, at the top. Afterpay can be under price and variants just above quantity. https://www.marbleandmilkweed.com/shop/p/rose-geranium-sur-fleurs-hydrosol-mist

Thank you again so much!

First, use this code to Custom CSS box

/* description */
#page .ProductItem-details-checkout .ProductItem-details-excerpt {
    order: 1 !important;
}
/* variants */
#page .ProductItem-details-checkout .product-variants {
    order: 2 !important;
}
/* quantity */
.tweak-product-basic-item-add-to-cart-standalone .ProductItem .ProductItem-quantity-add-to-cart {
    order: 3 !important;
}

Next, use this code to Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('#page .ProductItem-details-checkout .ProductItem-product-price').insertAfter('div.product-quantity-input');
});
</script>

Whew, this works perfectly, such a relief, thank you! And if I wanted to add just a bit more space between the elements, what would I change? Especially between the price and the Afterpay and the add-to-cart button? Many, many thanks!

On 6/9/2024 at 12:33 AM, marbleandmilkweed said:

Whew, this works perfectly, such a relief, thank you! And if I wanted to add just a bit more space between the elements, what would I change? Especially between the price and the Afterpay and the add-to-cart button? Many, many thanks!

You can use this to Custom CSS box.

/* price - afterpay */
.product-price {
    margin-bottom: 50px !important;
}
/* afterpay - add to cart */
div.sqs-add-to-cart-button-wrapper {
    margin-top: 70px !important;
}

This works perfectly, thank you again so much!