Skip to content

Instantly share code, notes, and snippets.

@neilgee

neilgee/customizer.php

Last active September 16, 2021 14:16
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save neilgee/90ac1eb7076b97cef2a5666acd229d23 to your computer and use it in GitHub Desktop.
Save neilgee/90ac1eb7076b97cef2a5666acd229d23 to your computer and use it in GitHub Desktop.
Download ZIP
WooCommerce Styles in The Customizer
Raw
customizer.php
<?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
)
) );
}
Raw
output.php
<?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 );
}
}
Raw
woocustomize.php
<?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' );
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment