7

The Wordpress WooCommerce StoreFront Theme queues styles in the header from the WooCommerce StoreFront Customiser;

<style id='storefront-woocommerce-style-inline-css' type='text/css'></style>
<style id='storefront-style-inline-css' type='text/css'></style>

I seem to spend more time over-righting these styles, than defining what I want. Does anyone know how to remove them or disable the Storefront customiser?

Header Styles

2
  • i have found that references in storefront>inc>class-storefront.php line 181 and storefront>inc>woocommerce>class-storefront-woocommerce.php line 76… if that can help you. at the beginning of that 2 files there is some registering hooks. I will delete my answer then… Hope you will find a solution quickly Commented May 16, 2016 at 21:59
  • I think its some kind of hook within a hook
    – Stuart
    Commented May 17, 2016 at 6:57

8 Answers 8

14

For anyone that is fighting with this, this is the solution I found:

function my_theme_remove_storefront_standard_functionality() {

//remove customizer inline styles from parent theme as I don't need it.
set_theme_mod('storefront_styles', '');
set_theme_mod('storefront_woocommerce_styles', '');  

}

add_action( 'init', 'my_theme_remove_storefront_standard_functionality' );
0
11

The two of inline CSS was added in class-storefront-customizer.php.

For deregister storefront-style-inline-css:

add_filter('storefront_customizer_css', '__return_false');

For deregister storefront-woocommerce-style-inline-css:

add_filter('storefront_customizer_woocommerce_css', '__return_false');
1
  • Still not working. I've spent hours trying to figure this one out.
    – Stuart
    Commented May 24, 2016 at 19:15
6

I had to remove these recently, and the best way to do it is using Ngoc Nguyen's method.

Just put the below code in your functions.php

function wpcustom_deregister_scripts_and_styles(){
    wp_deregister_style('storefront-woocommerce-style');
    wp_deregister_style('storefront-style');
}
add_action( 'wp_print_styles', 'wpcustom_deregister_scripts_and_styles', 100 );
2
  • Helpful but doesn't answer exactly what OP wanted. This removes the styles enqueued by Storefront, not the inline styles it adds within <head>.
    – Brad Adams
    Commented Dec 8, 2017 at 0:46
  • +1. This just helped me get rid of the woocommerce.css style that storefront was adding to my theme. Never would have figured it out on my own.
    – ecg8
    Commented May 11, 2018 at 22:34
0

Is this working in Storefront 2.0.4?

Because i have these filters:

add_filter( 'storefront_customizer_enabled', '__return_false' );
add_filter( 'storefront_customizer_css', '__return_false' );
add_filter( 'storefront_customizer_woocommerce_css', '__return_false' );

but i have still inline css.

The first filter was mentioned in topic: https://wordpress.org/support/topic/remove-inline-css-1?replies=8

0

Try this:

add_filter( 'storefront_customizer_enabled',   'woa_storefront_disable_customizer' );

function woa_storefront_disable_customizer() {
    return false;
}

https://github.com/FrancySanchez/storefront-child/blob/master/functions.php

0

I had been having this problem and though my solution is quite specific to my own application, you may find use in it.

My problem was that I wanted white menu text with a hover color of a light grey. By default the inline css that you have a problem with seemed to take your menu text color, lighten it by a factor and set that color as the hover color. Obviously white cannot be lightened so my menu simply stayed the same on hover. Here is how I solved this:

In the file "class-storefront-customizer.php" located at wp-content/themes/storefront_child/inc/customizer there are functions defined on how the theme editor interface works. Firstly I took the following function:

public static function get_storefront_default_setting_values() {
        return apply_filters( 'storefront_setting_default_values', $args = array(
            'storefront_heading_color'               => '#333333',
            'storefront_text_color'                  => '#6d6d6d',
            'storefront_accent_color'                => '#aeaeae',
            'storefront_header_background_color'     => '#ffffff',
            'storefront_header_text_color'           => '#6d6d6d',
            'storefront_header_link_color'           => '#333333',
            'storefront_footer_background_color'     => '#f0f0f0',
            'storefront_footer_heading_color'        => '#333333',
            'storefront_footer_text_color'           => '#6d6d6d',
            'storefront_footer_link_color'           => '#333333',
            'storefront_button_background_color'     => '#eeeeee',
            'storefront_button_text_color'           => '#333333',
            'storefront_button_alt_background_color' => '#333333',
            'storefront_button_alt_text_color'       => '#ffffff',
            'storefront_layout'                      => 'right',
            'background_color'                       => 'ffffff',
        ) );
    }

And I set the storefront_accent_color var as the offset color I wanted, in my case #aeaeae. This set the default color to that value for the editor. This step is not necessary but does make it easier.

I also set this option to the same value as I was not sure which would really take effect...

$wp_customize->add_setting( 'storefront_accent_color', array(
            'default'               => apply_filters( 'storefront_default_accent_color', '#aeaeae' ),
            'sanitize_callback'     => 'sanitize_hex_color',
        ) );

On line 501 of this file is the definition of the function get_css() which sets up the inline css you see that you are trying to get rid of. For me, the value I needed to change was in this section:

.main-navigation ul li a:hover,
        .main-navigation ul li:hover > a,
        .site-title a:hover,
        a.cart-contents:hover,
        .site-header-cart .widget_shopping_cart a:hover,
        .site-header-cart:hover > li > a,
        .site-header ul.menu li.current-menu-item > a {
            color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['header_link_color'], 80 ) . ';
        }

I changed the value of this css attribute to:

color: ' . $storefront_theme_mods['accent_color'] . ';

This did not change the set color of my offset on hover. What it did do however was change the editor.

So the final step is to go into the editor, go to the typography tab, select accent color, hit the default color button (which should now come up as my color) and then SAVE that. My menu worked fine after that.

This was a bit long and not quite what you were asking for, but I put it all in to illustrate how you can manipulate the values that are output into that inline css. Hopefully that info has helped you.

0

In case anyone else stumbles on this question here's how I managed to solve it:

  1. Create a child theme from the parent storefront theme. (refer to this link to find out how to do that: https://developer.wordpress.org/themes/advanced-topics/child-themes/)
  2. In the child theme's functions.php file put the following code:

    remove_action( 'wp_enqueue_scripts', array( $storefront->customizer, 'add_customizer_css' ), 130 );
    

It basically grabs the function "add_customizer.css" from the class Storefront_Customizer, which adds the inline css, and removes that hooked function from the 'wp_enqueue_scripts'. In the storefront theme's functions.php file there's the following code:

    $storefront = (object) array(
    'version'    => $storefront_version,

    /**
     * Initialize all the things.
     */
    'main'       => require 'inc/class-storefront.php',
    'customizer' => require 'inc/customizer/class-storefront-customizer.php',
);

What it does is it stores the class Storefront_Customizer from file 'class-storefront-customizer.php' in $storefront array and then converts the array into an object.

By creating a child theme you'll be able to update your parent storefront theme and the changes won't be lost.

-1

after several trials I got a final solution to solve the problem! It's to simple to believe :-) Remove the following line in "class-storefront-customizer.php" and it works:

    add_action( 'wp_enqueue_scripts',array( $this, 'add_customizer_css' ), 130 );

Regards Herbert

1
  • Removing line in storefront theme will brake the theme on first storefront update Commented Jan 3, 2018 at 1:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.