• Resolved segmant

    (@segmant)


    Im trying to change the default wordpress checkboxes within WooCommerce to Font Awesome 5 icons.

    Im using the code below which works for Gravity forms and all other occurrences within WordPress except anything within Woocommerce pages and plugins, for example the ‘Accept Terms & Conditions’ checkbox on the checkout page.

    /*** custom checkboxes ***/
    
    input[type=checkbox] { display:none !important; } /* to hide the checkbox itself */
    input[type=checkbox] + label:before {
      font-family: 'Font Awesome 5 Free' !important;
      display: inline-block;
    }
    
    input[type=checkbox] + label:before { content: "\f00d"; font-weight: 900; color: #f45c42; } /* unchecked icon */
    input[type=checkbox] + label:before { letter-spacing: 10px; } /* space between checkbox and label */
    
    input[type=checkbox]:checked + label:before { content: "\f00c";     font-weight: 900; color: #bef441; } /* checked icon */
    input[type=checkbox]:checked + label:before { letter-spacing: 10px; } /* allow space for check mark */
    ### WordPress Environment ###
    
    Home URL: https://staging.indycoffee.guide
    Site URL: https://staging.indycoffee.guide
    WC Version: 3.4.5
    Log Directory Writable: ?
    WP Version: 4.9.8
    WP Multisite: –
    WP Memory Limit: 256 MB
    WP Debug Mode: –
    WP Cron: ?
    Language: en_GB
    External object cache: –
    
    ### Server Environment ###
    
    Server Info: Apache
    PHP Version: 7.2.10
    PHP Post Max Size: 32 MB
    PHP Time Limit: -1
    PHP Max Input Vars: 1000
    cURL Version: 7.29.0
    NSS/3.34
    
    ### Active Plugins (26) ###
    
    Shield Security: by One Dollar Plugin – 6.9.4
    Gravity Forms: by rocketgenius – 2.2.2
    WooCommerce added to basket popup (Ajax): by XootiX – 1.3 – Not tested with the active version of WooCommerce
    Code Snippets: by Shea Bunge – 2.12.0
    Fusion Builder: by ThemeFusion – 1.7
    Fusion Core: by ThemeFusion – 3.7
    Fusion White Label Branding: by ThemeFusion – 1.1
    Gravity Forms Zapier Add-on: by rocketgenius – 1.8.3
    iThemes Security Pro: by iThemes – 4.6.1
    Logos Showcase: by Carlos Moreira – 1.9.2.1
    Max Mega Menu - Pro Addon: by Tom Hemsley – 1.7
    Max Mega Menu: by megamenu.com – 2.5.2
    Quick Featured Images: by Martin Stehle – 13.3.2
    Slider Revolution: by ThemePunch – 5.4.8
    WooCommerce Dynamic Pricing & Discounts: by RightPress – 2.2.5 – Not tested with the active version of WooCommerce
    WooCommerce Advanced Product Labels: by Jeroen Sormani – 1.1.4 – 1.1.5 is available – Not tested with the active version of WooCommerce
    WooCommerce Conditional Shipping and Payments: by SomewhereWarm – 1.3.1 – 1.4.1 is available – Not tested with the active version of WooCommerce
    WooCommerce Print Invoice & Delivery Note: by Tyche Softwares – 4.4.3 – Not tested with the active version of WooCommerce
    WooCommerce Min/Max Quantities: by WooCommerce – 2.4.1 – 2.4.5 is available – Not tested with the active version of WooCommerce
    WooCommerce Pre-Orders: by WooCommerce – 1.5.8 – 1.5.10 is available – Not tested with the active version of WooCommerce
    WooCommerce Product Table: by Barn2 Media – 2.2.2
    WooCommerce Zapier Integration: by OM4 – 1.7.4
    WooCommerce: by Automattic – 3.4.5
    WP All Export Pro: by Soflyy – 1.4.7
    WP All Import Pro: by Soflyy – 4.4.3
    WP Google Map Pro: by flippercode – 5.0.3
    
    ### Settings ###
    
    API Enabled: –
    Force SSL: –
    Currency: GBP (£)
    Currency Position: left
    Thousand Separator: ,
    Decimal Separator: .
    Number of Decimals: 2
    Taxonomies: Product Types: external (external)
    grouped (grouped)
    simple (simple)
    variable (variable)
    
    ### WC Pages ###
    
    Shop base: #1179 - /shop/
    Basket: #1180 - /basket/
    Checkout: #3394 - /checkout/
    My account: #1182 - /my-account/
    Terms and conditions: #3495 - /returns-refund-policy/
    
    ### Theme ###
    
    Name: Avada Child
    Version: 1.0.0
    Author URL: https://theme-fusion.com
    Child Theme: ?
    Parent Theme Name: Avada
    Parent Theme Version: 5.7
    Parent Theme Author URL: https://themeforest.net/user/ThemeFusion
    WooCommerce Support: ?
    
    ### Templates ###
    
    Overrides: Avada/woocommerce/cart/cart.php
    Avada/woocommerce/checkout/form-pay.php
    Avada/woocommerce/checkout/review-order.php
    Avada/woocommerce/checkout/thankyou.php
    Avada/woocommerce/loop/loop-start.php
    Avada/woocommerce/single-product/add-to-cart/variable.php
    Avada/woocommerce/single-product/short-description.php
    Avada/woocommerce/single-product/tabs/additional-information.php
    Avada/woocommerce/single-product/tabs/description.php
    
    

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter segmant

    (@segmant)

    Really? no one has no idea why you cant style default check boxes within Woocommerce?

    Plugin Support Hannah S.L.

    (@fernashes)

    Automattic Happiness Engineer

    Hey there,

    As no one has been able to jump in and help, you’ll need to work with a developer to take this further. In that case, I highly recommend contacting one of the services on our customizations page: https://woocommerce.com/customizations/

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Font Awesome checkboxes’ is closed to new replies.