Custom styling Divi buttons

by | Jul 30, 2020 | Divi

Ever find yourself unable to find the right settings to tweak colors for button in WordPress, Divi, and Woocommerce. On one project I was certain to stumble upon the right controls. Unfortunately didn’t find it in Dashboard -> Settings or Appearance -> Customize or Divi -> Theme Option.

The things I wanted to customize for were the following:

  • Add To Cart
  • View Cart
  • Place Order
  • Return To Shop
  • Update Cart
  • Apply Coupon
  • Cart Header Icon
  • Menu Hamburger Icon

Dashboard -> Jetpack -> Writing -> Theme Enhancements, toggle ON or Enhance CSS customization panel

This will allow for custom css with the customizer panel.

Check this out:

/* Add to Cart */
button.single_add_to_cart_button.button.alt {
color: white !important;
}
button.single_add_to_cart_button.button.alt:hover {
color: gold !important;
}

/* View Cart */
a.button.button.wc-forward {
color: white !important;
}

/* Place Order */
button#place_order.button.alt {
color: white !important;
}

/* Return To Shop */
a.button.wc-backward {
color: white !important;
padding: 5px 30px !important;
}

/* Update Cart */
button.button {
background: white !important;
color: white !important;
}

/* Apply Coupon */
button.button {
color: white !important;
}

/* Cart Icon */
.et-cart-info span:before {
color: white !important;
font-family: ‘ETmodules’ !important;
}

/* Menu Hamburger Icon */
.mobile_menu_bar:before {
color: white! important;
}