WooCommerce est devenu encore plus simple avec GeneratePress Premium 1.8 . Ce ne serait pas un site Flint Skin, bien sûr, s’il n’y avait pas un peu de CSS et quelques fonctions de personnalisation. Mais la grande majorité de ce que vous voyez est stylisé par le biais du Customizer.
Page de la boutique Woo
Nouvelles fonctionnalités GP Premium 1.8
- Display mini cart sub-menu
Plus besoin de plugin avec cette magnifique mini-cart affichée au survol de l’icône nav cart - Menu Item Content
Choix entre le montant et le nombre d’articles. J’ai choisi le dernier - Display cart panel on add to cart
Replacing the standard WooCommerce add to cart notification with a great slide out panel.
Shop Page Produit - ajouter au panier ( bureau )
Utilisation d’un petit CSS pour créer un effet de survol visible / caché. Ceci utilise un certain CSS que vous pouvez trouver dans le Customizer > Additional CSS. Il ressemble à ceci :
.woocommerce ul.products li.product {
overflow: hidden;
}
.woocommerce ul.products li.product:hover .button {
-webkit-transform: translatey(0) !important;
transform: translatey(0) !important;
}
.woocommerce ul.products li.product .button {
font-size: 12px;
line-height: 15px;
padding: 8px 12px;
min-height: 15px;
font-weight: bold;
text-transform: uppercase;
}
@media (min-width: 1024px) {
.woocommerce ul.products li.product .button {
position: absolute;
top: 0;
-webkit-transform: translatey(-150%);
transform: translatey(-150%);
-webkit-transition: 0.35s;
transition: 0.35s;
margin-top: 10px;
margin-left: 10px !important;
}
}Les coins en rayon ont été ajoutés à l’aide du bouton CSS qui est couvert par le Guide de style.
Badge de vente
Pour compléter le positionnement et les coins arrondis de l’ajout au panier, j’ai utilisé ce CSS :
.woocommerce span.onsale {
position: absolute;
margin: 10px !important;
border-radius: 4px !important;
}Sidebars WooCommerce - Commune
Le site utilise la sidebar standard à droite, remplie de widgets WooCommerce. Il y a bien sûr un peu de CSS pour ajouter les bordures, ajuster le padding et les marges. Il ressemble à ceci :
@media (min-width: 768px) {
#right-sidebar {
border-left: 1px solid #d6d7d8;
}
#right-sidebar .widget {
margin-bottom: 0;
}
#right-sidebar aside:first-child {
padding-top: 0;
}
#right-sidebar aside:not(:first-child) {
border-top: 1px solid #d6d7d8;
}
}Veuillez consulter les notes séparées sur le sidebar du produit unique
WooCommerce Produit unique
La page de produit unique a eu un sérieux coup de cœur pour GP Premium 1.8. En dehors des éléments de crochet en jeu et des petits coins arrondis sur les boutons, tout le style est contrôlé depuis l’intérieur du Customizer. Freaking awesome. C’est grâce à ces nouvelles fonctionnalités qu’il n’y a que très peu de Woo CSS utilisé. Donc, tout d’abord, vérifiez toutes les nouvelles fonctionnalités dans Customizer > Layout > WooCommerce.
Nouvelles fonctionnalités GP
- Product Image area width
Définissez à 65% car ce site devrait être entièrement consacré à l’image. - Affichage du panneau Ajouter au panier sur le défilement
Glisser dans l’affichage lorsque la page Ajouter au panier est en cours de défilement pas garder cette fonction importante toujours en vue - Boutons d’affichage de la quantité
Les nouveaux champs + / - de la quantité ajoutent vraiment une touche de finesse
Ensuite, jetez un coup d’œil aux quelques personnalisations effectuées à l’aide de crochets et du petit supplément CSS
Jump Link - Full Description
En utilisant un élément d’accroche : Single Product Jump to Description nous avons ajouté un simple lien de saut pour nous faire passer du résumé à la description complète. Voici le code HTML pour cela. Il utilise la classe personnalisée loud-link sur son conteneur pour fournir le survol et la flèche. Il utilise également la classe GP smooth-scroll, avec cette option activée dans le Customizer > General
<p class="loud-link">
<a class="smooth-scroll" href="#tab-title-description">Full description</a>
</p>Variations de l’arrière-plan stylistique
Ajouter une petite couleur d’arrière-plan et un peu de padding pour faire ressortir les variations de produits requiert ce CSS :
.woocommerce.single-product div.product form.cart .variations {
background-color: #f2f3f4;
padding: 30px 40px;
}Partage social
Utiliser le plugin Jon Mathers GP Social Sharing pour afficher les liens de partage social sur Woo a été facile. Dans les paramètres GP Social Share, nous avons désactivé les crochets intégrés. Ensuite, la création d’un élément de crochet : Woo Social Sharing J’ai simplement ajouté le code court et sélectionné le crochet dédié woocommerce_share de la liste extensive de crochets.
Barre latérale de produit unique
Les grandes images et les résumés sont une partie importante de la conception. Cela signifiait que je devais sacrifier de l’espace sans perdre cette importante barre latérale. J’ai donc déplacé la sidebar sous le résumé. Cela a pris quelques étapes mais tout est réalisable avec GP et le Customizer. Voici comment cela a été fait :
- Remove sidebar from default position
Customizer > Layout > WooCommerce -> Single Product > Sidebar Layout : Content / No Sidebar - Ajouter le sidebar dans une nouvelle position
Élément Hook : Woo Single Product Sidebar une fonction simple pour accrocher le sidebar de nouveau là où je le voulais. - Ensuite, quelques CSS personnalisés pour s’assurer qu’il se positionne correctement sur le bureau
Single Product Sidebar CSS
@media (min-width: 768px) {
.single-product #right-sidebar {
float: right;
}
.single-product div.product .woocommerce-tabs,
.single-product div.product .related.products,
.single-product div.product .upsells.products {
width: 66%;
display: inline-block;
}
}Images de produits Woocommerce
Dans la dernière version de Woo, ils ont changé la façon dont vous redimensionnez les images. Dans Customizer > WooCommerce > Images de produits, vous n’avez plus que deux choix.
- Largeur de l’image principale
C’est l’image utilisée sur le produit unique. Elle a été définie à 800px pour correspondre à la largeur de la zone d’image du produit unique. - Largeur de la vignette
Réglez à 400px, ce qui est juste pour la mise en page à 2 colonnes. Vous pouvez être tenté de réduire ce nombre si vous utilisez plus de colonnes. Mais comme il n’y a pas d’option mobile, je la laisse à 400px pour qu’elle s’adapte bien à ces appareils mobiles de plus grande taille.
La grande chose à propos des nouvelles images de produits Woo est qu’elles génèrent automatiquement les tailles. Vous n’avez pas besoin de renouveler les vignettes et elles n’interfèrent pas avec les tailles normales de vos vignettes WP.
Conseil en image
Rendre vos images superbes dans Woo demande beaucoup de travail en amont. Si vous vous attendez à ce que Woo fasse de la magie pour vous, vous allez avoir des problèmes. Commencez par cette liste de contrôle pratique :
- Aspect Ratio
Un ratio d’aspect constant permettra d’éliminer le désalignement des images dans votre grille ou les mouvements invisibles dans votre galerie de produits. De préférence, je me contenterais d’images carrées. Si cela signifie les éditer dans votre éditeur de photos préféré et ajouter un peu d’espace blanc alors faites-le. - Taille des images
Woo vous permet de définir la vignette et l’image principale. Idéalement, elles devraient être également divisibles dans votre image originale, par exemple
Original : 1600px , Main : 800px , Thumbnail : 400px.
Ce que vous ne voulez pas, ce sont des images de taille bizarre où elles deviennent floues lors du redimensionnement à cause de fractions de pixels trop importantes. - Réglez les tailles de vos images
Chargez des images surdimensionnées dans vos produits factices. Définissez les tailles d’image du Customizer > WooCommerce > Produit pour qu’elles remplissent le conteneur. Maintenant, utilisez l’inspecteur de navigateur pour voir la taille qu’elles ont été affichées dans votre boutique et votre produit unique. Assurez-vous de le faire après avoir terminé la conception de votre mise en page. - Mobile First
Considérez que vous allez probablement utiliser une seule colonne pour mobile. Cela pourrait signifier qu’elle a besoin d’une image plus large que celles des colonnes de bureau. Utilisez ceci pour la taille de votre vignette. Ce n’est pas un gros problème que leur taille soit plus grande que celle dont vous avez besoin sur le bureau. - Zoom
Le zoom de la galerie de produits et le caisson lumineux utiliseront la plus grande image qu’il est possible d’avoir en main. Assurez-vous donc que votre image originale est plus grande que la largeur de l’image principale que vous avez définie.
