La mejor manera de anular woocommerce.css

4 minutos de lectura

¿Cuál es la mejor manera de anular woocommerce.css? En mi style.css, tengo que escribir esos css nuevamente para anularlos, y poner !important después de cada css. Creo que esta no es la mejor práctica para hacerlo. ¿Alguien tiene una idea mejor?

WooCommerce pone en cola 3 hojas de estilo de forma predeterminada. Puede deshabilitarlos todos usando:

add_filter( 'woocommerce_enqueue_styles', '__return_false' );

Para obtener detalles sobre cómo deshabilitar hojas de estilo individuales de WooCommerce, consulte su Deshabilitar la hoja de estilo predeterminada artículo.

  • Genial, no sabía que woocommerce tiene 3 css, pensé que era solo uno.

    – usuario3390591

    30 de julio de 2014 a las 1:24

  • Gracias, profundicé en el documento, lo siento, todavía me gustaría saber, por ejemplo, si solo quiero anular uno de los estilos de botón, por ejemplo: .woocommerce ul.products li.product a, de woocommerce.css, ¿cómo ¿Lo haces por función jk_dequeue_styles? porque solo necesito eliminar uno de estilo de clase en lugar de una hoja de estilo completa, tks

    – tess hsu

    17 de diciembre de 2019 a las 9:06

Hay otro enfoque en un artículo por Carrie Dills. Está usando el tema de Génesis, pero creo que podría modificarse para otros temas.

En esencia, lo que recomienda es cambiar el orden en que se cargan los estilos para que se cargue la hoja de estilos de su tema. después la hoja de estilo de WooCommerce. es decir, se pone en cola con una prioridad más alta.

Para Génesis se ve como el siguiente. Si puede acceder a la hoja de estilo de su marco/tema cargando con un enlace similar, podría hacer lo mismo.

/**
 * Remove Genesis child theme style sheet
 * @uses  genesis_meta  <genesis/lib/css/load-styles.php>
*/ 
remove_action( 'genesis_meta', 'genesis_load_stylesheet' );

/**
 * Enqueue Genesis child theme style sheet at higher priority
 * @uses wp_enqueue_scripts <http://codex.wordpress.org/Function_Reference/wp_enqueue_style>
 */
add_action( 'wp_enqueue_scripts', 'genesis_enqueue_main_stylesheet', 15 );

  • ¡Buena idea! +1 de mí

    – henry wright

    30 de julio de 2014 a las 2:17

Puede anular woocommerce.css con un archivo custom.css que se puede ubicar en el tema predeterminado de wordpress o en el tema secundario. También puede hacer una copia de seguridad de woocommerce.css predeterminado si algo le sucede al archivo custom.css.

add_action('wp_enqueue_scripts', 'override_woo_frontend_styles');
function override_woo_frontend_styles(){
    $file_general = $_SERVER['DOCUMENT_ROOT'] . '/wp-content/themes/twentyfifteen/css/custom.css';
    if( file_exists($file_general) ){
        wp_dequeue_style('woocommerce-general');
        wp_enqueue_style('woocommerce-general-custom', get_template_directory_uri() . '/css/custom.css');
    }
}

Lo mismo ocurre con otros estilos de interfaz de woocommerce (woocommerce-layout y woocommerce-smallscreen).

Si está haciendo esto en un tema secundario, use get_stylesheet_directory_uri() en lugar de get_template_directory_uri() y cambie la ruta del archivo de acuerdo con el nombre del tema secundario.

Mi enfoque es seguir el principio cascada de CSS. Entonces, básicamente, el que se cargue en último lugar anulará las reglas anteriores si no !importante Fue definido.

Chequea aquí:

//This is the order the css load by default, at leat on the sites I have worked!!!
<link rel="stylesheet" href="http:/css/custom_styles.css" type="text/css" media="all">
<link rel="stylesheet" href="http:/css/woocomerce.css" type="text/css" media="all">

Entonces, ¿cuál es la idea? Cargue su CSS personalizado después de que woocommerce se haya cargado.

Método 1: Adición de una prioridad baja en el [add_action] por el estilo añadir_acción me gusta:

function load_my_css(){
   wp_enqueue_style('custom-theme', URL TO STYLE);
}
// (the higher the number the lowest Priority)
add_action('wp_enqueue_scripts', 'load_my_css', 5000);

Método 2: Elimina los estilos de woocommerce, para que crees tus propios estilos

// Or just remove them all in one line
add_filter( 'woocommerce_enqueue_styles', '__return_false' );

Método 3: Agregue la matriz de dependencias a su estilo personalizado

function load_my_css(){
   wp_enqueue_style('custom-theme', URL TO STYLE, array(DEPENDECIES HERE));
}

Espero que uno de los métodos ayude.

Encontrarás lo que necesitas en la documentación de WooCommerce. Ofrecen dos funciones para:

  1. Detener la carga del complemento WooCommerce todo o especifico hojas de estilo usando su woocommerce_enqueue_styles() función.
  2. Agrega tu hojas de estilo personalizadas dentro de su complemento usando el wp_enqueue_woocommerce_style() permitiéndole anular woocommerce.css.

Enlace a Documentación de WooCommerce « deshabilitar las hojas de estilo predeterminadas »

avatar de usuario
osemec

Para versiones más nuevas WooCommerce 4.x+ use esto:

    add_action( 'wp_print_styles', 'dequeueWooCommerceStyles' );

    public function dequeueWooCommerceStyles()
    {
        wp_dequeue_style('wc-block-style');
        wp_deregister_style( 'wc-block-style' );
    }

¿Ha sido útil esta solución?