Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1203317

    Hello,

    On my woocommerce checkout page I have been having issues with the checkbox on the “terms of service” and “ship to a different address?”

    Instead of a checkbox it just looked like “|” (a vertical bar)

    I inserted the code:

    input[type=checkbox],
    input[type=radio] {
    -webkit-appearance: button !important;
    }

    This fixes the issue on some browsers but it does not seem to fix it on Firefox… and still looks weird on others.

    I was wondering if there was a way to fix this.

    Thank you for your time and consideration

    • This topic was modified 4 years, 7 months ago by hermankittle.
    #1204015

    Hey hermankittle,

    Thank you for the inquiry.

    Please try to add this css code in the Quick CSS field.

    #top input[type="checkbox"] {
    	display: inline-block;
    }

    Don’t forget to toggle the Performance > File Compression settings and purge the cache after adding the css.

    Best regards,
    Ismael

    #1204084

    Hey Ismael!

    That seemed to work for the shipping address but did not help my terms of service checkbox unfortunately. I toggled the file compression settings.

    #1204622

    Hi,

    Thank you for the update.

    The checkbox in the terms section looks fine on our end. Please toggle the Performance > File Compression settings or disable it temporarily. You should also remove this css code because it prevents the actual check symbol in the checkbox from displaying.

    input[type="checkbox"], input[type="radio"] {
    	/* -webkit-appearance: button !important; */
    }
    

    Best regards,
    Ismael

    #1204741

    Hello,

    Thanks for the help. All of these changes have been made with toggling the Performance > File Compression settings.

    Like I said in my initial email, I had to insert the code you are asking me to remove, otherwise the “terms of service” checkbox looks like a “|” (a vertical bar). Linked below (in the private content) are what it looks like when I remove the code you requested me to remove while inserting the new code you asked me to add.

    I cannot remove the code you requested because my customers will not know how to checkout without it, as they need to check the terms of service before they can complete their purchase.

    Any insight would be appreciated. Thanks again!

    #1205400

    Hi,

    Thank you for the update.

    It does make the checkbox display but you can’t tick it, or the check sign doesn’t display inside the box when you click it. Please replace it with the following css code instead.

    input[type="checkbox"] {
    	-webkit-appearance: checkbox !important;
    }
    
    input[type="radio"] {
    	-webkit-appearance: radio !important;
    }

    // https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

    Best regards,
    Ismael

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.