Améliorez l’expérience d’achat : Personnalisez le sélecteur de tri dans WooCommerce

Découvrez comment personnaliser le formulaire de tri dans WooCommerce pour offrir une expérience d’achat sur mesure. Mettez en valeur les options de tri préférées et fidélisez vos clients dès aujourd’hui !

Lorsque vous gérez une boutique en ligne, offrir une expérience d’achat fluide et agréable à vos clients est essentiel pour les fidéliser et les inciter à revenir. WooCommerce propose un formulaire de tri par défaut pour aider vos clients à trouver facilement les produits qu’ils recherchent. Cependant, si vous souhaitez apporter une touche personnelle à votre boutique et mettre en valeur certaines options de tri, la personnalisation du formulaire de tri est la solution idéale.

La fonction PHP de personnalisation du formulaire de tri :

Personnalisez le formulaire de tri (woocommerce-ordering) dans votre boutique WooCommerce grâce à une fonction PHP simple dans WordPress. En utilisant un filtre, vous pouvez modifier les options du sélecteur de tri et définir « popularité » comme choix par défaut. Voici comment vous pouvez faire cela :

function td_woocommerce_catalog_orderby($orderby_options)
{
    // Supprimez l'option "Tri par défaut" si vous ne souhaitez pas l'afficher
    unset($orderby_options['menu_order']);

    // Définissez "popularity" comme option de tri par défaut
    $orderby_options['popularity'] = __('Tri par popularité', 'text-domain');

    return $orderby_options;
}
add_filter('woocommerce_catalog_orderby', 'td_woocommerce_catalog_orderby');

En utilisant cette fonction, vous pouvez personnaliser les options du sélecteur de tri dans WooCommerce et définir la popularité comme option par défaut.

Si vous souhaitez utiliser le prix le plus cher ou le moins ou la date voici les autres possibilités :

$orderby_options = array(
        'popularity' => __('Tri par popularité', 'text-domain'),
        'date'       => __('Tri du plus récent au plus ancien', 'text-domain'),
        'price'      => __('Tri par tarif croissant', 'text-domain'),
        'price-desc' => __('Tri par tarif décroissant', 'text-domain'),
    );

Personnaliser visuellement le bouton de tri WooCommerce

Si vous souhaitez modifier le rendu graphique du bouton, vous pouvez utiliser le code CSS suivant :

form.woocommerce-ordering select{
    border-color: #0a0a0a;
    border-radius: 5px;
    color: #fff;
    background: #0a0a0a;
}
form.woocommerce-ordering select:hover{
	background: #8F63B0;
	border-color:  #8F63B0;
}

Besoin d’un spécialiste Woo Commerce pour votre projet, vous pouvez me contacter