2 façons de remplacer le modèle WooCommerce (sans codage)
Publié: 2022-12-14WooCommerce est l'un des meilleurs choix pour créer des magasins de commerce électronique en ligne dans WordPress. Surtout pour les propriétaires de petites entreprises, ce plugin WordPress gratuit est une bénédiction. Parce qu'avec WooCommerce, n'importe qui peut créer une boutique en ligne en dépensant quelques dollars ou pas du tout.
Cependant, il a aussi quelques inconvénients. L'un des inconvénients les plus courants est que nous ne pouvons pas remplacer les modèles WooCommerce . Oui, certaines options de personnalisation sont disponibles. Mais ceux-ci ne suffisent pas à répondre à ses besoins. Alors que faire?
Si vous êtes développeur, vous pouvez facilement modifier les modèles en écrivant quelques lignes de code. Mais qu'en est-il des débutants ?
Eh bien, si vous n'êtes pas développeur, vous pouvez en embaucher un pour faire la tâche à votre place. Ou vous pouvez également opter pour une extension ou un plugin WooCommerce qui offre des fonctionnalités de remplacement de modèle. C'est ce dont nous parlerons dans le billet de blog. Continuez donc à lire pour découvrir à quel point il est facile de remplacer les fichiers de modèle WooCommerce sans écrire une seule ligne de code.
Que sont les modèles WooCommerce ?
Les modèles WooCommerce font référence aux fichiers de plugin qui sont construits avec des codes pour prédéfinir les structures des pages d'une boutique WooCommerce. Lorsque vous visitez le front-end, il affiche des produits ou tout autre contenu statique ajouté par l'administrateur secondaire. Mais le contenu s'affiche selon la structure des modèles.
Pourquoi remplacer les modèles WooCommerce ?
Bien que les modèles par défaut de WooCommerce soient bons à utiliser. Cependant, vous voudrez peut-être les modifier. Pourquoi? Eh bien, il peut y avoir de nombreuses raisons derrière la modification des modèles par défaut. L'une des raisons les plus courantes est l'apparence des modèles. WooCommerce est livré avec une conception très basique avec quelques options de personnalisation. Il est donc évident que tout propriétaire de magasin de commerce électronique souhaiterait les remplacer par de meilleurs modèles.
Présentation du tout premier constructeur WooCommerce pour Gutenberg
Tu es venu si loin. Il est donc clair que vous souhaitez vraiment vous débarrasser des templates par défaut de votre boutique WooCommerce. Mais la question est comment ? Comme je l'ai déjà dit, je vais vous guider tout au long du processus de modification des modèles WooCommerce sans écrire de code. Pour cela, nous devons utiliser un plugin. Lequel?
ProductX serait le bon choix pour changer les modèles WooCommerce par défaut avec de nouveaux. Bien qu'il s'agisse d'une solution tout-en-un pour la création de magasins WooCommerce axés sur la conversion , il s'agit également d'un puissant constructeur. Ce n'est pas un constructeur traditionnel, c'est plutôt le tout premier constructeur WooCommerce finement conçu pour Gutenberg.

Obtenez le tout premier constructeur WooCommerce pour Gutenberg . Obtenez ProductX maintenant .
Ce Woo Builder fonctionne comme un addon de ProductX. Une fois que vous l'avez activé à partir de la section tous les addons, vous verrez une section constructeur. Ici, vous pouvez voir les noms de toutes les pages de la boutique WooCommerce. Ainsi, vous pouvez remplacer les modèles des pages suivantes.
- Maison
- Singulier
- Boutique
- Chariot
- Vérifier
- Mon compte
- Merci
- Recherche de produit
- Archive

Toutes ces pages mentionnées ci-dessus ont deux options pour remplacer les modèles. Soit, vous pouvez utiliser un modèle prédéfini ou recommencer à zéro. Continuez à lire les articles du blog pour bien comprendre le processus.
Comment remplacer les modèles WooCommerce sans codage
Vient maintenant la partie la plus importante de cet article de blog qui remplace les modèles WooCommerce . Comme je l'ai déjà dit, il existe deux façons de remplacer les modèles par ProductX. Je vais couvrir les deux sens. Ainsi, vous pouvez comprendre comment fonctionne ProductX Builder.
Comment remplacer les modèles WooCommerce avec des conceptions prédéfinies
Voyons maintenant comment remplacer les modèles. Mais avant d'aborder cela, assurez-vous que le plugin ProdutX est installé sur votre site. Tout d'abord, nous allons voir comment utiliser un modèle prédéfini et le remplacer par celui par défaut. Pour cela, suivez les étapes ci-dessous :
Étape 1 : Activez le module complémentaire WooCommerce Builder
Comme vous le savez déjà, WooCommerce Builder fonctionne comme un complément à ProductX. Nous devons donc le désactiver à partir de la section tous les addons. Depuis votre tableau de bord WordPress, accédez à la section ProductX et cliquez sur la section addons. Vous verrez maintenant tous les addons disponibles. Pour l'instant, activez l'addon WooCommerce Builder pour commencer à l'utiliser.

Étape 2 : commencez à créer un modèle personnalisé
Après avoir activé l'addon, vous verrez une section Builder avec toutes les autres sections de ProductX. Cliquez dessus pour commencer à créer un nouveau modèle. Maintenant, vous verrez toutes les options disponibles. Pour l'instant, créons un modèle de page de boutique. Pour cela, il vous suffit de cliquer sur "Boutique".

Étape 3 : Importer le modèle prédéfini
Maintenant, vous verrez deux options. L'un est pour partir de zéro et l'autre est le modèle. Pour l'instant, importons le modèle. Plus tard, je discuterai également du processus de création d'un modèle personnalisé en partant de zéro. Alors s'il vous plaît lire le blog complet pour une meilleure compréhension.

Pour l'instant, revenons sur la bonne voie. Pour importer le modèle, nous devons cliquer sur le bouton d'importation. Et, il sera importé sur une page.
Étape 4 : Personnalisez le modèle si nécessaire
Comme vous pouvez le voir, le modèle est prêt. Vous pouvez donc le publier tel quel. Cependant, vous pouvez également le personnaliser. Mais avant d'entrer dans les détails, vous devez noter que le modèle est une combinaison de plusieurs blocs de ProductX. Ainsi, vous pouvez personnaliser n'importe lequel des blocs individuellement. Pour personnaliser l'un des blocs, cliquez simplement sur le bloc. Et, vous verrez l'option de personnalisation sur le côté droit.

Étape 5 : publier le nouveau modèle

Une fois que vous avez fini de personnaliser le modèle, cliquez sur le bouton publier. C'est tout, votre nouveau modèle de page de boutique personnalisée est prêt. Maintenant, lorsque vous visitez la page de la boutique, vous verrez que le modèle de page de boutique par défaut a été remplacé par celui par défaut.
Comment remplacer les modèles WooCommerce à partir de zéro
Maintenant que vous avez déjà été initié au processus de création de modèles à l'aide de conceptions prédéfinies. Il est temps d'explorer le processus de création de modèles à partir de zéro. Pour cela, créons un modèle de page de produit unique et remplaçons-le par celui par défaut. Donc, pour créer un modèle à partir de rien, suivez les étapes ci-dessous :
Étape 1 : commencez à créer un modèle à partir de zéro
Tout d'abord, rendez-vous dans la section WooCommerce Builder de ProductX. Cliquez ensuite sur l'option "Produit unique" car nous voulons créer un modèle de page de produit unique.

Cliquez maintenant sur l'option "Démarrer à partir de zéro" au lieu d'importer le modèle. Une fois que vous aurez cliqué dessus, vous serez redirigé vers une page vierge.

Étape 2 : Définissez votre mise en page pour la page de produit unique
Maintenant, vous devez remplir le modèle vierge en utilisant les blocs de construction de page de produit unique de ProductX. Mais avant d'aborder cela, nous devons définir notre mise en page car nous voulons afficher l'image du produit sur le côté gauche et les détails du produit sur le côté droit. Pour cela, nous devons utiliser les blocs de colonnes Gutenberg avec un rapport de 50 sur 50.

Étape 3 : faites glisser et déposez les blocs de construction de la page de produit unique
ProductX propose plus de 18 blocs pour créer des modèles de page de produit unique. Ainsi, après avoir ajouté la colonne, il nous suffit de faire glisser et de déposer les blocs de la page produit à la position souhaitée. Vous pouvez trouver les blocs sur le côté gauche en cliquant sur l'icône plus.

Étape 4 : Personnalisez le modèle de page produit
Le modèle devrait être prêt après avoir ajouté les blocs à la position souhaitée. Cependant, vous pouvez également le personnaliser pour le rendre encore meilleur. Comme je l'ai dit plus tôt, vous pouvez personnaliser tous les blocs individuellement. Donc, pour personnaliser l'un des blocs, cliquez simplement dessus et vous verrez les options de personnalisation sur le côté droit.

Étape 5 : Définir la condition et publier le modèle
Une fois que vous êtes convaincu de l'apparence du modèle, il vous suffit de cliquer sur le bouton de publication. Et, n'oubliez pas de définir la condition. Vous verrez les options après avoir cliqué sur le bouton de publication.

Par défaut, la condition est définie pour tous les produits. Donc, si nous le gardons tel quel, ce modèle sera utilisé pour tous les produits de notre boutique. Cependant, nous pouvons également créer différents modèles pour des produits spécifiques en tapant le nom du produit.

De plus, nous pouvons également créer différents modèles en fonction des catégories de produits. Ainsi, tous les produits de cette catégorie suivront ce modèle.

Après avoir sélectionné la condition souhaitée, cliquez sur le bouton Enregistrer. Et, voyez à quoi ça ressemble à l'avant.
Une fois que vous visitez les pages de produits, vous verrez que les nouveaux modèles ont été remplacés par le modèle WooCommerce par défaut.
Pour garder la longueur de l'article de blog aussi courte que possible, nous n'allons pas expliquer tous les processus de remplacement de modèle de ProductX. Cependant, nous avons des articles de blog dédiés sur toutes les pages disponibles. Ainsi, vous lisez les articles de blog suivants si vous rencontrez des difficultés lors de la création et de la personnalisation de modèles pour l'une des pages de votre boutique WooCoommerce.
Vous aimerez aussi lire :
Créer et personnaliser le modèle de page de boutique WooCommerce
Créer et personnaliser le modèle de page de produit WooCommerce
Créer et personnaliser le modèle de page de catégorie WooCommerce
Créer et personnaliser le modèle de page de panier WooCommerce
Créer et personnaliser le modèle de page de mon compte WooCommerce Modèle de page
Créer et personnaliser le modèle de page de remerciement WooCommerce
Conclusion
C'est tout de ce blog, j'espère que vous pouvez maintenant remplacer les modèles WooCommerce à l'aide du constructeur WooCommerce de ProductX. Commencez dès aujourd'hui avec ProductX pour rendre votre site visuellement attrayant et axé sur la conversion. Et n'oubliez pas de partager vos réflexions, vos commentaires et vos problèmes dans la section des commentaires.
Obtenez le tout premier constructeur WooCommerce pour Gutenberg . Obtenez ProductX maintenant .
Trucs et astuces incroyables pour augmenter les ventes de WooCommerce
Comment afficher et personnaliser les produits WooCommerce en vente
Comment créer un style de liste de publications WordPress ? [Guide de démonstration]
Comment convertir des blocs Gutenberg en code court