The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.
If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

Customizing the Billing Address checkbox style

nickffnickff Member
Hey All,

I'm working on styling the checkout page for a 2.0 store (http://terra-nullius.co/new-homepage) and having a heck of a time changing the style of the "use a different billing address" checkbox. I've been successful with the "save password" checkbox at step 5 (which is exactly what I want to do to this one), but this one seems to be generated via js/ajax, so I can't override the style via JS.

Any tips for how this can be accomplished would be super appreciated!
Tagged:
Comments
  • fc_adamfc_adam FoxyCart Team
    edited May 2015
    @nickff,

    First off that's a great looking site and an awesome implementation of FoxyCart!

    The two checkboxes should be generated in the same way - set within the templates. The issue you're running into is that the active class you're utilising for the "save my password" checkbox isn't added to the "use different billing address" checkbox. The rest of your styling is applying - just not the active state.

    Another approach you could take would be to use the :checked CSS selector to only apply styling when the checkbox is checked. You could also alter the template so that the billing address checkbox does include an active class.
  • nickffnickff Member
    @fc_adam thanks man! appreciate the kind words. we're getting close to launch - hoping for this Friday!

    And thanks for the tips. I'll look to do that now. Much appreciated!
  • brettbrett FoxyCart Team
    @nickff, killer looking customization, as always :)
  • nickffnickff Member
    @brett thanks man! she's live - http://terra-nullius.co
  • fc_adamfc_adam FoxyCart Team
    @nickff,

    Awesome! Congratulations on the launch.
  • nickffnickff Member
    @fc_adam thanks bro!
Sign In or Register to comment.