Eliminar los estilos de encabezado de WordPress WooCommerce StoreFront

El tema WordPress WooCommerce StoreFront pone en cola los estilos en el encabezado del personalizador WooCommerce StoreFront;

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

Parece que paso más tiempo corrigiendo estos estilos que definiendo lo que quiero. ¿Alguien sabe cómo eliminarlos o desactivar el personalizador de Storefront?

Para cualquiera que esté luchando con esto, esta es la solución que encontré:

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' );

Los dos de CSS en línea se agregaron en class-storefront-customizer.php.

Para cancelar el registro de storefront-style-inline-css:

add_filter('storefront_customizer_css', '__return_false');

Para cancelar el registro de storefront-woocommerce-style-inline-css:

add_filter('storefront_customizer_woocommerce_css', '__return_false');

Tuve que eliminarlos recientemente, y la mejor manera de hacerlo es usando El método de Ngoc Nguyen.

Simplemente coloque el siguiente código en sus funciones.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 );

¿Funciona esto en Storefront 2.0.4?

Porque tengo estos filtros:

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

pero todavía tengo css en línea.

El primer filtro fue mencionado en el tema:
https://wordpress.org/support/topic/remove-inline-css-1?replies=8

Prueba esto:

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

He tenido este problema y, aunque mi solución es bastante específica para mi propia aplicación, es posible que le resulte útil.

Mi problema era que quería un texto de menú blanco con un color gris claro. De forma predeterminada, el css en línea con el que tiene un problema parecía tomar el color del texto del menú, aclararlo por un factor y establecer ese color como el color de desplazamiento. Obviamente, el blanco no se puede aclarar, por lo que mi menú simplemente se mantuvo igual al pasar el mouse por encima. Así es como resolví esto:

En el archivo “class-storefront-customizer.php” ubicado en wp-content/themes/storefront_child/inc/customizer hay funciones definidas sobre cómo funciona la interfaz del editor de temas. Primero tomé la siguiente función:

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',
        ) );
    }

Y establecí storefront_accent_color var como el color de compensación que quería, en mi caso #aeeae. Esto establece el color predeterminado en ese valor para el editor. Este paso no es necesario pero lo hace más fácil.

También configuré esta opción en el mismo valor porque no estaba seguro de cuál realmente tendría efecto…

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

En la línea 501 de este archivo está la definición de la función get_css() que configura el css en línea que ve y del que está tratando de deshacerse. Para mí, el valor que necesitaba cambiar estaba en esta sección:

.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 ) . ';
        }

Cambié el valor de este atributo css a:

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

Esto no cambió el color establecido de mi compensación al pasar el mouse. Sin embargo, lo que sí hizo fue cambiar el editor.

Entonces, el paso final es ingresar al editor, ir a la pestaña de tipografía, seleccionar el color de acento, presionar el botón de color predeterminado (que ahora debería aparecer como mi color) y luego GUARDAR eso. Mi menú funcionó bien después de eso.

Esto fue un poco largo y no era exactamente lo que estabas pidiendo, pero lo puse todo para ilustrar cómo puedes manipular los valores que se generan en ese css en línea. Espero que la información te haya ayudado.

En caso de que alguien más tropiece con esta pregunta, así es como logré resolverlo:

1. Cree un tema secundario a partir del tema del escaparate principal. (Consulte este enlace para saber cómo hacerlo: https://developer.wordpress.org/themes/advanced-topics/child-themes/)

2. En el archivo functions.php del tema hijo, coloque el siguiente código:

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

Básicamente, toma la función “add_customizer.css” de la clase Storefront_Customizer, que agrega el css en línea y elimina esa función enganchada de ‘wp_enqueue_scripts’. En el archivo functions.php del tema de la tienda hay el siguiente código:

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

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

Lo que hace es almacenar la clase Storefront_Customizer del archivo ‘class-storefront-customizer.php’ en la matriz $storefront y luego convierte la matriz en un objeto.

Al crear un tema secundario, podrá actualizar el tema principal de su escaparate y los cambios no se perderán.