Move Add To Cart button in a Product Block?

I'm trying to re-order the Add To Cart/Purchase button in a Product block so that it's above the description and below the Price. I've tried snippets of code I found on this site but none of them are working. 

I have this code that reorders the buttons on a Product Page, but I need it for the Product Blocks. How can I modify it to accomplish this task?
Thanks.

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

  /* Set Orders */
   .ProductItem-product-price {
    order: 1;
  }
  .sqs-add-to-cart-button-wrapper {
    order: 2;
  }
  .product-variants {
    order: 3;
  }
  .product-quantity-input {
    order: 4;
  }

  .ProductItem-details-excerpt {
    order: 5;  
  }

Can you share link to page where you added product block? We can help easier

Yes, it's on my Classes page and each item is a Product Block. I'd also like to add a Checkout button next to the Add To Cart button. Similar to the other page you helped me with. I figured I'd get it aligned then deal with adding the Checkout button (if possible)?

My Site: https://shuifeng.squarespace.com/classes
Password: ShuiFeng

Thanks.

Hi tuanphan,

I was able to get the Add To Cart button positioned below the price with the code below but I still need to add a Checkout Now button next to it (to the right). Could you help me with that please? Thanks in advance

.product-block .productDetails{
  display: flex !important;
  flex-wrap: wrap;
  flex-direction: column !important;
  .product-title{
    order: 1 !important;
  }
  .product-price{
    order: 2 !important;
  }
  .sqs-add-to-cart-button-wrapper{
    order: 3 !important;
  }
  .product-quantity-input{
    order: 4 !important;
  }
  .product-variants{
    order: 5 !important;
  }
  .product-excerpt{
    order: 6 !important;
  }
}

5 hours ago, ShuiFeng said:

Hi tuanphan,

I was able to get the Add To Cart button positioned below the price with the code below but I still need to add a Checkout Now button next to it (to the right). Could you help me with that please? Thanks in advance

.product-block .productDetails{
  display: flex !important;
  flex-wrap: wrap;
  flex-direction: column !important;
  .product-title{
    order: 1 !important;
  }
  .product-price{
    order: 2 !important;
  }
  .sqs-add-to-cart-button-wrapper{
    order: 3 !important;
  }
  .product-quantity-input{
    order: 4 !important;
  }
  .product-variants{
    order: 5 !important;
  }
  .product-excerpt{
    order: 6 !important;
  }
}

 

 

 

Click checkout >> it will redirect to product page or..?

There isn't a Checkout button yet, I've included a screenshot. The right side is how it looks now and the left side is how I want to create and align a Checkout Button (if possible).   

9 hours ago, ShuiFeng said:

There isn't a Checkout button yet, I've included a screenshot. The right side is how it looks now and the left side is how I want to create and align a Checkout Button (if possible).   

If you can add a text link in excerpt, then we can move it there

If not possible, let me know. We will need to use script code to add button