Personnalisez votre boutique WooCommerce avec CSS Hero


Personnalisez votre boutique WooCommerce

WordPress jouit d'une grande popularité grâce à sa réputation de système de gestion de contenu extrêmement flexible. De nombreux thèmes vous aideront à choisir un design adapté à votre site Web. Si vous avez des connaissances en CSS, vous pouvez facilement apporter des modifications aux éléments visuels de votre site. Maintenant, voici un outil qui vous aidera à apporter des modifications CSS sur votre site sans écrire activement de code. Ce serait extrêmement pratique pour les débutants à WordPress. De plus, il est compatible avec WooCommerce et vous aide à apporter des modifications visuelles sans affecter les fonctionnalités spécifiques au commerce électronique. Dans cette revue de CSS Hero, nous allons essayer de voir les fonctionnalités de ce plugin plus en détail, et comment il vous aidera à personnaliser votre boutique WooCommerce.

Dans cet article, nous examinons trois aspects principaux du plug-in: sa compatibilité avec WooCommerce, la gamme de fonctionnalités disponibles et la facilité d'utilisation.

Qu'est-ce que CSS Hero?

CSS Hero est un plugin qui vous permet d’effectuer des personnalisations CSS sur votre site WordPress sans écrire de code. Vous pouvez utiliser l'interface visuelle du plug-in pour apporter des modifications à l'interface de votre site. Cela signifie que vous pourrez simplement pointer et modifier des éléments visuels à partir de l’interface de votre site. Cela vous aidera à personnaliser votre boutique WooCommerce de manière réactive et à contrôler le mode d'affichage de votre site sur différents appareils. De plus, vous pouvez apporter des modifications spécifiques aux appareils et les prévisualiser avant de les appliquer en direct. Il offre également des options d'annulation et de rétablissement pour vous permettre d'être plus assuré avec les modifications. Tout cela peut être géré sans aucune modification sur votre fichier de thème.

Comment CSS Hero fonctionne avec WooCommerce?

L’une des principales raisons de cet examen est maintenant de comprendre le fonctionnement du plug-in CSS Hero avec WooCommerce. Il est parfaitement compatible avec WooCommerce et vous pouvez facilement ajuster visuellement vos pages WooCommerce en utilisant ce plugin. Le principal avantage est qu’il est tout aussi confortable pour les experts en CSS que pour les débutants de personnaliser votre boutique WooCommerce. L'outil d'édition visuelle avec aperçu en direct peut être très utile pour essayer des modifications sur votre magasin.

Personnalisez votre boutique WooCommerce "width =" 640 "height =" 256 "srcset =" https://webypress.fr/wp-content/uploads/2019/06/1559902751_649_Personnalisez-votre-boutique-WooCommerce-avec-CSS-Hero.png 1024w, https : //cdn.learnwoo.com/wp-content/uploads/2019/06/CSS-Hero-Banner-300x120.png 300w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/ CSS-Hero-Banner-768x307.png 768w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/CSS-Hero-Banner-696x278.png 696w, https: //cdn.learnwoo. com / wp-content / uploads / 2019/06 / CSS-Hero-Banner-1068x427.png 1068w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/CSS-Hero-Banner-1052x420 .png 1052w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/CSS-Hero-Banner.png 1342w "values ​​=" (largeur maximale: 640px) 100vw, 640px

Si certains des thèmes par défaut sont installés sur votre site WordPress, vous pouvez facilement effectuer des ajustements pour lui donner l’apparence souhaitée. Si vous avez un thème WooCommerce spécialisé, vous pouvez toujours effectuer des personnalisations pour rendre votre site unique. Voici quelques modifications de base que vous pouvez apporter pour personnaliser votre boutique WooCommerce avec ce plugin.

Comment démarrer avec CSS Hero?

Vous pouvez acheter la licence et installer le plugin comme n'importe quel autre plugin WordPress. Une fois installé, il vous guidera à travers quelques étapes pour l'activation de la licence. Une fois la licence activée, vous pouvez commencer à travailler avec le plugin.

Il existe quatre licences différentes disponibles. La licence de démarrage pour un seul site est disponible à 29 $ par an. Pour 5 sites, vous pouvez utiliser la licence personnelle à 59 $ par an. La licence Pro vous permet d’utiliser le plug-in sur un maximum de 999 sites, au prix de 199 $ par an. Il existe également une option de tarification unique à 559 $ dans laquelle vous pouvez utiliser le plug-in sur un maximum de 999 sites et bénéficier d'un support à vie.

achat Personnalisateur WooCommerce CSS Hero brancher.

Accédez à la page que vous souhaitez personnaliser, puis cliquez sur l'option "Personnaliser avec CSS Hero".

Personnalisez votre boutique WooCommerce "width =" 640 "height =" 284 "srcset =" https://webypress.fr/wp-content/uploads/2019/06/1559902752_114_Personnalisez-votre-boutique-WooCommerce-avec-CSS-Hero.png 1024w , https://cdn.learnwoo.com/wp-content/uploads/2019/06/Starting-with-CSS-Hero-300x133.png 300w, https://cdn.learnwoo.com/wp-content/uploads/ 2019/06 / Starting-with-CSS-Hero-768x340.png 768w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Starting-with-CSS-Hero-696x308.png 696w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Starting-with-CSS-Hero-1068x473.png 1068w, https://cdn.learnwoo.com/wp-content/uploads/2019 /06/Starting-with-CSS-Hero-948x420.png 948w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Starting-with-CSS-Hero.png 1348w "tailles =" (largeur maximale: 640px) 100vw, 640px

Vous verrez maintenant l'éditeur en direct sur le côté gauche de votre écran. Vous pouvez choisir un élément visuel dans la droite, apporter des modifications à l'éditeur et le voir appliqué en temps réel.

Personnalisez votre boutique WooCommerce "width =" 640 "height =" 293 "srcset =" https://cdn.learnwoo.com/wp-content/uploads/2019/06/Making-edits-using-CSS-Hero-1024x468. png 1024w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Making-edits-using-CSS-Hero-300x137.png 300w, https://cdn.learnwoo.com/wp- content / uploads / 2019/06 / Making-edits-using-CSS-Hero-768x351.png 768w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Making-edits-using-CSS -Hero-696x318.png 696w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Making-edits-using-CSS-Hero-1068x488.png 1068w, https: //cdn.learnwoo .com / wp-content / uploads / 2019/06 / Mise en forme par CSS-Hero-919x420.png 919w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Making- edits-using-CSS-Hero.png 1361w "tailles =" (largeur maximale: 640 pixels) 100vw, 640 pixels

Si vous souhaitez enregistrer des captures d'écran de vos modifications à comparer, vous pouvez utiliser l'option Enregistrer les points de contrôle en haut à droite.

Personnalisez votre boutique WooCommerce "width =" 640 "height =" 182 "srcset =" https://webypress.fr/wp-content/uploads/2019/06/1559902753_501_Personnalisez-votre-boutique-WooCommerce-avec-CSS-Hero.png 1024w, https: / /cdn.learnwoo.com/wp-content/uploads/2019/06/Save-Checkpoints-300x85.png 300w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Save-Checkpoints- 768x218.png 768w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Save-Checkpoints-696x198.png 696w, https://cdn.learnwoo.com/wp-content/uploads/ 2019/06 / Save-Checkpoints-1068x304.png 1068w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Save-Checkpoints.png 1364w "values ​​=" (largeur maximale: 640 pixels) 100vw, 640px

Ou, vous pouvez enregistrer une édition particulière sous forme d'extrait à utiliser dans d'autres scénarios. Pour cela, vous pouvez cliquer sur l'icône verte de l'éditeur de code.

Personnalisez votre boutique WooCommerce "width =" 640 "height =" 291 "srcset =" https://webypress.fr/wp-content/uploads/2019/06/1559902753_276_Personnalisez-votre-boutique-WooCommerce-avec-CSS-Hero.png 1024w, https: / /cdn.learnwoo.com/wp-content/uploads/2019/06/Saving-Snippets-300x137.png 300w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Saving-Snippets- 768x350.png 768w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Saving-Snippets-696x317.png 696w, https://cdn.learnwoo.com/wp-content/uploads/ 2019/06 / Saving-Snippets-1068x486.png 1068w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Saving-Snippets-922x420.png 922w, https: //cdn.learnwoo. com / wp-content / uploads / 2019/06 / Saving-Snippets.png 1366w "tailles =" (largeur maximale: 640px) 100vw, 640px

Options d'édition

L'éditeur CSS Hero vous propose trois options: Propriétés, Extraits de code et Animations. Lorsque vous choisissez un élément sur votre site, vous pouvez modifier plusieurs de ses propriétés en utilisant la première option. Celles-ci incluent Fond, Typographie, Bordures, etc. Vous pouvez également accéder à des extraits prédéfinis à partir de la section Extraits. Vous pouvez également appliquer des animations aux éléments visuels, que l'utilisateur verra lorsqu'il fera défiler la page et atteindra cet élément particulier.

Personnalisez votre boutique WooCommerce "width =" 640 "height =" 132 "srcset =" https://webypress.fr/wp-content/uploads/2019/06/1559902754_245_Personnalisez-votre-boutique-WooCommerce-avec-CSS-Hero.png 1024w, https: / /cdn.learnwoo.com/wp-content/uploads/2019/06/Editing-options-300x62.png 300w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Editing-options- 768x158.png 768w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Editing-options-696x143.png 696w, https://cdn.learnwoo.com/wp-content/uploads/ 2019/06 / Editing-options-1068x220.png 1068w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Editing-options.png 1364w "values ​​=" (largeur maximale: 640 pixels) 100vw, 640px

Voyons maintenant comment modifier différentes pages WooCommerce.

Page boutique

Vous pouvez effectuer plusieurs modifications sur la page de la boutique en fonction de vos idées de conception. Par exemple, ci-dessous est une capture d'écran de la page de la boutique WooCommerce avec le thème par défaut Twenty Nineteen.

Personnalisez votre boutique WooCommerce "width =" 742 "height =" 607 "srcset =" https://webypress.fr/wp-content/uploads/2019/06/1559902755_499_Personnalisez-votre-boutique-WooCommerce-avec-CSS-Hero.png 742w, https : //cdn.learnwoo.com/wp-content/uploads/2019/06/Sample-Shop-Page-2019-300x245.png 300w, https://cdn.learnwoo.com/wp-content/uploads/2019/ 06 / Sample-Shop-Page-2019-696x569.png 696w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Sample-Shop-Page-2019-513x420.png 513w "tailles = "(largeur maximale: 742px) 100vw, 742px

Maintenant, faisons quelques changements en utilisant le plugin.

Nous avons sélectionné Image du produit et ajouté des bordures avec style (couleur appliquée, rayon, ombre, etc.). Également modifié le style du bouton Ajouter au panier en utilisant l'un des extraits prédéfinis pour les boutons. En outre, la couleur du bouton Vente est également modifiée. Le résultat peut être vu dans la capture d'écran ci-dessous:

Personnalisez votre boutique WooCommerce "width =" 773 "height =" 593 "srcset =" https://webypress.fr/wp-content/uploads/2019/06/1559902755_110_Personnalisez-votre-boutique-WooCommerce-avec-CSS-Hero.png 773w, https: / /cdn.learnwoo.com/wp-content/uploads/2019/06/Shop-Page-Edits-300x230.png 300w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Shop- Page-Edits-768x589.png 768w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Shop-Page-Edits-80x60.png 80w, https://cdn.learnwoo.com/ wp-content / uploads / 2019/06 / Shop-Page-Edits-696x534.png 696w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Shop-Page-Edits-547x420.png 547w "tailles =" (largeur maximale: 773px) 100vw, 773px

Page de détail du produit

Voici un exemple de capture d'écran de la page de détail du produit avant édition.

Personnalisez votre boutique WooCommerce "width =" 853 "height =" 621 "srcset =" https://webypress.fr/wp-content/uploads/2019/06/1559902756_630_Personnalisez-votre-boutique-WooCommerce-avec-CSS-Hero.png 853w, https: / /cdn.learnwoo.com/wp-content/uploads/2019/06/Product-Detail-Page-300x218.png 300w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Product- Detail-Page-768x559.png 768w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Product-Detail-Page-324x235.png 324w, https://cdn.learnwoo.com/ wp-content / uploads / 2019/06 / Product-Detail-Page-696x507.png 696w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Product-Detail-Page-577x420.png 577w "tailles =" (largeur maximale: 853px) 100vw, 853px

Voici la page après quelques modifications:

Personnalisez votre boutique WooCommerce "width =" 686 "height =" 589 "srcset =" https://webypress.fr/wp-content/uploads/2019/06/1559902756_321_Personnalisez-votre-boutique-WooCommerce-avec-CSS-Hero.png 686w, https: / /cdn.learnwoo.com/wp-content/uploads/2019/06/Product-Detail-Edits-300x258.png 300w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Product- Detail-Edits-489x420.png 489w "tailles =" (largeur maximale: 686px) 100vw, 686px

Page panier

Vous pouvez également modifier la page Panier en fonction de vos goûts.

Personnalisez votre boutique WooCommerce "width =" 813 "height =" 886 "srcset =" https://webypress.fr/wp-content/uploads/2019/06/1559902756_304_Personnalisez-votre-boutique-WooCommerce-avec-CSS-Hero.png 813w, https : //cdn.learnwoo.com/wp-content/uploads/2019/06/Sample-Cart-Page-2019-275x300.png 275w, https://cdn.learnwoo.com/wp-content/uploads/2019/ 06 / Sample-Cart-Page-2019-768x837.png 768w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Sample-Cart-Page-2019-696x758.png 696w, https: //cdn.learnwoo.com/wp-content/uploads/2019/06/Sample-Cart-Page-2019-385x420.png 385w "values ​​=" (max-width: 813px) 100vw, 813px

Voici la page de panier mise à jour après quelques modifications simples:

Personnalisez votre boutique WooCommerce "width =" 731 "height =" 983 "srcset =" https://webypress.fr/wp-content/uploads/2019/06/1559902757_435_Personnalisez-votre-boutique-WooCommerce-avec-CSS-Hero.png 731w, https: // cdn .learnwoo.com / wp-content / uploads / 2019/06 / Cart-Edits-223x300.png 223w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Cart-Edits-696x936. png 696w, https://cdn.learnwoo.com/wp-content/uploads/2019/06/Cart-Edits-312x420.png 312w "values ​​=" (largeur maximale: 731px) 100vw, 731px

L’utilisation de CSS Hero présente l’avantage de vous permettre d’éditer de façon créative des modifications CSS dans votre magasin, sans craindre de casser le site. Cela encouragera même les débutants à expérimenter la conception de sites et à essayer des improvisations créatives sur leur site. Avec l’aide de CSS Hero, vous pouvez rendre votre boutique WooCommerce plus attrayante tout en garantissant un meilleur taux de conversion.

Plus important encore, CSS Hero n'apporte aucune modification à votre fichier de thème d'origine. Il crée une autre feuille de style avec toutes les modifications apportées aux éléments visuels de votre site. En outre, CSS Hero vous permet de prévisualiser les modifications spécifiques à différents appareils. Vous serez donc absolument sûr de la réactivité de votre site à tout moment.

Caractéristiques

CSS Hero est livré avec une gamme de fonctionnalités qui vous aideront beaucoup à personnaliser votre site. Ceux-ci inclus:

Collection abondante de polices

Vous pouvez personnaliser la typographie de votre site en utilisant la collection abondante de polices superbes. Une liste infinie de polices Google disponibles, que vous pouvez utiliser selon vos préférences. Il prend également en charge les polices TypeKit.

Combinaisons de couleurs créatives

CSS Hero vous aide à faire de superbes combinaisons de couleurs sur votre site web. Vous pourrez enregistrer les dernières couleurs utilisées pour vous aider à effectuer d'autres modifications.

Faire des changements CSS complexes

Si vous n'êtes pas à l'aise avec CSS, l'ajustement des marges et du remplissage peut s'avérer une tâche ardue. CSS Hero sera très pratique pour vous car vous pouvez facilement changer la position des éléments les uns par rapport aux autres à l'aide d'un curseur. Vous pouvez également créer des dégradés, des ombres, des animations et d’autres modifications CSS complexes à l’aide de ce plugin.

Grand bassin d'images

CSS Hero offre une intégration avec UnSplash, qui vous fournira un pool illimité d’images libres d’utilisation.

Modifier le code CSS

Vous pourrez voir le code CSS pour chaque modification effectuée dans un éditeur de code dynamique. Cela sera très utile pour les experts CSS qui voudront peut-être déboguer rapidement leur travail. De plus, le plugin offre également une gamme d'extraits prédéfinis que vous pouvez utiliser selon vos besoins. Ces extraits de code sont également modifiables et vous pouvez les utiliser pour créer différentes combinaisons de styles.

Annuler et refaire

Lors de la conception d'un site Web, vous souhaiterez souvent revenir à l'étape précédente. CSS Hero offre des options pratiques d'annulation et de restauration, qui vous seront très utiles lors de vos expérimentations. Le plugin offre également une option de restauration pour vous aider à effectuer des modifications plus rapides et plus efficaces.

Exportez facilement vos dessins

Vous pourrez facilement exporter vos personnalisations via CSS, JSON ou LESS. Cela vous permet de sauvegarder des personnalisations et de sauvegarder des fichiers de sauvegarde.

Enregistrer plusieurs modifications

Vous voudrez peut-être essayer différents styles avant de faire vivre l’un d’eux. CSS Hero vous permet d’enregistrer différentes versions afin que vous puissiez choisir la meilleure et que vous puissiez vous connecter lorsque vous en aurez besoin.

Aucun changement à vos fichiers de thème

CSS Hero n'apportera aucune modification à vos fichiers de thème. Il crée une feuille de style distincte qui remplacera la feuille de style de votre thème. Cela vous permettra de mettre à jour le thème sans problèmes si nécessaire. En outre, il n’y aura aucun impact sur les performances de votre site.

Commander CSS Hero Now!

A quel point CSS Hero est-il convivial?

CSS Hero est un outil très utile pour les débutants WordPress qui ne sont pas à l'aise pour écrire leurs propres codes CSS. En même temps, il se présente comme un excellent outil pour les experts, car ils peuvent expérimenter les codes CSS en temps réel avec la prévisualisation en direct. Il est assez facile de modifier votre page. Vous pouvez appliquer des modifications uniquement à un élément visuel spécifique ou l'appliquer à tous les éléments appartenant à ce même groupe CSS.

Les options permettant d'enregistrer des captures d'écran des modifications vous aideront à choisir parmi plusieurs options lorsqu'il existe plusieurs choix. De même, vous pouvez utiliser des extraits de code prédéfinis ou créer vos propres extraits pour une utilisation ultérieure. Nous pensons que CSS Hero vous aidera beaucoup à personnaliser votre boutique WooCommerce afin de vous offrir la meilleure expérience client à tout moment.

Lectures complémentaires

Laisser un commentaire

Fermer le menu