Un produit phare est destiné à être mis en avant sur les pages de recherche ou de catégories de votre boutique en ligne. Mais si certains plugins ou extensions permettent de positionner ces produits en début de liste, il est souvent nécessaire de leur fournir un élément de design particulier afin d’inciter les clients à les acheter en priorité. Ce tuto Woocommerce vous montre comment créer un bandeau spécial pour vos produits phares.
Avec Woocommerce, tout est souvent une question d’actions et de filtres (les hooks). Nous allons créer un bandeau « Nouveau » pour les produits mis en avant.
Le template du contenu de produit de Woocommerce
Une petite analyse du fichier content-product.php permet de repérer l’inclusion de l’image du produit sur les pages d’archives. On y trouve notamment le code suivant :
/**
* woocommerce_before_shop_loop_item_title hook.
*
* @hooked woocommerce_show_product_loop_sale_flash - 10
* @hooked woocommerce_template_loop_product_thumbnail - 10
*/
do_action( 'woocommerce_before_shop_loop_item_title' );
Nous allons faire plus simple et nous servir de cette action « woocommerce_before_shop_loop_item_title » au lieu de copier ce template dans notre thème pour le surcharger.
Nous pourrons utiliser la priorité de nos fonctions de rappel (le callback) pour ajouter de nouveaux éléments HTML aux balises initiales et nous terminerons par une touche de style CSS pour finaliser notre bandeau.
Un conteneur pour le bandeau du produit phare Woocommerce
Nous allons devoir superposer notre bandeau au-dessus de la vignette de notre produit phare. Pour cela, nous ajoutons une <div> pour l’envelopper et y positionner notre nouvel élément HTML.
Le template de contenu du produit nous montre que le callback « woocommerce_template_loop_product_thumbnail » est enregistré avec une priorité 10, nous pouvons donc ajouter notre balise à l’aide du même hook en priorité 9 :
**/
* Catalog Thumbnail Wrapper
*
*/
function jst_woocommerce_shop_loop_item_thumbnail_wrapper_start()
{
echo '<div class="attachment-shop_catalog-wrapper">';
}
add_action('woocommerce_before_shop_loop_item_title', 'jst_woocommerce_shop_loop_item_thumbnail_wrapper_start', 9 );
Juste après l’insertion de l’image, nous pouvons tester notre produit pour savoir s’il s’agit d’un produit phare sur la même action en utilisant la priorité 11. Si notre produit Woocommerce est bien mis en avant, nous ajoutons le balisage HTML de notre bandeau.
Votre devis en 48 H chrono !
Demandez à être rappelé !
Nous préciserons ensemble votre projet
de vive voix
L’objet Product de Woocommerce nous procure à nouveau une méthode assez simple pour réaliser ce teste : is_featured(), nous devrons juste récupérer l’instance globale du produit avec global $product pour accéder à cette fonction :
/**
* Ajoute une étiquette "Nouveau" au produit de la page d'archives archive
*/
function jst_woocommerce_show_product_featured()
{
global $product;
if( $product->is_featured() )
{
echo '<span class="featured-new">Nouveau !</span>';
}
}
add_action('woocommerce_before_shop_loop_item_title', 'jst_woocommerce_show_product_featured', 11 );
Enfin nous pouvons refermer la balise
qui nous sert d’enveloppe en utilisant de « hook » sur la propriété 12 :
function jst_woocommerce_shop_loop_item_thumbnail_wrapper_end()
{
echo '</div><!-- .jst-shop-loop-item-thumbnail-wrapper -->';
}
add_action('woocommerce_before_shop_loop_item_title', 'jst_woocommerce_shop_loop_item_thumbnail_wrapper_end', 12 );
Notre bandeau HTML de produit mis en avant Woocommerce est presque complet, mais il a quand même besoin de se voir ajouter quelques règles CSS pour être plus attractif.
Des styles CSS pour un bandeau plus incitatif
10 règles CSS très simples suffisent à styliser notre bandeau de produit Woocommerce. Nous n’allons pas ici approfondir énormément les champs possibles, mais ces quelques lignes de code vous montrent à quel point il est simple de créer un bandeau CSS :
.attachment-shop_catalog-wrapper {
position: relative;
}
.attachment-shop_catalog {
vertical-align: middle;
}
.featured-new {
position: absolute;
left: 0;
top: 0;
padding: .375em;
width: 100%;
text-align: center;
color: #d4b41c;
background: rgba(0,0,0,.75);
}
Voilà, au moins notre bandeau de produit phare ressemble à quelque chose. Vous savez maintenant le réaliser, à vous de laisser libre cours à votre imagination et le transformer, en fonction de vos besoins, en bouton ou en toute autre chose.
À bientôt ! 😉
Parlons directement de votre projet
06.12.06.36.06
[/jst_a]