Stylisme de produits dérivés

WooCommerce

Créer des sites Woocommerce convaincants est devenu encore plus facile avec GeneratePress Premium 1.8.

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 personnalisées. Mais la grande majorité de ce que vous voyez est stylisé par le biais du Customizer.

Page de la boutique Woo

Caractéristiques du nouveau GP Premium 1.8

  • Display mini cart sub-menu
    Plus besoin de plugin avec ce magnifique min-cart affiché lorsque l’on survole l’icône du nav-cart
  • Menu Item Content
    Choix entre le montant et le nombre d’articles. J’ai choisi la seconde
  • Display cart panel on add to cart
    Replacer le standard WooCommerce add to cart notification avec un panneau coulissant génial.

Shop Page Produit – ajouter au panier ( bureau )

Utiliser un peu de CSS pour créer un effet de survol montrer / cacher. Cela utilise certains CSS que vous pouvez trouver dans le Customizer > Additional CSS. Ça ressemble à ça :

.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;
}

WooCommerce Sidebars – Common

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 & les marges. Ça ressemble à ça :

@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 la barre latérale des produits uniques

WooCommerce Produit unique

La page de produit unique a eu quelques sérieuxl amour appliqués avec GP Premium 1.8. A part les éléments de crochet en jeu et les 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 y a très peu d’utilisation de Woo CSS. Alors tout d’abord, découvrez toutes les nouvelles fonctionnalités dans Customizer > Layout > WooCommerce.

Nouvelles fonctions GP

  • Largeur de l’image du produit
    Régler à 65% car ce site devrait être entièrement consacré à l’image.
  • Ajouter laffichage au panneau de la carte sur le défilement
    Glisser dans l’affichage lorsque la page à ajouter au panier défile 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 faites à l’aide de crochets et du petit supplément CSS

Jump Link – Full Description

Using a Hook Element : Single Product Jump to Description we have added a simple jump link to take us from the summary to the full description. Voici le HTML pour cela. Il utilise la classe loud-link personnalisée sur son conteneur pour fournir le survol et la flèche. Il utilise également la classe GP smooth-scroll, avec cette option active dans le Customizer > General

<p class="loud-link">
	<a class="smooth-scroll" href="#tab-title-description">Full description</a>
</p>

Variations du style de fond

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 de partage social Jon Mathers GP pour afficher des 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, création d’un élément d’accroche : Woo Social Sharing J’ai simplement ajouté le code court et sélectionné l’accroche dédiée woocommerce_share dans la vaste liste d’accroches.

Barre latérale de produit unique

Les grandes images et la netteté sont des éléments importants de la conception. J’ai donc dû sacrifier un peu d’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 dans le cadre de GP et du Customizer. Voici comment cela se passe :

  • Supprimer la sidebar de la position par défaut
    Customizer > Mise en page > WooCommerce –> Single Product > Sidebar Layout : Content / No Sidebar
  • Ajouter le sidebar dans une nouvelle position
    Élément d’accroche : Woo Single Product Sidebar une fonction simple pour raccrocher la sidebar là où je le souhaitais.
  • 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 manière dont vous redimensionnez les images. Dans Customizer > WooCommerce > Images de produits, vous n’avez plus que deux choix.

  • Largeur de l’image principale
    Il s’agit de l’image utilisée sur le produit unique. Elle a été fixée à 800px pour correspondre à la largeur de la zone d’image d’un seul produit.
  • Largeur de la vignette
    Définir à 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. 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 tu t’attends à ce que Woo fasse de la magie pour toi, tu vas avoir des problèmes. Commencez par cette liste de contrôle pratique :

  • Rapport d’aspect
    Un aspect ratio cohérent permettra d’éliminer le désalignement des images dans votre grille ou les mouvements invisibles dans votre galerie de produits. Preferably i would stick with square images. 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, ils 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 lorsqu’elles sont redimensionnées en raison de fractions de pixels trop serrées.
  • Définir les dimensions de votre image
    Chargez quelques images surdimensionnées dans vos produits factices. Définir les tailles des images de produits du Customizer > WooCommerce > pour qu’elles remplissent le conteneur. Maintenant, utilisez l’inspecteur de navigateur pour voir la taille qu’ils sont affichés dans votre boutique et le 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 le mobile. Ce qui pourrait signifier qu’il a besoin d’une image plus large que celles des colonnes du bureau. Utilise ceci pour la taille de ta vignette. Ce n’est pas un gros problème que leur taille soit supérieure à celle dont vous avez besoin sur votre bureau.
  • Zoom
    Le zoom de la galerie de produits et la boîte à lumière 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.
Click to rate this post!
[Total: 0 Average: 0]
Item added to cart.
0 items - 0,00