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

  • Resolved cheonmu

    (@cheonmu)


    1 year, 11 months ago

    hello. I use the cart and checkout in the woocommerce block.

    However, I would like to put an arrow in the input field where I can select the country and state.

    Screenshot -> https://i.imgur.com/RB5FTvJ.png

    Can you tell me if there is a way to solve this problem?

    Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Stef

    (@serafinnyc)

    1 year, 11 months ago

    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 1 year, 11 months ago by Stef.
    Thread Starter cheonmu

    (@cheonmu)

    1 year, 11 months ago

    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 1 year, 11 months ago by cheonmu.
    Stef

    (@serafinnyc)

    1 year, 11 months ago

    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.

    Stef

    (@serafinnyc)

    1 year, 11 months ago

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

    Thread Starter cheonmu

    (@cheonmu)

    1 year, 11 months ago

    Hi,

    My website is here (Flatsome)

    Stagging website is here (2024)

    Could you please check out my website?

    thank you!

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

    Stef

    (@serafinnyc)

    1 year, 11 months ago

    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);
}
    Thread Starter cheonmu

    (@cheonmu)

    1 year, 11 months ago

    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>

    ckadenge (woo-hc)

    (@ckadenge)

    1 year, 10 months ago

    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!

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘How to add an arrow to an input field in a Woocommerce block?’ is closed to new replies.