How can I add a click handler to the checkout button?

Technical Q&A

Topic summary

A developer needs to conditionally disable the checkout button on a Shopify cart page until a radio button is selected. They’ve shared a Loom video explaining the use case and are testing on a development theme.

Proposed Solutions:

  • gr_trading suggested wrapping the checkout button in a parent div with a custom class, though implementation details weren’t fully provided
  • Cedcommerce offered a detailed step-by-step approach:
    • Locate cart.liquid or cart-template.liquid in the theme files
    • Add JavaScript event listeners to monitor radio button changes
    • Disable the checkout button by default using the disabled attribute
    • Enable it only when the desired radio option is selected
    • Provided sample code for both the radio button markup and JavaScript implementation

Current Status:

The original poster requested additional help from gr_trading to implement their solution, specifically asking for assistance via Google Meet. The discussion remains open with the developer seeking hands-on implementation guidance.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

I’ve a need to prevent checkout button from functioning if the click handler returns “false”. Why I want to do this is explained in the loom video linked below.

https://www.loom.com/share/9ea7c56165a449e0a12eef94b90fd91a

I’m working with development theme(shopify theme serve) while testing my JavaScript code, so you can visit the cart page by opening the URL below and adding a product to the cart.

https://mqar3alphvskzzh5-458195004.shopifypreview.com

Regards,

Pramod

2

@pramodraam

create a parent div having class to your checkout button like


{{Checkout button code }}
3

Hello @pramodraam ,

To restrict the checkout button on a Shopify store cart page until a radio button is selected, you’ll need to modify the theme code.

Here are the steps you can follow to achieve the same

Log in to your Shopify admin dashboard.

Go to Online Store > Themes > Actions > Edit Code.

(Note: The specific code and file locations may vary slightly depending on your theme.)

Now, locate the file that controls the cart page in the theme code editor. This file is usually named “cart.liquid” or “cart-template.liquid.” Look for it in the “Sections” or “Templates” folder.

Search the cart template file for the section of code that renders the radio button options.

This code may vary depending on the theme and how the radio buttons are implemented.

Look for an HTML markup that represents the radio button group.

Once you’ve located the radio button group, add an event listener using JavaScript/jQuery. This listener will monitor changes to the radio button selection.

If you’re using jQuery, you can use the change event to detect when the radio button selection changes.

If you prefer plain JavaScript, use the addEventListener method with the change event.

Check whether the desired radio button option is selected inside the event listener. If it is, enable the checkout button; otherwise, disable it.

To disable the checkout button, you can add the disabled attribute to the button element.

To enable the checkout button, you can remove the disabled attribute.

Code for the radio button :

Paste the below code in the form on the cart page

Option 1

Option 2

Source Code:

Save the changes you made to the theme code.

After following these steps, the checkout button on the cart page will be disabled by default. It will only become enabled when the desired radio button option is selected.

Also, If you are not experienced with Shopify code or theme, we advise contacting a Shopify expert to help you fix this.

Hope it works. Feel free to connect with us if you need more help with Shopify.

All the best,

CedCommerce

4

Hi Gr_trading,

I need your help implementing your solution. Could you please help over googlemeet?

Regards,

Pramod