Add WooCommerce Styles to The Customizer in WordPress

August 26, 2017| 1 comment

Adding the WooCommerce styles to the Customizer in WordPress can help you quickly style and scaffold some common components of WooCommerce. This tutorial takes you through how to set that up in a WordPress starter theme using a child theme. This is an intermediate example and not all the code is explained in detail.

First up is to set up a structure of keeping the code in manageable files and not just adding everything into the functions.php file, having said that the initial code has to go into functions.php which in turn will then reference the other 2 files. One file customizer.php will have all the Customizer API code and the other output.php will deal with adding the CSS styles for output.

The initial function prefix_woocustomizer_setup is hooked in to after_setup_theme action and then calls the other 2 files in the child theme directory.

It will only fire if WooCommerce is installed.

<?php //<~ dont add in when pasting into functions.php
add_action( 'after_setup_theme', 'prefix_woocustomizer_setup', 15 );
/**
* WooCommerce in the Customizer, file set up
*/
function prefix_woocustomizer_setup() {
if ( class_exists( 'WooCommerce' ) ) {
// Add in our Customizer options.
require_once( get_stylesheet_directory() . '/customizer.php' );
// Add in our CSS for our customizer options.
require_once( get_stylesheet_directory() . '/output.php' );
}
}
view raw woocustomize.php hosted with ❤ by GitHub

The Customizer Code

There’s a lot of code here, initially the default colors are set – so 11 all up.

Then we are registering the WooCommerce fields with the action hook customize_register

A WooCommerce section is added followed by the settings and controls for all the customizer interface.

<?php
/**
* Set Up Default Colors
*/
function bt_woo_button_color_default() {
return '#ebe9eb';
}
function bt_woo_button_hover_color_default() {
return '#dad8da';
}
function bt_woo_button_alt_color_default() {
return '#a46497';
}
function bt_woo_button_alt_hover_color_default() {
return '#935386';
}
function bt_woo_button_dis_color_default() {
return '#eee';
}
function bt_woo_button_dis_hover_color_default() {
return '#ddd';
}
function bt_woo_price_color_default() {
return '#77a464';
}
function bt_woo_sale_price_color_default() {
return '#77a464';
}
function bt_woo_error_color_default() {
return '#b81c23';
}
function bt_woo_info_color_default() {
return '#1e85be';
}
function bt_woo_message_color_default() {
return '#8fae1b';
}
add_action( 'customize_register', 'bt_register_theme_customizer_woo', 20 );
/**
* Register WooCommerce fields for the Customizer
*/
function bt_register_theme_customizer_woo( $wp_customize ) {
// Add in WooCommerce section
$wp_customize->add_section( 'woocommerce' , array(
'title' => __( 'WooCommerce','themeprefix' ),
'priority' => 500, // appears near bottom in Customizer
) );
// Add buttons background color
// Add setting.
$wp_customize->add_setting( 'bt_woo_button_color', array(
'default' => bt_woo_button_color_default(),
'sanitize_callback' => 'sanitize_hex_color',
) );
// Add control
$wp_customize->add_control( new WP_Customize_Color_Control(
$wp_customize, 'bt_woo_button_color', array(
'label' => __( 'Button Color', 'themeprefix' ), //set the label to appear in the Customizer
'section' => 'woocommerce', //select the section for it to appear under
'settings' => 'bt_woo_button_color' //pick the setting it applies to
)
) );
// Add buttons hover - focus background color
// Add setting.
$wp_customize->add_setting( 'bt_woo_button_hover_color', array(
'default' => bt_woo_button_hover_color_default(),
'sanitize_callback' => 'sanitize_hex_color',
) );
// Add control
$wp_customize->add_control( new WP_Customize_Color_Control(
$wp_customize, 'bt_woo_button_hover_color', array(
'label' => __( 'Button Hover Color', 'themeprefix' ), //set the label to appear in the Customizer
'section' => 'woocommerce', //select the section for it to appear under
'settings' => 'bt_woo_button_hover_color' //pick the setting it applies to
)
) );
// Add buttons background alt color
// Add setting.
$wp_customize->add_setting( 'bt_woo_button_alt_color', array(
'default' => bt_woo_button_alt_color_default(),
'sanitize_callback' => 'sanitize_hex_color',
) );
// Add control
$wp_customize->add_control( new WP_Customize_Color_Control(
$wp_customize, 'bt_woo_button_alt_color', array(
'label' => __( 'Button Alt Color', 'themeprefix' ), //set the label to appear in the Customizer
'section' => 'woocommerce', //select the section for it to appear under
'settings' => 'bt_woo_button_alt_color' //pick the setting it applies to
)
) );
// Add buttons hover - focus background color
// Add setting.
$wp_customize->add_setting( 'bt_woo_button_alt_hover_color', array(
'default' => bt_woo_button_alt_hover_color_default(),
'sanitize_callback' => 'sanitize_hex_color',
) );
// Add control
$wp_customize->add_control( new WP_Customize_Color_Control(
$wp_customize, 'bt_woo_button_alt_hover_color', array(
'label' => __( 'Button Alt Hover Color', 'themeprefix' ), //set the label to appear in the Customizer
'section' => 'woocommerce', //select the section for it to appear under
'settings' => 'bt_woo_button_alt_hover_color' //pick the setting it applies to
)
) );
// Add buttons background disabled color
// Add setting.
$wp_customize->add_setting( 'bt_woo_button_dis_color', array(
'default' => bt_woo_button_dis_color_default(),
'sanitize_callback' => 'sanitize_hex_color',
) );
// Add control
$wp_customize->add_control( new WP_Customize_Color_Control(
$wp_customize, 'bt_woo_button_dis_color', array(
'label' => __( 'Button Disabled Color', 'themeprefix' ), //set the label to appear in the Customizer
'section' => 'woocommerce', //select the section for it to appear under
'settings' => 'bt_woo_button_dis_color' //pick the setting it applies to
)
) );
// Add buttons hover - focus background color
// Add setting.
$wp_customize->add_setting( 'bt_woo_button_dis_hover_color', array(
'default' => bt_woo_button_dis_hover_color_default(),
'sanitize_callback' => 'sanitize_hex_color',
) );
// Add control
$wp_customize->add_control( new WP_Customize_Color_Control(
$wp_customize, 'bt_woo_button_dis_hover_color', array(
'label' => __( 'Button Disabled Hover Color', 'themeprefix' ), //set the label to appear in the Customizer
'section' => 'woocommerce', //select the section for it to appear under
'settings' => 'bt_woo_button_dis_hover_color' //pick the setting it applies to
)
) );
// Add price color
// Add setting.
$wp_customize->add_setting( 'bt_woo_price_color', array(
'default' => bt_woo_price_color_default(),
'sanitize_callback' => 'sanitize_hex_color',
) );
// Add control
$wp_customize->add_control( new WP_Customize_Color_Control(
$wp_customize, 'bt_woo_price_color', array(
'label' => __( 'Price Color', 'themeprefix' ), //set the label to appear in the Customizer
'section' => 'woocommerce', //select the section for it to appear under
'settings' => 'bt_woo_price_color' //pick the setting it applies to
)
) );
// Add sale price color
// Add setting.
$wp_customize->add_setting( 'bt_woo_sale_price_color', array(
'default' => bt_woo_sale_price_color_default(),
'sanitize_callback' => 'sanitize_hex_color',
) );
// Add control
$wp_customize->add_control( new WP_Customize_Color_Control(
$wp_customize, 'bt_woo_sale_price_color', array(
'label' => __( 'SALE Price Color', 'themeprefix' ), //set the label to appear in the Customizer
'section' => 'woocommerce', //select the section for it to appear under
'settings' => 'bt_woo_sale_price_color' //pick the setting it applies to
)
) );
// Add INFO color
// Add setting.
$wp_customize->add_setting( 'bt_woo_info_color', array(
'default' => bt_woo_info_color_default(),
'sanitize_callback' => 'sanitize_hex_color',
) );
// Add control
$wp_customize->add_control( new WP_Customize_Color_Control(
$wp_customize, 'bt_woo_info_color', array(
'label' => __( 'Info Color', 'themeprefix' ), //set the label to appear in the Customizer
'section' => 'woocommerce', //select the section for it to appear under
'settings' => 'bt_woo_info_color' //pick the setting it applies to
)
) );
// Add Error color
// Add setting.
$wp_customize->add_setting( 'bt_woo_error_color', array(
'default' => bt_woo_error_color_default(),
'sanitize_callback' => 'sanitize_hex_color',
) );
// Add control
$wp_customize->add_control( new WP_Customize_Color_Control(
$wp_customize, 'bt_woo_error_color', array(
'label' => __( 'Error Color', 'themeprefix' ), //set the label to appear in the Customizer
'section' => 'woocommerce', //select the section for it to appear under
'settings' => 'bt_woo_error_color' //pick the setting it applies to
)
) );
// Add Message color
// Add setting.
$wp_customize->add_setting( 'bt_woo_message_color', array(
'default' => bt_woo_message_color_default(),
'sanitize_callback' => 'sanitize_hex_color',
) );
// Add control
$wp_customize->add_control( new WP_Customize_Color_Control(
$wp_customize, 'bt_woo_message_color', array(
'label' => __( 'Message Color', 'themeprefix' ), //set the label to appear in the Customizer
'section' => 'woocommerce', //select the section for it to appear under
'settings' => 'bt_woo_message_color' //pick the setting it applies to
)
) );
}
view raw customizer.php hosted with ❤ by GitHub

Now in the Customizer you will have a WooCommerce section and all the fields ready to be customized.

woocommerce-customizer

 

Outputting the CSS

The final piece is outputting the CSS, which is done via wp_enqueue_script

All eleven settings are retrieved via get_theme_mod with their new and default values they are then assigned to a variable.

The foreground color values are calculated with the brightness and contrast functions. (I first seen this in the Genesis themes).

The CSS is then built incrementally and added too using the set variables and checking if they match the default values and then outputting via PHP sprintf function.

At the end of all of that the CSS is output with wp_add_inline_style which outputs immediately after your main style sheet which is referenced by the $handle variable. This example uses ‘twentyseventeen-style’ so make sure to change it to your themes stylesheet id or if you have defined a CHILD_THEME_NAME constant you can also use that.

<?php
/**
* themeprefix Inline CSS
*/
add_action( 'wp_enqueue_scripts', 'bt_css', 1001 );
/**
* Checks the settings for the background colors
* If any of these value are set the appropriate CSS is output
*
*/
function bt_css() {
// Choice here of passing inline CSS straight after the BB Skin CSS or the Child Theme CSS
//$handle = defined( 'CHILD_THEME_NAME' ) && CHILD_THEME_NAME ? sanitize_title_with_dashes( CHILD_THEME_NAME ) : 'child-theme';
$handle = 'twentyseventeen-style';
/* Our Customiser settings, stored as variables */
// WooCommerce - 11 Settings
$bt_woo_button_color = get_theme_mod( 'bt_woo_button_color', bt_woo_button_color_default() );
$bt_woo_button_hover_color = get_theme_mod( 'bt_woo_button_hover_color', bt_woo_button_hover_color_default() );
$bt_woo_button_alt_color = get_theme_mod( 'bt_woo_button_alt_color', bt_woo_button_alt_color_default() );
$bt_woo_button_alt_hover_color = get_theme_mod( 'bt_woo_button_alt_hover_color', bt_woo_button_alt_hover_color_default() );
$bt_woo_button_dis_color = get_theme_mod( 'bt_woo_button_dis_color', bt_woo_button_dis_color_default() );
$bt_woo_button_dis_hover_color = get_theme_mod( 'bt_woo_button_dis_hover_color', bt_woo_button_dis_hover_color_default() );
$bt_woo_price_color = get_theme_mod( 'bt_woo_price_color', bt_woo_price_color_default() );
$bt_woo_sale_price_color = get_theme_mod( 'bt_woo_sale_price_color', bt_woo_sale_price_color_default() );
$bt_woo_error_color = get_theme_mod( 'bt_woo_error_color', bt_woo_error_color_default() );
$bt_woo_info_color = get_theme_mod( 'bt_woo_info_color', bt_woo_info_color_default() );
$bt_woo_message_color = get_theme_mod( 'bt_woo_message_color', bt_woo_message_color_default() );
//* Calculate Color Contrast
function bt_color_contrast( $color ) {
$hexcolor = str_replace( '#', '', $color );
$red = hexdec( substr( $hexcolor, 0, 2 ) );
$green = hexdec( substr( $hexcolor, 2, 2 ) );
$blue = hexdec( substr( $hexcolor, 4, 2 ) );
$luminosity = ( ( $red * 0.2126 ) + ( $green * 0.7152 ) + ( $blue * 0.0722 ) );
return ( $luminosity > 128 ) ? '#333333' : '#ffffff';
}
//* Calculate Color Brightness
function bt_color_brightness( $color, $change ) {
$hexcolor = str_replace( '#', '', $color );
$red = hexdec( substr( $hexcolor, 0, 2 ) );
$green = hexdec( substr( $hexcolor, 2, 2 ) );
$blue = hexdec( substr( $hexcolor, 4, 2 ) );
$red = max( 0, min( 255, $red + $change ) );
$green = max( 0, min( 255, $green + $change ) );
$blue = max( 0, min( 255, $blue + $change ) );
return '#'.dechex( $red ).dechex( $green ).dechex( $blue );
}
/* Start off with a clean slate */
$css = '';
$css .= ( bt_woo_button_color_default() !== $bt_woo_button_color ) ? sprintf( '
.woocommerce a.button,
.woocommerce #respond input#submit,
.woocommerce button.button,
.woocommerce input.button {
background: %1$s;
border: 1px solid %1$s;
color: %2$s;
}
', $bt_woo_button_color, bt_color_contrast( $bt_woo_button_color ) ) : '';
$css .= ( bt_woo_button_hover_color_default() !== $bt_woo_button_hover_color ) ? sprintf( '
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
background: %1$s;
border: 1px solid %1$s;
color: %2$s;
}
', $bt_woo_button_hover_color, bt_color_contrast( $bt_woo_button_hover_color ) ) : '';
$css .= ( bt_woo_button_alt_color_default() !== $bt_woo_button_alt_color ) ? sprintf( '
.woocommerce #respond input#submit.alt.disabled,
.woocommerce #respond input#submit.alt.disabled:hover,
.woocommerce #respond input#submit.alt:disabled,
.woocommerce #respond input#submit.alt:disabled:hover,
.woocommerce #respond input#submit.alt:disabled[disabled],
.woocommerce #respond input#submit.alt:disabled[disabled]:hover,
.woocommerce a.button.alt.disabled,
.woocommerce a.button.alt.disabled:hover,
.woocommerce a.button.alt:disabled,
.woocommerce a.button.alt:disabled:hover,
.woocommerce a.button.alt:disabled[disabled],
.woocommerce a.button.alt:disabled[disabled]:hover,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt.disabled:hover,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt:disabled:hover,
.woocommerce button.button.alt:disabled[disabled],
.woocommerce button.button.alt:disabled[disabled]:hover,
.woocommerce input.button.alt.disabled,
.woocommerce input.button.alt.disabled:hover,
.woocommerce input.button.alt:disabled,
.woocommerce input.button.alt:disabled:hover,
.woocommerce input.button.alt:disabled[disabled],
.woocommerce input.button.alt:disabled[disabled]:hover,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce span.onsale {
background: %1$s;
border: 1px solid %1$s;
color: %2$s;
}
', $bt_woo_button_alt_color, bt_color_contrast( $bt_woo_button_alt_color ) ) : '';
$css .= ( bt_woo_button_alt_hover_color_default() !== $bt_woo_button_alt_hover_color ) ? sprintf( '
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
background: %1$s;
border: 1px solid %1$s;
color: %2$s;
}
', $bt_woo_button_alt_hover_color, bt_color_contrast( $bt_woo_button_alt_hover_color ) ) : '';
$css .= ( bt_woo_button_dis_color_default() !== $bt_woo_button_dis_color ) ? sprintf( '
.woocommerce #respond input#submit.disabled,
.woocommerce #respond input#submit:disabled,
.woocommerce #respond input#submit:disabled[disabled],
.woocommerce a.button.disabled, .woocommerce a.button:disabled,
.woocommerce a.button:disabled[disabled],
.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button.disabled,
.woocommerce input.button:disabled,
.woocommerce input.button:disabled[disabled] {
background: %1$s;
border: 1px solid %1$s;
color: %2$s;
}
', $bt_woo_button_dis_color, bt_color_contrast( $bt_woo_button_dis_color ) ) : '';
$css .= ( bt_woo_button_dis_hover_color_default() !== $bt_woo_button_dis_hover_color ) ? sprintf( '
.woocommerce #respond input#submit.disabled:hover,
.woocommerce #respond input#submit:disabled:hover,
.woocommerce #respond input#submit:disabled[disabled]:hover,
.woocommerce a.button.disabled:hover,
.woocommerce a.button:disabled:hover,
.woocommerce a.button:disabled[disabled]:hover,
.woocommerce button.button.disabled:hover,
.woocommerce button.button:disabled:hover,
.woocommerce button.button:disabled[disabled]:hover,
.woocommerce input.button.disabled:hover,
.woocommerce input.button:disabled:hover,
.woocommerce input.button:disabled[disabled]:hover {
background: %1$s;
border: 1px solid %1$s;
color: %2$s;
}
', $bt_woo_button_dis_hover_color, bt_color_contrast( $bt_woo_button_dis_hover_color ) ) : '';
$css .= ( bt_woo_price_color_default() !== $bt_woo_price_color ) ? sprintf( '
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
color: %s;
}
', $bt_woo_price_color, bt_color_contrast( $bt_woo_price_color ) ) : '';
$css .= ( bt_woo_sale_price_color_default() !== $bt_woo_sale_price_color ) ? sprintf( '
.woocommerce span.onsale {
background-color: %s;
}
', $bt_woo_sale_price_color, bt_color_contrast( $bt_woo_sale_price_color ) ) : '';
$css .= ( bt_woo_info_color_default() !== $bt_woo_info_color ) ? sprintf( '
.woocommerce-info {
border-top-color: %s;
}
', $bt_woo_info_color ) : '';
$css .= ( bt_woo_info_color_default() !== $bt_woo_info_color ) ? sprintf( '
.woocommerce-info:before {
color:%s;
}
', $bt_woo_info_color ) : '';
$css .= ( bt_woo_error_color_default() !== $bt_woo_error_color ) ? sprintf( '
.woocommerce-error {
border-top-color: %s;
}
', $bt_woo_error_color ) : '';
$css .= ( bt_woo_error_color_default() !== $bt_woo_error_color ) ? sprintf( '
.woocommerce-error:before,
.woocommerce form .form-row.woocommerce-invalid label,
.woocommerce form .form-row .required,
.woocommerce a.remove {
color:%s !important;
}
', $bt_woo_error_color ) : '';
$css .= ( bt_woo_error_color_default() !== $bt_woo_error_color ) ? sprintf( '
.woocommerce form .form-row.woocommerce-invalid .select2-container,
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
border-color: %s;
}
', $bt_woo_error_color ) : '';
$css .= ( bt_woo_error_color_default() !== $bt_woo_error_color ) ? sprintf( '
.woocommerce a.remove:hover {
background: %s;
}
', $bt_woo_error_color ) : '';
$css .= ( bt_woo_message_color_default() !== $bt_woo_message_color ) ? sprintf( '
.woocommerce-message {
border-top-color: %s;
}
', $bt_woo_message_color ) : '';
$css .= ( bt_woo_message_color_default() !== $bt_woo_message_color ) ? sprintf( '
.woocommerce-message:before {
color:%s;
}
', $bt_woo_message_color ) : '';
if ( $css ) {
wp_add_inline_style( $handle, $css );
}
}
view raw output.php hosted with ❤ by GitHub

css-output-with-inline-style

 

Above you can see the inline style being output straight after the main child theme stylesheet.

That’s it once you have your read around how it works you can add many more styles or fewer to the  Customizer to change.

 

1 comment

  • LK
    5 years ago Reply

    will this work for Twenty Nineteen theme?

    FYI. LOVE your site… you have great examples of the easy things/customizations I’m needing to do!!!! Appreciate It!!

Leave your comment