Homepage / Snippet / Design / Customize Checkbox Designs For WooCommerce Forms

Customize Checkbox Designs For WooCommerce Forms

Last modified Jun 11, 2024
Difficulty Intermediate
Language CSS
Category ,
In today’s fiercely competitive eCommerce environment, establishing a distinct brand identity is crucial. By personalizing elements of your WooCommerce forms, such as checkboxes, you can significantly enhance the visual appeal and user experience of your website.

This guide is crafted to be as straightforward as possible, enabling you to personalize your checkboxes effortlessly. Simply upload a custom icon and employ CSS to tailor these elements within your forms, fine-tuning aspects like background color and checkbox dimensions to achieve a harmonious look.

Choosing the Ideal Checkbox Style

The initial step involves selecting a checkbox design that aligns with your brand’s style. Explore various demos to identify the style that resonates with your brand, and remember, every design aspect is adjustable to suit your preferences. Detailed instructions on customization will follow later in this guide.

Incorporating CSS into Your Site

For guidance on adding CSS to your Divi theme, refer to our comprehensive tutorial about 7 Different Methods to Easily Add Custom CSS to Your Divi Website. We suggest utilizing one of the following methods:

  1. Theme customizer settings
  2. Child Theme stylesheet
  3. Custom CSS and JavaScript Developer Edition plugin

Applying Custom Styles

It’s time to implement the custom styles on your WooCommerce forms. This involves integrating CSS code into your website.

 

1. Essential CSS for all demos

The following CSS code snippet is crucial and serves as the foundation for all the demo styles presented:

/* Flex layout for checkbox labels in WooCommerce forms, ensuring alignment and spacing */
.woocommerce form label.woocommerce-form__label-for-checkbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    padding-left: calc(var(--wpz-checkbox-size) + var(--wpz-border-width) + 10px) !important; /* Space for custom checkbox */
    min-height: var(--wpz-checkbox-size); /* Minimum height for touch targets */
    min-width: var(--wpz-checkbox-size); /* Minimum width for touch targets */
}

/* Ensures the default checkbox is visually hidden but remains accessible */
.woocommerce form label.woocommerce-form__label-for-checkbox input[type=checkbox] {
    padding: 0;
    margin: 0;
    height: 0;
    width: 0;
    display: none;
    position: absolute;
    -webkit-appearance: none; /* Removes default styling */
}

/* Styles for custom checkbox appearance, using pseudo-elements for custom graphics */
.woocommerce form label.woocommerce-form__label-for-checkbox span:after,
.woocommerce form label.woocommerce-form__label-for-checkbox span:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%); /* Center vertically */
    display: block;
    background-color: var(--wpz-bg-color);
    box-sizing: content-box;
    border: var(--wpz-border-width) solid var(--wpz-border-color);
    height: var(--wpz-checkbox-size);
    width: var(--wpz-checkbox-size);
    border-radius: var(--wpz-border-radius);
}

/* Custom checkmark appearance for checked state, using SVG for graphics */
.woocommerce form label.woocommerce-form__label-for-checkbox input:checked + span:after {
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: var(--wpz-check-size);
    -webkit-mask-image: var(--wpz-mark-url);
    mask-image: var(--wpz-mark-url);
    background-color: var(--wpz-check-color); /* Custom checkmark color */
}

/* Adjusts border color for checked state to match custom checkmark */
.woocommerce form label.woocommerce-form__label-for-checkbox input:checked + span:before {
    background-color: var(--wpz-checked-bg-color);
    border: var(--wpz-border-width) solid var(--wpz-checked-border-color); /* Checked state border color */
}

 

2. Integrating Variable Definitions

Next, select one of the demo examples and incorporate the variable definitions accordingly. By integrating this CSS into your website, you establish a baseline from which you can further tailor the appearance of your checkboxes to align with your brand’s aesthetic. The snippet includes properties for check icon url, position, size, and the checkbox’s background color, setting the stage for more detailed customization.

 

/* Style 1 */

.woocommerce-form__label-for-checkbox  {
    --wpz-bg-color: transparent;
    --wpz-checked-bg-color: transparent;
    
    /* Sizing */
    --wpz-checkbox-size: 18px;
    --wpz-check-size: 12px;
    
    /* Check Mark */
    --wpz-check-color: #C568ED;
    --wpz-mark-url: url("/wp-content/check1.svg");
    
    /* Border */
    --wpz-border-width: 2px;
    --wpz-border-radius: 50%;
    --wpz-border-color: #DFDFDF;
    --wpz-checked-border-color: #C568ED;
    
}

/* Style 2 */

.woocommerce-form__label-for-checkbox  {
    --wpz-bg-color: #E4E8EE;
    --wpz-checked-bg-color: #E65270;
    
    /* Sizing */
    --wpz-checkbox-size: 22px;
    --wpz-check-size: 12px;
    
    /* Check Mark */
    --wpz-check-color: #fff;
    --wpz-mark-url: url("/wp-content/check1.svg");
    
    /* Border */
    --wpz-border-width: 0px;
    --wpz-border-radius: 4px;
    --wpz-border-color: transparent;
    --wpz-checked-border-color: transparent;
    
}

/* Style 3 */

.woocommerce-form__label-for-checkbox {
    --wpz-bg-color: #E4E8EE;
    --wpz-checked-bg-color: #52BEE6;
    
    /* Sizing */
    --wpz-checkbox-size: 22px;
    --wpz-check-size: 12px;
    
    /* Check Mark */
    --wpz-check-color: #fff;
    --wpz-mark-url: url("/wp-content/check1.svg");
    
    /* Border */
    --wpz-border-width: 0px;
    --wpz-border-radius: 50%;
    --wpz-border-color: transparent;
    --wpz-checked-border-color: transparent;
    
}

/* Style 4 */

.woocommerce-form__label-for-checkbox {
    --wpz-bg-color: #E4E8EE;
    --wpz-checked-bg-color: transparent;
    
    /* Sizing */
    --wpz-checkbox-size: 20px;
    --wpz-check-size: 30px;
    
    /* Check Mark */
    --wpz-check-color: #247EF2;
    --wpz-mark-url: url("/wp-content/check2.svg");
    
    /* Border */
    --wpz-border-width: 2px;
    --wpz-border-radius: 4px;
    --wpz-border-color: transparent;
    --wpz-checked-border-color: #247EF2;
}
.woocommerce-form__label-for-checkbox input:checked + span:after {
    width: calc(var(--wpz-checkbox-size) + 10px) !important;
    height: calc(var(--wpz-checkbox-size) + 10px) !important;
    top: 10px;
}

/* Style 5 */

.woocommerce-form__label-for-checkbox {
    --wpz-bg-color: #E4E8EE;
    --wpz-checked-bg-color: transparent;
    
    /* Sizing */
    --wpz-checkbox-size: 22px;
    --wpz-check-size: 26px;
    
    /* Check Mark */
    --wpz-check-color: #F9D900;
    --wpz-mark-url: url("/wp-content/check3.svg");
    
    /* Border */
    --wpz-border-width: 2px;
    --wpz-border-radius: 50%;
    --wpz-border-color: transparent;
    --wpz-checked-border-color: #F9D900;
    
}

.woocommerce-form__label-for-checkbox input:checked + span:after {
    width: calc(var(--wpz-checkbox-size) + 10px) !important;
    height: calc(var(--wpz-checkbox-size) + 10px) !important;
    top: 9px;
    left: -1px;
}

.woocommerce-form__label-for-checkbox {
    --wpz-bg-color: transparent;
    --wpz-checked-bg-color: transparent;
    
    /* Sizing */
    --wpz-checkbox-size: 22px;
    --wpz-check-size: 12px;
    
    /* Check Mark */
    --wpz-check-color: #5D6DBF;
    --wpz-mark-url: url("/wp-content/check6.svg");
    
    /* Border */
    --wpz-border-width: 1px;
    --wpz-border-radius: 50%;
    --wpz-border-color: #E4E8EE;
    --wpz-checked-border-color: #5D6DBF;
    
}

/* Style 7 */
.woocommerce-form__label-for-checkbox {
    --wpz-bg-color: transparent;
    --wpz-checked-bg-color: transparent;
    
    /* Sizing */
    --wpz-checkbox-size: 22px;
    --wpz-check-size: 12px;
    
    /* Check Mark */
    --wpz-check-color: #F5AD50;
    --wpz-mark-url: url("/wp-content/check7.svg");
    
    /* Border */
    --wpz-border-width: 1px;
    --wpz-border-radius: 50%;
    --wpz-border-color: #E4E8EE;
    --wpz-checked-border-color: #F5AD50;
    
}

.woocommerce-form__label-for-checkbox {
    --wpz-bg-color: #E4E8EE;
    --wpz-checked-bg-color: #40B47E;
    
    /* Sizing */
    --wpz-checkbox-size: 22px;
    --wpz-check-size: 12px;
    
    /* Check Mark */
    --wpz-check-color: #fff;
    --wpz-mark-url: url("/wp-content/check4.svg");
    
    /* Border */
    --wpz-border-width: 0px;
    --wpz-border-radius: 4px;
    --wpz-border-color: transparent;
    --wpz-checked-border-color: transparent;
    
}

/* Style 9 */

.woocommerce-form__label-for-checkbox {
    --wpz-bg-color: transparent;
    --wpz-checked-bg-color: transparent;
    
    /* Sizing */
    --wpz-checkbox-size: 18px;
    --wpz-check-size: 14px;
    
    /* Check Mark */
    --wpz-check-color: #8323F2;
    --wpz-mark-url: url("/wp-content/check5.svg");
    
    /* Border */
    --wpz-border-width: 2px;
    --wpz-border-radius: 0px;
    --wpz-border-color: #E4E8EE;
    --wpz-checked-border-color: #8323F2;
    
}

 

Uploading Your Selected Check Icon

Once you’ve chosen your desired checkbox style, proceed to download the zip file, extract it, and upload the corresponding check icon to your WordPress media library. If your site does not inherently support SVG file uploads, you may need to install a plugin to enable this feature or use FTP for the upload. The WordPress plugin directory is a great starting point for finding such a plugin: WordPress Plugins for SVG Upload. After uploading the icon(s), you can deactivate the plugin if desired.

Download Icons

Personalizing Checkbox Styles

The first modification should be updating the URL of your icon mark. This method ensures that your website uses a reliable, self-hosted icon, enhancing load times and site performance. After uploading the icon to your media library, copy its URL and replace the –wpz-mark-url variable with it.

All our checkbox design snippets leverage CSS variables for straightforward customization, allowing you to easily modify the background color (–wpz-bg-color), checkbox size (–wpz-checkbox-size), and checkmark color (–wpz-check-color). These variables enable swift adjustments to align the checkboxes with your brand’s visual theme and preferences.

CSS variables are invaluable for ensuring consistent styling across your website. By establishing a set of variables, you can reuse these values in your CSS, guaranteeing uniformity and simplifying site-wide modifications. Employing prefixes, such as adding wpz- before variable names, helps prevent conflicts with other CSS codes.

Addressing Common Issues

Even with meticulous setup, you may face challenges with your custom checkboxes, such as the check icon not appearing correctly, styles not applying as anticipated, or conflicts with other site CSS. To resolve these issues, confirm the SVG file path in your CSS matches your media library’s uploaded icon location, ensure your CSS selectors are specific enough to override WooCommerce’s default styles, and double-check for any typos or mistakes in your CSS.

Should you encounter persistent issues, consider consulting the WordPress community or seeking professional development assistance. You can also leave a comment below this article with a link to your site for further guidance.

Leave A Comment!

We’d Love to Hear from You! If you found this guide helpful, please take a moment to leave us a comment below. Your feedback is what inspires and motivates us to continue providing valuable content.

Conclusion

Personalizing the checkboxes on your WooCommerce forms not only elevates your store’s aesthetic but also fosters a more unified and branded customer experience. With careful consideration and detailed execution, these minor adjustments can significantly influence your brand’s perception and success in the eCommerce realm.

For more WooCommerce customizations without delving into code, explore our Divi Shop Builder plugin.

Does this snippet (still) work?

Please let us know in the comments if everything worked as expected. We have tested this code with the Version: 8.6.1 of the WooCommerce.
If you think this code saved you time, we will be happy to receive a comment!

___

License: This snippet contains code from the  WooCommerce, modified by WP Zone, February 29, 2024. Licensed under the GNU General Public License, no warranty; click here for details.

Your Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Previous snippet How To Create a Masonry Layout With Divi's Gallery Module

A WordPress Development Company. Formerly Aspen Grove Studios and Divi Space.
Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

Join Our Mailing List

Newsletter (footer)