Capitalize WooCommerce Headings and Buttons

Sep 1, 2018 | Woo | 0 comments

With these CSS code snippets you can change the Woo headings and buttons to be capitalized — if it bugs you like it bugs me that they’re not 😆

There are a couple cases where technically all the words shouldn’t be capitalized (like the shipping address heading) but I personally would rather have all words capitalized than just the first word, if given the option that this provides.

This will work for any WordPress site using WooCommerce, not just Divi. The code goes wherever you add your custom CSS.

{;} css code

The CSS can go in your child stylesheet OR appearance > customize > additional CSS OR Divi theme options > custom CSS box.

/*** WOO HEADINGS ***/
.woocommerce-account h1, /* use .woocommerce h1 if you want all woo h1 affected */
.woocommerce-checkout h2, /* use .woocommerce h2 if you want all woo h2 affected */
.woocommerce .related h2, /* you do not need this line if you change the line above */
.woocommerce h3 {
	text-transform: capitalize;
}
/*** WOO BUTTONS ***/
.woocommerce a.button, 
.woocommerce-page a.button,
.woocommerce button.button,
.woocommerce-page button.button {
	text-transform: capitalize !important;
}

 

Notes:

  • The only item I purposely didn’t capitalize is the title/h1 heading of your product because you may have stylistic reasons to not want them automatically capitalized (and you can do it yourself when you create the product). I did include comments in the code, though, in case you want all Woo headings capitalized automatically.
  • Other common values (more info here):
    • text-transform: uppercase;
    • text-transform: lowercase;
  • If you know how you can combine the headings and buttons code since they are applying the same CSS, I’m only separating them for this tutorial in case someone only wants to use one.
  • I didn’t add h4, h5, or h6 because I didn’t see any instances of those being used, at least not in a basic WooCommerce setup, but if you have WooCommerce plugins or extensions you may want to add all the headings in case they are used.