What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Ella Theme Skip Cart and go straight to checkout

Ella Theme Skip Cart and go straight to checkout

gltl
New Member
5 0 0

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.

Replies 10 (10)

Dan-From-Ryviu
Shopify Partner
10324 2046 2118

Hi @gltl 

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

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

gltl
New Member
5 0 0

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

gltl_0-1730253404106.png

 

Dan-From-Ryviu
Shopify Partner
10324 2046 2118

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

 

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

gltl
New Member
5 0 0
Dan-From-Ryviu
Shopify Partner
10324 2046 2118

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>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

gltl
New Member
5 0 0

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

 

gltl_0-1730256130619.png

 

Dan-From-Ryviu
Shopify Partner
10324 2046 2118

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>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

gltl
New Member
5 0 0

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.

 

gltl_0-1730257223340.png

 

Dan-From-Ryviu
Shopify Partner
10324 2046 2118

Please add the code so I can check

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

tim
Shopify Partner
3911 394 1435

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 

If my post is helpful, consider liking it -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com