Add To Cart (ATC) Button Redirect To Checkout

[clearfur]

Hello, 

Thank you in advance for your consideration and/or assistance!

Site/Page is here.

Trying to make our single product site redirect to checkout when clicking the Add To Cart button. You can see this behavior works fine in the sticky ATC bar, but I would like the same functionality for the base ATC button. 

Can you please help? 

Here is some code under snippets > buy-buttons.liquid, but not sure this it: 

      <button
        type="submit"
        name="add"
        class="product-form__submit button{% if show_dynamic_checkout %} button--secondary{% endif %} button--full-width"
        {%- if product.selected_or_first_available_variant.available == false %} disabled="disabled"{% endif -%}
        {%- if product.template_suffix == 'pre-order' %} data-pre-order="true"{% endif -%}
      >
        {%- liquid
          if product.selected_or_first_available_variant.available
            if product.template_suffix != 'pre-order'
              echo 'products.product.add_to_cart' | t
            else
              echo 'products.product.pre_order' | t
            endif
          else
            echo 'products.product.sold_out' | t
          endif
        -%}
      </button>

[Roy-ロイ]

Hello @clearfur !

Thank you for reaching out and providing the necessary details. I'd be happy to help you achieve the desired functionality.

To clarify, you want the base 'Add To Cart' button to redirect to the checkout page, similar to the sticky ATC bar. Before we proceed, I just need to know: do you want this behavior to apply to all products, specific products, or specific product templates?

Please let me know, and I'll do my best to assist you with the necessary code adjustments.

[clearfur]

Hi @Roy-ロイ! Thank you so much for your generous offer! I very much appreciate your consideration. At this point, we are a one product shop, so whatever method is easiest would probably be best. All product, my one product or my template is all fine, whatever works easiest and is a clean/direct path to checkout. 🙂

@EBOOST was kind enough to offer a solution, however, it seems to be a less clean approach. I say this knowing I should not look a gift horse in the mouth...thank you EBOOST! I'm not complaining. 😉 

[PaulNewton]

Hi @clearfur 👋 If using a free theme you can try contacting shopify support directly and seeing if this is something covered by the courtesy design time.

Meanwhile, If this is not a theme settting option the simplest route is to enable dynamic checkout buttons

..to be used in place of the default add-to-cart button which is either disabled or hidden with CSS.

For product forms, there is a return_to parameter that can be used on form tags but that may not be applicable if javascript is involved.

https://shopify.dev/docs/api/liquid/tags/form#form-return_to 

If the theme is using ajax to add items to the cart then that means either that javascript, or new javascript needs to be used to do the redirect after the cart updates.

If you need this customization then contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

[EBOOST]

Hi @clearfur,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

2. Sections/main-cart-items.liquid

3. Add code below (refer screenshot below). This code apply when you click add to cart button after that it will redirect to cart page then will auto redirect to checkout page

<script>
  setTimeout(function(){
     document.getElementById("checkout").click(); 
  },100)
  
</script>

/* If you want to redirect to checkout page. We need update Cart type to drawer after that add some Javascript code as well */

[clearfur]

Thank you so mhch @EBOOST, much appreciated. I will keep this solution in mind, though I would prefer a direct redirect (PUN?) to the checkout page. You are clearly a problem solver and I very much appreciate your generous time and solution. 🙂