How can I add a CSS class to the discount code input field?

Shopify Plus
, ,
1

Hello! Is there a way to add a CSS class to the discount code input field? I’m trying to follow the “Adding Coupon codes to the HTML” instructions found here: https://docs.hyros.com/tracking-coupon-codes/

With the rollout of Checkout Extensibility, I’m not sure how to do that. Shopify support won’t tell me how to access the field, or if it’s even possible, because they say that’s 3rd party work. But if I just knew how to access that text field I could do it myself.

Any help would be appreciated. Thanks!

2

Hi Bentons,

If you want to add a class in discount input field, you can achieve that using JS.

In checkout.liquid page if you paste the below code.

1 Like
3

Thank you for the reply! We’ve moved away from the checkout.liquid file because of new Checkout Extensibility rollout, so now for the life of me, I can’t see how edit the code on those pages. :persevering_face:

4

okay, Then you can placed that code in setting> checkout > additional script. That will also work.

1 Like
5

Wow ok, awesome! And just to be clear on the code, “checkout_reduction_code” would be the name of the text field, so for me, “reductions”. And “hello” would be the class I want to add, so for me, “hyros-coupon”. Correct?

Desktop-screenshot (1).png
Desktop-screenshot (1).png1305×591 262 KB

6

Hi

“checkout_reduction_code” is id => it will replace by what id you have, which is “TextField0”
and correct “hello” is the class you want to add. it can be replace by anything you want.

1 Like
7

Sometimes it loads as TextField0 and sometimes as TextField8. I wonder what else it can load in as? Even when the ID matches, though, I’m not seeing the hyros-coupon class I told it to add. Maybe because it already has a class applied?

8

Can you share your website urls. Then I can able to give you the exact code.

9

Sure, the website is https://www.conquestmaps.com - I appreciate all the help!

10

Hi,

I saw that there is 2 different id appear in discount input so I added both of them and write a script. Hope this will work .
1 Like
11

Thanks for the effort! I was out of the office last week but we’ve added the script and are going to do some tests. We’ll see if it works :crossed_fingers: