OceanWP + Woocommerce: checkout issue with checkboxes

  • Resolved zorba33

    (@zorba33)


    5 years ago

    Hello everybody,

    I have an issue on my Woocommerce checkout page (https://www.thefrenchdandy.com/checkout/) with check boxes and radio buttons while running on OceanWP theme. Though the buttons are still working, they are not displaying correctly when ticked.

    – For the “subscribe to our newsletter” and “I have read and agree to the website terms and conditions” check boxes I do not get a tick when the box is checked but either a strange rectangle or some letters (FOOC). Strangely, third checkbox on this page “deliver to another adress” just work fines.
    – For the radio button to select between Stripe and Paypal, the payment method which is unchecked displays either a strange rectangle or some letters (FOOC) instead of an empty circle. The circle for the selected payment solution works fine.

    I have tried disabling plugins (notably optimizations and plugins related to my theme OceanWP) but it did not solve my issue. I guess the problem comes either from Woocommerce or OceanWP theme but I can’t figure it out when looking at my code.

    Many thanks in advance if you can give me any input on how to solve my issue!

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Thread Starter zorba33

    (@zorba33)

    Apparently the problem is related to OceanWP latest update.

    If this can help anybody, I have found a temporary fix to the issue by downgrading from OceanWP Version: 1.7.2 to Version: 1.7.1.

    jrothra

    (@jrothra)

    I just upgraded to 1.7.3, but ran into other issues (for example, a clone of the site acts different despite it being an exact replica).

    To bypass it, here’s what I added to Customize > Custom CSS

    /* PENDING: OceanWP adding Font Awesome 5 support, change font weight and family of checked checkbox so the icon displays */
input[type=checkbox]:checked:before {
	font-weight: 900;
	font-family: 'Font Awesome 5 Free';
}

/* PENDING: OceanWP adding Font Awesome 5 support, change font family of radio buttons for payment choice on store checkout page */
.woocommerce-checkout #payment ul.payment_methods .wc_payment_method > label:before {
	content: '\f111';
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
	color: #b3b3b3; /*I changed the color for my own tastes */
}

    Try that and see if it works.

    Astrix

    (@astrix)

    @jrothra Same issue on my website, all checkboxes display as squares, even with version 1.7.3 ! I tried clearing all my chrome cache, but did not work !

    Your fix works; thank you, but this glitch is weird !

    I tried with edge browser on desktop, opera and chrome on iphone : check boxes appear fine without the need of your css fix

    But on Chrome for desktop, and chrome for android : your fix is needed to make check boxes appear

    What’s going on ?

    • This reply was modified 5 years ago by Astrix.
    • This reply was modified 5 years ago by Astrix.
    momo-fr

    (@momo-fr)

    Thank you @jrothra, work fine now!!! :-))

    Thread Starter zorba33

    (@zorba33)

    Many thanks @jrothra your fix indeed works!

    I still have the issue with the display of “icon-bubble” on my blog page. I have tried adapting your css to fix it but could not make it work yet. I’ll post out the fix if I find it!

    Amit Singh

    (@apprimit)

    Hello,

    Have you updated the theme to the latest version 1.7.3? This issue has been fixed with the latest version. Try to clear the cache after updating the theme or check it on a different browser to see the fixes.

    Thread Starter zorba33

    (@zorba33)

    Hi Amit,

    Many thanks for your answer.

    Updating to version 1.7.3 and clearing the cache only solves the radio button issue on the checkout page.
    I still have an issue with the checkboxes not displaying correctly (which is however corrected by adding @jrothra’s CSS) and the bubble icon not displaying on the blog (for which I have not found any fix right now).

    Amit Singh

    (@apprimit)

    @zorba33 bubble icon is a different issue. it is a conflict with ‘icomoon’ icons you are using on your site. Try to use the below code and check it fixes the issue or not – 

    .icon-user, .icon-people, .icon-user-female, .icon-user-follow, .icon-user-following, .icon-user-unfollow, .icon-login, .icon-logout, .icon-emotsmile, .icon-phone, .icon-call-end, .icon-call-in, .icon-call-out, .icon-map, .icon-location-pin, .icon-direction, .icon-directions, .icon-compass, .icon-layers, .icon-menu, .icon-list, .icon-options-vertical, .icon-options, .icon-arrow-down, .icon-arrow-left, .icon-arrow-right, .icon-arrow-up, .icon-arrow-up-circle, .icon-arrow-left-circle, .icon-arrow-right-circle, .icon-arrow-down-circle, .icon-check, .icon-clock, .icon-plus, .icon-minus, .icon-close, .icon-exclamation, .icon-organization, .icon-trophy, .icon-screen-smartphone, .icon-screen-desktop, .icon-plane, .icon-notebook, .icon-mustache, .icon-mouse, .icon-magnet, .icon-energy, .icon-disc, .icon-cursor, .icon-cursor-move, .icon-crop, .icon-chemistry, .icon-speedometer, .icon-shield, .icon-screen-tablet, .icon-magic-wand, .icon-hourglass, .icon-graduation, .icon-ghost, .icon-game-controller, .icon-fire, .icon-eyeglass, .icon-envelope-open, .icon-envelope-letter, .icon-bell, .icon-badge, .icon-anchor, .icon-wallet, .icon-vector, .icon-speech, .icon-puzzle, .icon-printer, .icon-present, .icon-playlist, .icon-pin, .icon-picture, .icon-handbag, .icon-globe-alt, .icon-globe, .icon-folder-alt, .icon-folder, .icon-film, .icon-feed, .icon-drop, .icon-drawer, .icon-docs, .icon-doc, .icon-diamond, .icon-cup, .icon-calculator, .icon-bubbles, .icon-briefcase, .icon-book-open, .icon-basket-loaded, .icon-basket, .icon-bag, .icon-action-undo, .icon-action-redo, .icon-wrench, .icon-umbrella, .icon-trash, .icon-tag, .icon-support, .icon-frame, .icon-size-fullscreen, .icon-size-actual, .icon-shuffle, .icon-share-alt, .icon-share, .icon-rocket, .icon-question, .icon-pie-chart, .icon-pencil, .icon-note, .icon-loop, .icon-home, .icon-grid, .icon-graph, .icon-microphone, .icon-music-tone-alt, .icon-music-tone, .icon-earphones-alt, .icon-earphones, .icon-equalizer, .icon-like, .icon-dislike, .icon-control-start, .icon-control-rewind, .icon-control-play, .icon-control-pause, .icon-control-forward, .icon-control-end, .icon-volume-1, .icon-volume-2, .icon-volume-off, .icon-calendar, .icon-bulb, .icon-chart, .icon-ban, .icon-bubble, .icon-camrecorder, .icon-camera, .icon-cloud-download, .icon-cloud-upload, .icon-envelope, .icon-eye, .icon-flag, .icon-heart, .icon-info, .icon-key, .icon-link, .icon-lock, .icon-lock-open, .icon-magnifier, .icon-magnifier-add, .icon-magnifier-remove, .icon-paper-clip, .icon-paper-plane, .icon-power, .icon-refresh, .icon-reload, .icon-settings, .icon-star, .icon-symbol-female, .icon-symbol-male, .icon-target, .icon-credit-card, .icon-paypal, .icon-social-tumblr, .icon-social-twitter, .icon-social-facebook, .icon-social-instagram, .icon-social-linkedin, .icon-social-pinterest, .icon-social-github, .icon-social-google, .icon-social-reddit, .icon-social-skype, .icon-social-dribbble, .icon-social-behance, .icon-social-foursqare, .icon-social-soundcloud, .icon-social-spotify, .icon-social-stumbleupon, .icon-social-youtube, .icon-social-dropbox {
    font-family: 'simple-line-icons' !important;
}
    Thread Starter zorba33

    (@zorba33)

    @apprimit many thanks for the fix for the bubble icon, it worked!

    @jrothra

    Thanks, your code still works great!

    Suddenly this issue was back after the update to WP 5.4. on one of my shops.
    OceanWP 182 and Extra 162 ( all the rest updated ).

    Adding your code fixed it immediately.

    Annie

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘OceanWP + Woocommerce: checkout issue with checkboxes’ is closed to new replies.