Customizable checkout styles

  • Resolved Bartek

    (@bartj)


    2 years, 10 months ago

    To tell you the truth, I’ve just seen the plugin, messing around with. I greatly appreciate the fact that you’ve made it extensible by allowing to pass own templates for the checkout. Nevertheless, I think sometimes it may be too much to change simple things, especially colors.

    I think it could be a great improvement if you would made use of CSS custom variables – this way theme developer integrating with your plugin would need only to define value for the provided variable, preserving natural CSS cascade and discouraging the excessive use of !important clauses.

    This flexibility could be provided for colors, border radius or even margin and padding.

    Let me know, what do you think about it?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Diego Versiani

    (@diegoversiani)

    Hi @bartj,

    Yes, we’ll change the plugin styles to use CSS variables when we implement more design options for the PRO version.

    However, the CSS variables will be added to the free version so you and other theme developers won’t need to purchase the PRO version to make use of it.

    There will be CSS variables for almost every SASS variable you can see in the sass/abstract/_variables.scss, so that will cover colors, border-radius, margin, padding, border thickness, and a lot more.

    We’ve made sure not to use !important in our code, so most of the time you will not need to use it on your code too.

    To avoid using !important to change the Fluid Checkout styles, for now, you can add body.theme-<theme_slug> at the start of the CSS selector with the styles you want to change.

    For example, if you need to change the color of the check icons for the shipping methods on the Storefront theme, you would use the following code:

    body.theme-storefront .woocommerce ul#shipping_method .shipping-method__option input[type="radio"]:checked + .shipping-method__option-label:before {
	border-color: blue;
	background-color: blue;
}

    I’ll update you here once this feature is available, however, it will take some time until we get to implement it.

    Best,
    Diego

    Thread Starter Bartek

    (@bartj)

    Hi @diegoversiani!

    Thanks for the quick response! It’s great to know, that you are planning this feature. I’m looking forward.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Customizable checkout styles’ is closed to new replies.