Créer de superbes pages de boutique WooCommerce avec Elementor : un guide détaillé

WooCommerce est l'un des plugins de commerce électronique les plus populaires pour WordPress, et Elementor est un puissant constructeur de pages. En combinant cesles deux côtés combinésvous pouvez facilement créer une page de boutique en ligne visuellement étonnante et puissante. Cet article explique en détail comment utiliser Premium Addons a fait mouche Elementor WooCommerce Des widgets de listes de produits pour construire et optimiser les pages de votre boutique WooCommerce.

I. Préparatifs préliminaires

Avant de commencer, assurez-vous d'avoir effectué les préparatifs suivants :

1. Installez et activez le plugin WooCommerce.WooCommerce : WooCommerce est le plugin de commerce électronique le plus utilisé sur WordPress. Assurez-vous qu'il est installé et activé afin que vous puissiez ajouter des produits et configurer votre boutique.
2. Installer et activer le plugin Elementor Page BuilderElementor : Elementor facilite la création de mises en page par glisser-déposer et est l'un des constructeurs de pages les plus populaires.
3. Installer et activer le plug-in Premium Addons: Premium Addons fournit à Elementor un certain nombre d'extensions, dont le widget WooCommerce Product Listing, qui est essentiel pour créer des pages de boutique de qualité professionnelle.
4. commencer à utiliser Premium Addons Pro(optionnel)Si vous souhaitez utiliserApparences et fonctionnalités avancéesVeuillez installer et activer le plugin Premium Addons Pro. Cela vous permettra d'obtenir plus d'options de personnalisation pour rendre votre page de boutique plus unique et plus professionnelle.

Créer des listes de produits WooCommerce avec Elementor

Le widget WooCommerce Product Listing d'Elementor offre aux utilisateurs plusieurs façons d'afficher les produits, qui peuvent être sélectionnées en fonction des besoins.Grille, rotation ou grille média.

1. disposition de la grille

Les grilles de présentation sont un moyen classique d'afficher les produits et sont particulièrement utiles pour les pages de boutique et les pages de catégories. Pour utiliser une grille dans Elementor, vous pouvez suivre les étapes suivantes :

• Sélection d'une grilleDans les paramètres du widget, sélectionnez la mise en page "Grille". Vous pouvez définir le nombre de produits affichés par ligne et le nombre total de produits par page.

• Réglage de la taille de l'imageLes images de produits sont redimensionnées pour s'assurer qu'elles s'affichent clairement et joliment dans la grille.

• Ajouter un bouton Load MoreSi vous avez un grand nombre de produits, vous pouvez activer le bouton "Charger plus" afin que les utilisateurs puissent parcourir les produits page par page sans avoir à recharger la page.

2. le schéma de rotation

La mise en page rotative convient à l'affichage de produits sélectionnés sur la page d'accueil ou sur des pages de produits spécifiques. Cette mise en page permet d'économiser de l'espace et d'attirer l'attention des utilisateurs. La méthode de configuration est la suivante :

• Activer l'option de rotationPour ce faire, vous devez sélectionner la disposition "Rotation" dans les paramètres du widget. Vous pouvez définir laNombre de produits, vitesse de défilement et options de lecture automatique.

• Flèches et points personnalisés: dans "Navigation"Des flèches et des points de navigation peuvent être ajoutés à la rotation et leur couleur et leur position peuvent être définies pour garantir leur cohérence avec le style général de la page.

• Autoplay et boucleVous pouvez choisir d'activer ou non la lecture automatique et de laisser la rotation se faire en boucle indéfiniment, ce qui peut améliorer l'expérience de navigation de l'utilisateur.

3. disposition de la grille des médias

à travers (une brèche)conventionnel (armes)dans les réglages.Grille des médiasL'agencement est parfait pourAfficher des images de produits de différentes hauteursqui présente les produits de manière dynamique. Cette mise en page est particulièrement adaptée aux pages des boutiques de mode et d'art.

• Choix d'un agencement en maçonnerieDans les paramètres du widget, sélectionnez "Grille des médias"Le système ajuste automatiquement la position et la taille des images de produits pour créer un effet visuel harmonieux.
• Réglage de la méthode d'adaptation de l'imageVous pouvez choisir la manière dont l'image s'adapte à la mise en page, par exemple le recadrage, le zoom, etc. afin de garantir un affichage optimal de l'image.

III. des options de personnalisation détaillées

Avec Elementor et les modules complémentaires Premium, il est possible de personnaliser le site en profondeur. Produits WooCommerceL'apparence et la fonctionnalité de la liste.

1. les options d'affichage des produits

Elementor permet de personnaliser chaque aspect de l'affichage des produits, y compris les images, les titres, les prix, les évaluations et les boutons d'ajout au panier :

• Images de produits personnaliséesChoisissez le style de survol, le type de bordure et l'effet d'ombre portée pour les images de produits afin d'accroître l'interactivité de la page.

• Titre et prix du produitLes prix et les titres : Vous pouvez ajuster la police, la couleur et la position du titre et du prix pour qu'ils ressortent mieux sur la page.

• Bouton d'ajout au panierLes boutons peuvent être personnalisés en fonction du style et de la position des boutons afin de les rendre plus conformes au style général de la conception.

• Alignement :Aligner les détails du produit à gauche, au centre ou à droite.

2. fonction de recherche rapide

La fonction d'affichage rapide améliore l'expérience de l'utilisateur en lui permettant de consulter les détails du produit sans quitter la page en cours :

• Activer la recherche rapideDans les paramètres du widget, activez la fonction d'affichage rapide et choisissez la méthode de déclenchement (par exemple, cliquez sur une image ou un bouton).
• Personnalisation de la fenêtre d'affichage rapide: Définissez la largeur, la couleur d'arrière-plan, la bordure et les effets d'ombre de la fenêtre d'affichage rapide afin de la rendre cohérente avec le reste de la page.
• Masquer les éléments inutiles: Masquer certains éléments de la fenêtre d'affichage rapide, tels que les classements, les prix ou les descriptions, si nécessaire pour une interface plus propre.

3. les offres spéciales et les rubans en rupture de stock

Les rubans sont un moyen efficace d'attirer l'attention de l'utilisateur sur un produit spécifique, tel qu'une offre spéciale ou une rupture de stock :

• Activation du ruban spécialRubans : Vous pouvez ajouter des rubans spéciaux aux produits en vente et personnaliser leur texte, leur couleur et leur position.
• Activation des rubans en rupture de stockLorsque certains produits sont en rupture de stock, des rubans de rupture de stock peuvent être affichés afin que les utilisateurs puissent s'en rendre compte d'un seul coup d'œil.

IV. requêtes avancées et options de pagination

Le widget WooCommerce Product Listing d'Elementor prend également en charge des fonctions avancées de recherche et de pagination pour un affichage plus flexible des produits.

fenêtre à onglets (dans un navigateur web, etc.)

La fonction de pagination permet d'afficher un grand nombre de produits sur plusieurs pages afin d'éviter un chargement trop lent des pages :

• Activer la radiomessagerieLes boutons de pagination peuvent être sélectionnés en fonction de leur type (numéro ou flèche) et de l'alignement des boutons de pagination.

V. Personnalisation avancée avec Elementor Pro

souhaitez personnaliser davantage la liste de produits de WooCommerce.Elementor Pro répondre en chantant Premium Addons Pro Des options plus avancées sont proposées :

• Utilisation d'habillages avancésPremium Addons Pro offre une large gamme d'habillages premium, votre liste de produits est plus personnalisée.
• CSS personnaliséSi les options par défaut ne répondent pas à vos besoins, vous pouvez également utiliser des feuilles de style CSS personnalisées pour styliser les éléments de la page.
• Conditions globales d'affichageEn conjonction avec les conditions d'affichage de WooCommerce, le contenu peut être affiché ou caché dynamiquement en fonction du comportement d'achat de l'utilisateur (par exemple, le nombre de produits dans le panier).

VI. résumé

Avec Elementor et les modules complémentaires Premium, il est facile de créer une page de boutique WooCommerce puissante et esthétique. Que vous utilisiez des mises en page en grille, en rotation ou en maçonnerie, elles peuvent être hautement personnalisées pour répondre à vos besoins. L'expérience utilisateur et les taux de conversion peuvent être améliorés de manière significative en utilisant les requêtes avancées, la pagination et les fonctions d'affichage rapide.

Lorsque vous créez des pages de boutique WooCommerce, n'oubliez pas de tirer parti des fonctionnalités avancées offertes par Elementor Pro, telles que le CSS personnalisé et les conditions d'affichage globales, afin d'optimiser davantage les résultats de la page.