• Resolved cheonmu

    (@cheonmu)


    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)

    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 3 months, 3 weeks ago by Stef.
    Thread Starter cheonmu

    (@cheonmu)

    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 3 months, 3 weeks ago by cheonmu.
    Stef

    (@serafinnyc)

    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)

    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)

    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)

    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)

    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>

    Plugin Support ckadenge (woo-hc)

    (@ckadenge)

    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)
  • You must be logged in to reply to this topic.