How to change "add to cart" button location on product page

[laserbeampq]

My current product page (when looking at the "add to cart" area) looks like this:

  

However, I want it to look like this:

How can I make this happen?

Shopify theme: Ride

URL: wigmadcosplay.com (password: yellow)

[HDL-Shin · Accepted solution]

Hi @laserbeampq, 

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css or theme.css 

Step 3: Insert the below code at the bottom of the file -> Save

.product__info-container .product-form {
   margin: 0 10px !important;
}

.product-form__buttons .product-form__submit {
   margin-bottom: 0 !important;
}

Step 4: Search file theme.liquid and Insert the below code at the bottom of the file -> Save

{% if template.name == 'product' %}
    <script>
        window.onload = () => { 
           let price_per_item = document.querySelector('.price-per-item__container');
           let add_to_cart = document.querySelector('.product-form:has(form[data-type="add-to-cart-form"])');
           price_per_item.insertAdjacentElement('beforeend', add_to_cart);
           price_per_item.style.display = "flex";
        }
    </script>
{% endif %}

Final Result: 

Hope this can help you

Kind regards,

HDL-Shin