WooCommerce est devenu encore plus simple avec GeneratePress Premium 1.8 . Ce ne serait pas un site Flint Skin, bien s\u00fbr, s’il n’y avait pas un peu de CSS et quelques fonctions de personnalisation. Mais la grande majorit\u00e9 de ce que vous voyez est stylis\u00e9 par le biais du Customizer. <\/p> \n \n
Utilisation d’un petit CSS pour cr\u00e9er un effet de survol visible \/ cach\u00e9. Ceci utilise un certain CSS que vous pouvez trouver dans le Customizer > Additional CSS. Il ressemble \u00e0 ceci : <\/p> \n\r\n
.woocommerce ul.products li.product {\r\n overflow: hidden;\r\n}\r\n\r\n.woocommerce ul.products li.product:hover .button {\r\n -webkit-transform: translatey(0) !important;\r\n transform: translatey(0) !important;\r\n}\r\n\r\n.woocommerce ul.products li.product .button {\r\n font-size: 12px;\r\n line-height: 15px;\r\n padding: 8px 12px;\r\n min-height: 15px;\r\n font-weight: bold;\r\n text-transform: uppercase;\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n .woocommerce ul.products li.product .button {\r\n position: absolute;\r\n top: 0;\r\n -webkit-transform: translatey(-150%);\r\n transform: translatey(-150%);\r\n -webkit-transition: 0.35s;\r\n transition: 0.35s;\r\n margin-top: 10px;\r\n margin-left: 10px !important;\r\n }\r\n}<\/code><\/pre>\r\n
\nLes coins en rayon ont \u00e9t\u00e9 ajout\u00e9s \u00e0 l’aide du bouton CSS qui est couvert par le Guide de style.<\/p>
\n
\n
Badge de vente<\/h3>
\n
\n
Pour compl\u00e9ter le positionnement et les coins arrondis de l’ajout au panier, j’ai utilis\u00e9 ce CSS :<\/p>
\n\r\n
.woocommerce span.onsale {\r\n position: absolute;\r\n margin: 10px !important;\r\n border-radius: 4px !important;\r\n}<\/code><\/pre>\r\n
\nSidebars WooCommerce - Commune<\/h2>
\n
\n
Le site utilise la sidebar standard \u00e0 droite, remplie de widgets WooCommerce. Il y a bien s\u00fbr un peu de CSS pour ajouter les bordures, ajuster le padding et les marges. Il ressemble \u00e0 ceci : <\/p>
\n\r\n
@media (min-width: 768px) {\r\n #right-sidebar {\r\n border-left: 1px solid #d6d7d8;\r\n }\r\n\r\n #right-sidebar .widget {\r\n margin-bottom: 0;\r\n }\r\n\r\n #right-sidebar aside:first-child {\r\n padding-top: 0;\r\n }\r\n\r\n #right-sidebar aside:not(:first-child) {\r\n border-top: 1px solid #d6d7d8;\r\n }\r\n}<\/code><\/pre>\r\n
\nVeuillez consulter les notes s\u00e9par\u00e9es sur le sidebar du produit unique<\/p>
\n
\n
WooCommerce Produit unique<\/h2>
\n
\n
La page de produit unique a eu un s\u00e9rieux coup de c\u0153ur pour GP Premium 1.8. En dehors des \u00e9l\u00e9ments de crochet en jeu et des petits coins arrondis sur les boutons, tout le style est contr\u00f4l\u00e9 depuis l’int\u00e9rieur du Customizer. Freaking awesome. C’est gr\u00e2ce \u00e0 ces nouvelles fonctionnalit\u00e9s qu’il n’y a que tr\u00e8s peu de Woo CSS utilis\u00e9. Donc, tout d’abord, v\u00e9rifiez toutes les nouvelles fonctionnalit\u00e9s dans Customizer > Layout > WooCommerce. <\/p>
\n
\n
Nouvelles fonctionnalit\u00e9s GP<\/h3>
\n
\n- Product <\/strong>Image area width<\/strong>
- Affichage du panneau Ajouter au panier sur le d\u00e9filement<\/strong>
- Boutons d’affichage de la quantit\u00e9<\/strong>
Ensuite, jetez un coup d’\u0153il aux quelques personnalisations effectu\u00e9es \u00e0 l’aide de crochets et du petit suppl\u00e9ment CSS<\/p>
\n
\n
Jump Link - Full Description<\/h3>
\n
\n
En utilisant un \u00e9l\u00e9ment d’accroche : Single Product Jump to Description<\/strong> nous avons ajout\u00e9 un simple lien de saut pour nous faire passer du r\u00e9sum\u00e9 \u00e0 la description compl\u00e8te. Voici le code HTML pour cela. Il utilise la classe personnalis\u00e9e loud-link<\/strong> sur son conteneur pour fournir le survol et la fl\u00e8che. Il utilise \u00e9galement la classe GP smooth-scroll<\/strong>, avec cette option activ\u00e9e dans le Customizer > General <\/p>
\n\r\n<p class=\"loud-link\">\r\n\t<a class=\"smooth-scroll\" href=\"#tab-title-description\">Full description<\/a>\r\n<\/p><\/code><\/pre>\r\n
\nVariations de l’arri\u00e8re-plan stylistique<\/h3>
\n
\n
Ajouter une petite couleur d’arri\u00e8re-plan et un peu de padding pour faire ressortir les variations de produits requiert ce CSS :<\/p>
\n\r\n
.woocommerce.single-product div.product form.cart .variations {\r\n background-color: #f2f3f4;\r\n padding: 30px 40px;\r\n}<\/code><\/pre>\r\n
\nPartage social<\/h3>
\n
\n
Utiliser le plugin Jon Mathers GP Social Sharing pour afficher les liens de partage social sur Woo a \u00e9t\u00e9 facile. Dans les param\u00e8tres GP Social Share, nous avons d\u00e9sactiv\u00e9 les crochets int\u00e9gr\u00e9s. Ensuite, la cr\u00e9ation d’un \u00e9l\u00e9ment de crochet : Woo Social Sharing<\/strong> J’ai simplement ajout\u00e9 le code court et s\u00e9lectionn\u00e9 le crochet d\u00e9di\u00e9 woocommerce_share<\/strong> de la liste extensive de crochets. <\/p>
\n
\nBarre lat\u00e9rale de produit unique<\/h3>
\n
\n
Les grandes images et les r\u00e9sum\u00e9s sont une partie importante de la conception. Cela signifiait que je devais sacrifier de l’espace sans perdre cette importante barre lat\u00e9rale. J’ai donc d\u00e9plac\u00e9 la sidebar sous le r\u00e9sum\u00e9. Cela a pris quelques \u00e9tapes mais tout est r\u00e9alisable avec GP et le Customizer. Voici comment cela a \u00e9t\u00e9 fait : <\/p>
\n
\n
- Remove sidebar from default position
- Ajouter le sidebar dans une nouvelle position
- Ensuite, quelques CSS personnalis\u00e9s pour s’assurer qu’il se positionne correctement sur le bureau<\/li><\/ul>
\n
\n
Single Product Sidebar CSS<\/h4>
\n\r\n@media (min-width: 768px) {\r\n .single-product #right-sidebar {\r\n float: right;\r\n }\r\n\r\n .single-product div.product .woocommerce-tabs,\r\n .single-product div.product .related.products,\r\n .single-product div.product .upsells.products {\r\n width: 66%;\r\n display: inline-block;\r\n }\r\n}<\/code><\/pre>\r\n
\nImages de produits Woocommerce<\/h2>
\n
\n
Dans la derni\u00e8re version de Woo, ils ont chang\u00e9 la fa\u00e7on dont vous redimensionnez les images. Dans Customizer > WooCommerce > Images de produits, vous n’avez plus que deux choix. <\/p>
\n
\n
- Largeur de l’image principale<\/strong>
- Largeur de la vignette<\/strong>
La grande chose \u00e0 propos des nouvelles images de produits Woo est qu’elles g\u00e9n\u00e8rent automatiquement les tailles. Vous n’avez pas besoin de renouveler les vignettes et elles n’interf\u00e8rent pas avec les tailles normales de vos vignettes WP. <\/p>
\n
\n
Conseil en image<\/h3>
\n
\n
Rendre vos images superbes dans Woo demande beaucoup de travail en amont. Si vous vous attendez \u00e0 ce que Woo fasse de la magie pour vous, vous allez avoir des probl\u00e8mes. Commencez par cette liste de contr\u00f4le pratique : <\/p>
\n
\n
- Aspect Ratio<\/strong>
- Taille des images<\/strong>
- R\u00e9glez les tailles de vos images<\/strong>
- Mobile First<\/strong>
- Zoom<\/strong>
Cr\u00e9er des sites Woocommerce convaincants est devenu encore plus facile avec GeneratePress Premium 1.8.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[71],"tags":[],"class_list":["post-5599","post","type-post","status-publish","format-standard","hentry","category-stylisme-des-produits-derives","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50"],"_links":{"self":[{"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/posts\/5599","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/comments?post=5599"}],"version-history":[{"count":1,"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/posts\/5599\/revisions"}],"predecessor-version":[{"id":5600,"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/posts\/5599\/revisions\/5600"}],"wp:attachment":[{"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/media?parent=5599"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/categories?post=5599"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vla-bag.ch\/fr\/wp-json\/wp\/v2\/tags?post=5599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}