Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 13, 2020 at 5:34 pm #1203317
    hermankittle

    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, 6 months ago by hermankittle.
    April 15, 2020 at 3:38 pm #1204015
    Ismael

    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

    April 15, 2020 at 5:55 pm #1204084
    hermankittle

    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.

    April 17, 2020 at 8:11 am #1204622
    Ismael

    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

    April 17, 2020 at 4:05 pm #1204741
    hermankittle

    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!

    April 20, 2020 at 7:06 am #1205400
    Ismael

    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

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