How to further edit product pages?

Hi everyone!

It's about our product page of POD (Print on Demand) items, it looks horrible on Simple setting. 
There little to no editing possible... so how did you guys figure this issue out?

Do I have to pay XYZ$ for someone to custom code/edit all pages?!

Page in Orange is ours and it's just disgusting how long it is and how cut off it feels.
The other screenshot is from sf.digital that I got from ordering an plugin.
I want it just like that simple and compact. How the flip do I do that?

Edit: If someone can recommend a coder who does this, please DM me!

Cheers 

So what should it look like? And can you share link to a current product on your site. If it is not complex, we can give some some CSS to achieve your desired layout.

8 hours ago, tuanphan said:

So what should it look like? And can you share link to a current product on your site. If it is not complex, we can give some some CSS to achieve your desired layout.

Hi, It should look like the example I posted. I wonder if some images from different products that  are 1:1 square would work? 

Currently the problem is the dropdown ''buttons'' are way too big, making the listing long. Having it similar like on the picture, that would be perfect!

Also a possible solution that I also saw others have, the product image is either fixed stationary or it's pinned and it follows as you scroll down with the text.

I hope this makes sense!
boandna.com

If you want to reduce button height, you can use this to Website Tools > Custom CSS

div.variant-select-wrapper {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

You can consider reduce space between titles/price, move title up...I can give CSS code

5 hours ago, tuanphan said:

If you want to reduce button height, you can use this to Website Tools > Custom CSS

div.variant-select-wrapper {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

You can consider reduce space between titles/price, move title up...I can give CSS code

Thanks, I still have this issue with the other options hanging down... It would be appreciated if the image could be fixed and maybe made bigger like horizontal just like shown on the image. 

In general I want it as close to the image posted on top as possible
If it's too complex I would gladly pay any price.

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(){
    $('.ProductItem-quantity-add-to-cart').appendTo('.ProductItem-details .product-variants');
});
</script>
<style>
  @media screen and (min-width:768px) {
  .ProductItem-details .product-variants {
    position: relative;
    width: 100% !important;
}
.ProductItem-quantity-add-to-cart {
    position: absolute;
    right: 0;
    top: 0;
    width: 49%;
}
.variant-option {
    max-width: 49%;
    display: block !important;
}
.ProductItem-details .sqs-add-to-cart-button-wrapper {
    width: 100% !important;
}
  }
</style>