Ella Theme Skip Cart and go straight to checkout

[gltl]

Hi There, I have the Ella theme. When I click the "add to cart" button, I would like for it to redirect me right to checkout, and skip the cart page since my store only has one item. Please let me know how I can achieve this.

[Dan-From-Ryviu]

Hi @gltl 

You can check if your theme has that settings in Online Store > Themes > Customize > Theme settings > Cart 

[gltl]

Hi, it does, but it only has the redirect to cart page setting. I want to be able to redirect to checkout.

[Dan-From-Ryviu]

Could you share your product page link so I can check?

[gltl]

https://trueloo.com/products/the-trueloo

Thank you!

[Dan-From-Ryviu]

Please add this code to Custom Liquid block below your Buy buttons on your Online store > Themes > Customize > Products > Default product and hide your default Pre-oder button 

<button type="button" class="product-form__submit button button--primary an-horizontal-shaking button-text-change" onclick="addToCartAndCheckout()">Pre-order</button>
<script>
  async function addToCartAndCheckout() {
    const quantity = document.querySelector('input[name="quantity"]').value || 1;
    const variantId = {{ product.variants.first.id }};

    // Add the item to the cart
    await fetch('/cart/add.js', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id: variantId, quantity: quantity })
    });

    // Redirect to checkout
    window.location.href = '/checkout';
  }
</script>

[gltl]

How can I still display the content below the pre-order button? The expected ship date and purple dot link.

[Dan-From-Ryviu]

So please update code and add it to Custom liquid code above 'Buy buttons' 

<button type="button" class="product-form__submit button button--primary an-horizontal-shaking button-text-change" onclick="addToCartAndCheckout()">Pre-order</button>
<script>
  async function addToCartAndCheckout() {
    const quantity = document.querySelector('input[name="quantity"]').value || 1;
    const variantId = {{ product.variants.first.id }};

    // Add the item to the cart
    await fetch('/cart/add.js', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ id: variantId, quantity: quantity })
    });

    // Redirect to checkout
    window.location.href = '/checkout';
  }
</script>
<style>
.product-form__buttons button { display: none !important; }
<style>

[gltl]

That made everything disappear. I would like to display everything as normal (as is shown now in the link). The only thing I want to change is the redirect to the checkout.

[Dan-From-Ryviu]

Please add the code so I can check

[tim]

I'd rather use cart permalinks here -- do not need to wait for fetch to complete.

Given they offer only one product no need to worry about what's already in cart.

Like i suggested here