Share
Ce que vous allez créerPour ceux qui sont familiarisés avec WooCommerce, vous pouvez également connaître sa fonctionnalité de vente flash. Ceci est principalement utilisé pour afficher quand un article est en vente.
Dans ce didacticiel, nous allons voir comment personnaliser et améliorer l'affichage flash de vente de WooCommerce afin d'afficher le pourcentage de remise effectif et de changer la couleur de l'étiquette en fonction de ce pourcentage..
Le flash de vente de WooCommerce est visualisé dans les archives et sur des pages simples pour les produits en vente, c’est-à-dire les produits dont le prix de vente est inférieur au prix normal..
Dans le système actuel, les utilisateurs ne peuvent pas percevoir la Dimension-ou la qualité de la remise.
Par exemple, un rabais de 70% est plus intéressant qu'un rabais de 15%, mais ils sont tous deux affichés par WooCommerce avec un simple vente flash sur l'image du produit. Afin de résoudre ce problème, nous allons modifier l’algorithme qui contrôle la vente-flash afin que son contenu (Vente) soit écrasé par le pourcentage de remise effective..
Le fichier qui génère le sale-flash se trouve dans le dossier suivant:
votre-site / wp-content / plugns / woocommerce / templates / loop / sale-flash.php
Habituellement, ce n'est pas une bonne idée de changer les fichiers du plugin car toutes les modifications seront perdues lors de la première mise à jour et la désactivation des mises à jour n'est pas une option..
Heureusement, nous pouvons apporter autant de modifications que nous le souhaitons sur les modèles WooCommerce sans compromettre l'intégrité du plug-in, simplement en copiant le fichier dans un sous-dossier de notre thème que nous appellerons. woocommerce. Dans notre cas, nous copions le sale-flash.phpfichier, qui se trouve dans:
votre-site / wp-content / yourtheme / woocommerce / loop / sale-flash.php
Chaque fichier du dossier WooCommerce est prioritaire par rapport aux fichiers de modèle d'origine du plug-in. De cette façon, nous pouvons être sûrs qu'en mettant à jour WooCommerce, nous ne perdons aucun de nos changements..
Notez que si vous utilisez un thème enfant, le fichier doit être copié dans le même sous-dossier du thème enfant..
Notez également que si votre thème a déjà un fichier yourtheme / woocommerce / loop / sale-flash.php il est alors très probable que cela modifie déjà le comportement initial du flash vente. Dans ce cas, il y a deux solutions:
Jetons un coup d'oeil au sale-flash.php fichier:
Accentsconagua
is_on_sale ()):?> '. __ ('Vente!', 'Woocommerce'). '', $ post, $ product); ?> Le code est très simple: il génère un envergure balise avec le texte “VENTE”Chaque fois qu'un objet est en vente. Tout ce que nous avons à faire est d’apporter les modifications suivantes au code:
is_in_stock ()) return; $ sale_price = get_post_meta ($ product-> id, '_price', true); $ regular_price = get_post_meta ($ product-> id, '_regular_price', true); if (empty ($ regular_price)) // alors il s'agit d'une variable product $ disponible_variations = $ product-> get_available_variations (); $ variation_id = $ variations_versibles [0] ['variation_id']; $ variation = new WC_Product_Variation ($ variation_id); $ regular_price = $ variation -> regular_price; $ sale_price = $ variation -> sale_price; $ sale = ceil ((($ regular_price - $ sale_price) / $ regular_price) * 100); ?> $ sale_price):?> -'. $ vente. '%', $ post, $ product); ?>
La première chose à faire est de calculer le rabais, et pour ce faire, nous aurons besoin du Prix habituel et le Prix de vente. Pour les produits simples et les produits groupés, nous pouvons obtenir ces informations en utilisant simplement les deux champs méta: _prix et _prix habituel(voir lignes 5 et 6).
Si le obtenu Prix habituel est vide, alors nous parlons d'un produit variable, et dans ce cas, nous devrons procéder comme suit:
À ce stade, il suffit d’appliquer une formule simple pour calculer le rabais, en utilisant le Prix habituel et le Prix de vente. Pour simplifier, nous pourrions éviter d’utiliser des décimales en arrondissant le nombre au nombre entier le plus proche à l’aide de la touche ceil (num) fonction, comme dans l'exemple que je viens de vous montrer, ou en tronquant le nombre le plus proche en utilisant le étage (num) une fonction.
Nous pouvons ajouter de la couleur à notre solution en utilisant une échelle chromatique pour représenter le pourcentage de remise. Le vert est 0% et le rouge est 100%.
Les deux couleurs ont les couleurs RVB suivantescodes:
Avec ces formules simples, nous pouvons ajouter au canal rouge et prendre du canal vert.
Le canal bleu reste inchangé; ce sera toujours zéro.
R = (255 * vente) / 100G = (255 * (100 - vente)) / 100B = 0Une fois que nous avons les valeurs rouge et verte, nous pouvons modifier le vente flash fond en ajoutant la règle directement à la envergure étiquette.
Le code complet est le suivant:
is_in_stock ()) return; $ sale_price = get_post_meta ($ product-> id, '_price', true); $ regular_price = get_post_meta ($ product-> id, '_regular_price', true); if (empty ($ regular_price)) // alors il s'agit d'une variable product $ disponible_variations = $ product-> get_available_variations (); $ variation_id = $ variations_versibles [0] ['variation_id']; $ variation = new WC_Product_Variation ($ variation_id); $ regular_price = $ variation -> regular_price; $ sale_price = $ variation -> sale_price; $ sale = ceil ((($ regular_price - $ sale_price) / $ regular_price) * 100); ?> $ sale_price):?> -'. $ vente. '%', $ post, $ product); ?>
Et le résultat:
Pour ceux qui ont suivi, vous vous demandez peut-être pourquoi nous avons défini la fond: aucun avant de régler le Couleur de fond?
Dans ce cas particulier, la feuille de style avait une règle pour le Contextepropriété qui a toujours eu la priorité sur la Couleur de fond. La bonne façon de procéder aurait été de modifier la feuille de style et d’écraser ou d’annuler la règle qui définit l’arrière-plan de la vente flash.
De manière générale, vous devez sélectionner les propriétés et les règles de style que vous souhaitez remplacer ou modifier avec des outils tels que Firebug. Une fois que vous avez compris où et quoi changer, vous devez essayer de ne pas utiliser de styles en ligne. Au lieu de cela, essayez d'utiliser une feuille de style externe.
Dans ce cas, nous avons une exception à la règle. Le RVBle code est calculé à l'aide d'un algorithme très simple et vous pouvez toujours changer l'algorithme en modifiant quelques lignes de code PHP au lieu de changer des centaines de CSSDes classes.
À ce stade, la personnalisation du flash de vente est terminée. Nous avons modifié le modèle qui visualise l'étiquette correspondante..
Plutôt que de modifier le fichier original qui se trouve dans le dossier du plugin, nous avons utilisé une copie dans notre dossier de thèmes afin de protéger les modifications que nous venons d’apporter en cas de mise à jour du plugin..
En règle générale, cette règle est valable pour tous les fichiers du dossier de modèles du plug-in WooCommerce. J'espère que vous avez trouvé ce tutoriel utile, non seulement pour améliorer le comportement de sale-flash, mais également pour mieux comprendre le fonctionnement de certains mécanismes de WooCommerce..
