web-dev-qa-db-fra.com

Ecrire des styles propres à WooCommerce

Je construis donc mon premier magasin WooCommerce personnalisé et je constate que les noms de classe de mes styles sont de plus en plus longs et longs, ou est-ce ainsi? J'utilise l'outil d'inspection dans Chrome pour obtenir les noms de classe.

Voici un exemple de ce avec quoi je travaille en ce moment:

.woocommerce 
ul.products 
li.product a {
   ...
}

.woocommerce 
ul.products
li.product 
.price del {
   ...
}

Est-ce une pratique habituelle lors de la construction d'un magasin personnalisé ou existe-t-il un meilleur moyen?

Merci d'avance

Stu :)

theme-developmentcsswoocommerce
1
stucow88

Ce que je fais est, désactiver les styles par défaut de Woocommerce en fonction de ce que je veux personnaliser, au lieu de remplacer le css.

Woocommerce charge 3 styles par défaut: woocommerce-general.css woocommerce-layout.css woocommerce-smallscreen.css

Si vous voulez personnaliser complètement, vous pouvez désactiver tous les styles ou juste ceux que vous ne voulez pas en ajoutant:

// Remove each style one by one
add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' );
function jk_dequeue_styles( $enqueue_styles ) {
    unset( $enqueue_styles['woocommerce-general'] );    // Remove the gloss
    unset( $enqueue_styles['woocommerce-layout'] );     // Remove the layout
    unset( $enqueue_styles['woocommerce-smallscreen'] );    // Remove the smallscreen optimisation
    return $enqueue_styles;
}

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

Consultez la documentation de Woocommerce pour plus de détails Désactivez la feuille de style par défaut

1
Takebo

Il est toujours recommandé d’utiliser un nombre maximum de classes, car utiliser plus de classes donne plus de poids-âge et il tiendra toujours compte de votre css en premier.

Mais essayez de ne pas utiliser les balises div ou p lors de la création du style pour price. Parce que différents types de produits utilisent différents éléments (par exemple, simple utilise p, variable utilise span). Donc, ce ne sera pas un code commun pour toutes les étiquettes de prix.

0
Aniruddha Gawade