How to add an arrow to an input field in a Woocommerce block?

There’s usually a down chevron arrow there already. Something in your theme is hiding it I guess. What theme are you using?

• This reply was modified 6 months, 3 weeks ago by Stef.

Hi @serafinnyc

I’m using the Flatsome theme.

But when I test it with Twenty Twenty-Four theme, there is no arrow.

Screenshot -> https://i.imgur.com/wDJy3IS.jpeg

Thank you.

• This reply was modified 6 months, 3 weeks ago by cheonmu.

It would be easier if you send over the link to the site so we can debug in console. I get it if you don’t want to share though.

You have an app, most likely a font overriding that, on my test server I see the arrows on checkout using 2024

Hi,

My website is here (Flatsome)

Stagging website is here (2024)

Could you please check out my website?

thank you!

<font _mstmutation=”1″></font>

Ah you’re using WooCommerce Blocks. That’s why.

Here’s the fix for that. Although I don’t know why it’s happening. It was a bug a year or so ago if I remember correctly.

If you know how to add CSS then add this. If you don’t know where to add this let me know and I will advise you better.

.wc-block-components-state-input,
.wc-block-components-country-input{
    position:relative;
}
.wc-block-components-state-input:after,
.wc-block-components-country-input:after {
    height: 0.5em;
    width: 0.5em;
    content: '';
    position: absolute;
    right: 1em;
    top:25px;
    border-left: 1px solid grey;
    border-bottom: 1px solid grey;
    transform: translateY(-50%) rotate(-45deg);
}

hello. The CSS you provided works beautifully.

I have one more question. On websites using the Flatsome theme, the label of the input field is shifted downward.

So, when you enter text in the input field, duplication occurs.

Screenshot -> https://i.imgur.com/nT2na0O.jpeg

I didn’t apply any CSS to this block… Could this be a problem due to the font I’m using?

thank you

<font _mstmutation=”1″></font>

Hi there @cheonmu,

I didn’t apply any CSS to this block… Could this be a problem due to the font I’m using?

As this seems to be an issue related to a third-party theme, I would highly recommend reaching out to the theme support team for further assistance.

With that said, I’ll go ahead and mark this thread as solved.

All the best!