An overview of what we'll be covering in How to build a WooCommerce website in Oxygen Builder.

Summary

Dans cette vidéo, Kraka présente un tutoriel détaillé pour créer un site WooCommerce avec Oxygen Builder. Il explique comment personnaliser les pages produit, ajouter des effets de survol, un bouton d'achat rapide et des fonctionnalités telles que les pop-ups d'acheteurs en temps réel et les souhaits de produits. Kraka utilise principalement des plugins gratuits et quelques extraits de code pour personnaliser l'apparence du site et améliorer le SEO. Le tutoriel est découpé en plusieurs parties, allant de l'installation de WooCommerce à la personnalisation des pages d'archive, des produits, et du panier, pour offrir un site WooCommerce fonctionnel et esthétiquement plaisant.

Takeaways

• 😀 Utilisation d'Oxygen pour créer un site WooCommerce sans add-ons payants.
• 😀 Intégration de plugins gratuits pour ajouter des fonctionnalités comme les effets de survol et les boutons d'achat rapide.
• 😀 Personnalisation de la page produit unique, y compris les descriptions et les critiques, à l'aide de CSS et d'éléments Oxygen.
• 😀 Utilisation des shortcodes pour intégrer des fonctionnalités comme les listes de souhaits et les boutons 'Ajouter au panier'.
• 😀 Ajout d'un compte à rebours pour les ventes et personnalisation de son style.
• 😀 Optimisation du SEO des produits grâce à des noms descriptifs, comme le montre l'exemple d'Amazon.
• 😀 Introduction d'un plugin de modification du champ de paiement pour personnaliser la page de commande (ex. : déplacer l'adresse e-mail en haut).
• 😀 Création de pages d'archive de produits et pages de recherche avec une disposition similaire pour une meilleure expérience utilisateur.
• 😀 Amélioration de la fonctionnalité de produits récemment consultés, produits connexes et ventes croisées sur la page de panier.
• 😀 Développement d'une section FAQ sur les pages de produits où les utilisateurs peuvent poser des questions et recevoir des réponses.
• 😀 Utilisation de plugins gratuits pour ajouter des fonctionnalités comme des filtres de produits dans la barre latérale, avec des solutions pour l'interface utilisateur et l'expérience de filtrage.

Q & A

Quels plugins allez-vous utiliser pour construire le site WooCommerce avec Oxygen ?

Nous allons utiliser quelques plugins gratuits, tels que 'Checkout Field Editor', 'WPC Flycart for WooCommerce', 'WPC Smart Quickview for WooCommerce', 'Variation Swatches' et 'WP Elite'. Ces plugins nous aideront à ajouter des fonctionnalités comme les variations de produits, les boutons de panier rapide, et la personnalisation de la page de paiement, tout en évitant d'utiliser des plugins payants.

Comment personnaliser une page produit unique dans Oxygen pour WooCommerce ?

Pour personnaliser une page produit unique, il est essentiel de comprendre que la structure par défaut de WooCommerce dans Oxygen est limitée. Vous devez utiliser le modèle 'Repeater' et des éléments Oxygen pour personnaliser l'affichage des produits, y compris l'ajout de boutons 'Ajouter au panier', 'Acheter maintenant', et des sections comme les avis et les questions/réponses.

Comment ajouter un effet de survol pour afficher un panier ou un élément favori dans un produit ?

L'effet de survol est ajouté en utilisant les blocs de code personnalisés dans Oxygen. Par exemple, vous pouvez insérer un bloc de code pour afficher un bouton 'Ajouter au panier' ou un bouton de favori, et configurer les actions de survol pour qu'ils apparaissent uniquement lorsqu'un utilisateur passe sa souris sur l'élément.

Que faire si le nom du produit est trop long dans Oxygen ?

Pour gérer des noms de produits longs, vous pouvez utiliser du CSS personnalisé pour raccourcir l'affichage. Par exemple, vous pouvez utiliser 'text-overflow: ellipsis' pour afficher des noms plus courts avec une ellipse, tout en permettant aux utilisateurs de voir le nom complet en cliquant dessus.

Comment implémenter une fonctionnalité de vente en temps réel et un pop-up pour les acheteurs dans WooCommerce ?

La fonctionnalité de vente en temps réel peut être implémentée à l'aide d'un plugin tiers qui affiche les produits achetés récemment. Un pop-up peut être utilisé pour montrer les produits en vente, par exemple, en affichant des notifications telles que 'X a acheté ce produit'.

Comment ajouter des filtres dynamiques sur la page boutique de WooCommerce avec Oxygen ?

Les filtres dynamiques peuvent être ajoutés en utilisant des éléments Oxygen comme le 'Filter Products' qui permet de filtrer les produits par prix, catégorie ou avis. Vous pouvez aussi utiliser des plugins tiers pour améliorer les filtres, mais l'option par défaut d'Oxygen fonctionne assez bien pour des besoins de base.

Quel est le rôle du plugin 'Variation Swatches' pour WooCommerce dans la construction de la boutique ?

Le plugin 'Variation Swatches' permet de remplacer les menus déroulants par des affichages visuels des variations de produits, comme des couleurs ou des tailles. Cela améliore l'expérience utilisateur en permettant de sélectionner plus facilement les options disponibles sans devoir ouvrir un menu déroulant.

Comment personnaliser la page du panier dans WooCommerce avec Oxygen ?

La personnalisation de la page du panier dans Oxygen implique l'ajout de sections personnalisées comme des ventes croisées, un aperçu du panier en off-canvas, et l'affichage du nombre d'articles dans le panier avec un compteur automatique. Vous pouvez également personnaliser l'interface d'affichage des produits dans le panier.

Comment optimiser les images et les noms de produits pour le SEO dans WooCommerce ?

Pour optimiser le SEO dans WooCommerce, il est important de donner des noms de produits descriptifs, incluant des détails comme la couleur ou la taille. De plus, il est essentiel d'optimiser la taille des images pour qu'elles se chargent rapidement tout en maintenant une bonne qualité visuelle, ce qui peut être réalisé avec des outils de compression d'images et des balises alt appropriées.

Est-il possible de personnaliser le processus de commande dans WooCommerce avec Oxygen ?

Oui, le processus de commande peut être personnalisé avec le plugin 'Checkout Field Editor'. Cela permet de modifier l'ordre des champs, ajouter des champs personnalisés et ajuster l'apparence de la page de paiement, comme le fait de rendre la page de paiement plus compacte ou d'afficher certains champs en premier.