Share
Wat je gaat creërenVoor degenen die bekend zijn met WooCommerce, bent u mogelijk ook op de hoogte van de verkoopflitsfunctionaliteit. Dit wordt voornamelijk gebruikt om weer te geven wanneer een artikel in de uitverkoop is.
In deze zelfstudie gaan we bekijken hoe we de verkoopflitsdisplay van WooCommerce kunnen aanpassen en verbeteren om het effectieve kortingspercentage weer te geven en de kleur van het label te wijzigen op basis van het percentage.
De verkoopflits van WooCommerce wordt gevisualiseerd in de archieven en enkele pagina's voor de verkoopproducten, d.w.z. de producten met een verkoopprijs lager dan de normale prijs.
In het huidige systeem kunnen gebruikers de Dimensie-of de kwaliteit van de korting.
Een korting van 70% is bijvoorbeeld aantrekkelijker dan een 15% korting, maar beide worden door WooCommerce weergegeven met een eenvoudige sale-flash op de productafbeelding. Om dit probleem op te lossen, zullen we het algoritme aanpassen dat de verkoopflits regelt, zodat de inhoud (verkoop) wordt overschreven door het effectieve kortingspercentage.
Het bestand dat de s genereertale-flash bevindt zich in de volgende map:
your-site / wp-content / plugns / woocommerce / templates / loop / verkoop-flash.php
Meestal is het niet zo'n goed idee om plug-inbestanden te wijzigen, omdat alle wijzigingen tijdens de eerste update verloren gaan en het uitschakelen van updates geen optie is.
Gelukkig kunnen we zoveel wijzigingen aanbrengen als we willen op de WooCommerce-sjablonen zonder de integriteit van de plug-in in gevaar te brengen, gewoon door het bestand te kopiëren in een submap van ons thema die we zullen noemen woocommerce. In ons geval kopiëren we de sale-flash.phpbestand, dat zich bevindt in:
your-site / wp-content / uw_thema / woocommerce / loop / verkoop-flash.php
Elk bestand in de WooCommerce-map heeft voorrang op de oorspronkelijke sjabloonbestanden van de plug-in. Op deze manier kunnen we er zeker van zijn dat door het updaten van WooCommerce onze wijzigingen niet verloren gaan.
Merk op dat als u een kindthema gebruikt, het bestand moet worden gekopieerd in dezelfde submap van het onderliggende thema.
Merk ook op dat als uw thema al een bestand heeft uw_thema / woocommerce / loop / verkoop-flash.php dan is het zeer waarschijnlijk dat het al het oorspronkelijke gedrag van de verkoopflits wijzigt. In dit geval zijn er twee oplossingen:
Laten we eens kijken naar de sale-flash.php het dossier:
Accentsconagua
is_on_sale ()):?> '. __ ('Sale!', 'Woocommerce'). '', $ post, $ product); ?> De code is heel eenvoudig: het genereert een span label met de tekst "VERKOOP"Elke keer als een object in de uitverkoop is. Het enige dat we moeten doen, is de volgende wijzigingen in de code aanbrengen:
is_in_stock ()) terug; $ sale_price = get_post_meta ($ product-> id, '_price', true); $ regular_price = get_post_meta ($ product-> id, '_regular_price', true); if (empty ($ regular_price)) // dan is dit een variabel product $ available_variations = $ product-> get_available_variations (); $ Variation_id = $ available_variations [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):?> -'. $ verkoop. '%', $ post, $ product); ?>
Het eerste dat we moeten doen is de korting berekenen, en daarvoor hebben we de korting nodig Normale prijs en de Verkoopprijs. Voor eenvoudige producten en gegroepeerde producten kunnen we deze informatie verkrijgen door eenvoudigweg de twee meta-velden te gebruiken: _prijs en _normale prijs(zie rijen 5 en 6).
Als de verkregen Normale prijs is leeg, dan hebben we het over een variabel product, en in dit geval zullen we het volgende moeten doen:
Op dit moment is alles wat we moeten doen een eenvoudige formule toepassen om de korting te berekenen, met behulp van de Normale prijs en de Verkoopprijs. Om het eenvoudiger te maken, kunnen we voorkomen dat decimalen worden gebruikt om het getal naar het dichtstbijzijnde gehele getal af te ronden met behulp van de ceil (num) functie, zoals in het voorbeeld dat ik u zojuist heb getoond, of door in te korten naar het dichtstbijzijnde kleinere nummer met behulp van de vloer (num) functie.
We kunnen een kleur toevoegen aan onze oplossing door een chromatische schaal te gebruiken om het kortingspercentage weer te geven. Groen is 0% en rood is 100%.
De twee kleuren hebben de volgende RGBcodes:
Met deze eenvoudige formules kunnen we toevoegen aan het rode kanaal en van het groene kanaal halen.
Het blauwe kanaal blijft ongewijzigd; het zal altijd nul zijn.
R = (255 * verkoop) / 100G = (255 * (100 - verkoop)) / 100B = 0Zodra we de rode en groene waarden hebben, kunnen we de sale-flash achtergrond door de regel rechtstreeks aan de span label.
De volledige code is de volgende:
is_in_stock ()) terug; $ sale_price = get_post_meta ($ product-> id, '_price', true); $ regular_price = get_post_meta ($ product-> id, '_regular_price', true); if (empty ($ regular_price)) // dan is dit een variabel product $ available_variations = $ product-> get_available_variations (); $ Variation_id = $ available_variations [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):?> -'. $ verkoop. '%', $ post, $ product); ?>
En het resultaat:
Voor degenen die hebben meegedaan, vraagt u misschien waarom we de background: none voordat u de Achtergrond kleur?
In dit specifieke geval had de stylesheet een regel voor de achtergrondeigenschap die altijd voorrang had boven de Achtergrond kleur. De juiste manier om dit te doen zou zijn om de stijlpagina te wijzigen en de regel die de achtergrond van de stijl instelt te overschrijven of te annuleren sale-flash.
Over het algemeen moet u de eigenschappen en stijlregels selecteren die u wilt overschrijven of wijzigen met tools zoals Firebug. Zodra u begrijpt waar en wat u moet wijzigen, moet u proberen geen inline stijlen te gebruiken. Probeer in plaats daarvan een externe stijlpagina te gebruiken.
In dit geval hebben we een uitzondering op de regel. De RGBcode wordt berekend via een zeer eenvoudig algoritme en je zou altijd het algoritme kunnen veranderen door een paar regels PHP code te veranderen in plaats van honderden CSS te veranderenklassen.
Op dit moment is de aanpassing van de verkoopflits voltooid. We hebben de sjabloon aangepast die de visualisatie van het relevante label doet.
In plaats van het oorspronkelijke bestand in de plugin-map te wijzigen, hebben we een kopie in onze themamap gebruikt om de wijzigingen die we zojuist hebben aangebracht te beschermen in het geval van updates van de plug-in.
Over het algemeen is dit een regel die geldig is voor alle bestanden in de sjabloonmap van de WooCommerce-plug-in. Ik hoop dat je deze tutorial nuttig hebt gevonden, niet alleen om het gedrag van de verkoopflits te verbeteren, maar ook om beter te begrijpen hoe sommige WooCommerce-mechanismen werken.
