Share
Cosa starai creandoPer coloro che hanno familiarità con WooCommerce, potresti anche essere a conoscenza della sua funzionalità di vendita flash. Questo è principalmente utilizzato per visualizzare quando un articolo è in vendita.
In questo tutorial, daremo un'occhiata a come possiamo personalizzare e migliorare il display di vendita flash di WooCommerce per mostrare la percentuale di sconto effettiva e per cambiare il colore dell'etichetta in base a detta percentuale.
Il flash di vendita di WooCommerce è visualizzato negli archivi e nelle singole pagine per i prodotti di vendita, ovvero i prodotti che hanno un prezzo di vendita inferiore al prezzo normale.
Nel sistema attuale, gli utenti non possono percepire il Dimensione-o qualità-dello sconto.
Ad esempio, uno sconto del 70% è più attraente di un 15%, ma entrambi sono visualizzati da WooCommerce con un semplice vendita-flash sull'immagine del prodotto. Per risolvere questo problema, modificheremo l'algoritmo che controlla il flash di vendita in modo che il suo contenuto (Sale) venga sovrascritto dalla percentuale di sconto effettiva.
Il file che genera il sale-flash si trova nella seguente cartella:
your-site / wp-content / plugns / woocommerce / templates / loop / vendita-flash.php
Di solito, non è una buona idea cambiare i file del plugin perché tutte le modifiche andranno perse durante il primo aggiornamento e la disattivazione degli aggiornamenti non è un'opzione.
Fortunatamente, possiamo apportare tutte le modifiche che vogliamo sui modelli WooCommerce senza compromettere l'integrità del plugin, semplicemente copiando il file in una sottocartella del nostro tema che chiameremo woocommerce. Nel nostro caso, copiamo il file vendita-flash.phpfile, che si trova in:
your-site / wp-content / yourtheme / woocommerce / loop / vendita-flash.php
Ogni file all'interno della cartella WooCommerce ha la priorità sui file modello originali del plugin. In questo modo possiamo essere sicuri che aggiornando WooCommerce non perdiamo nessuno dei nostri cambiamenti.
Si noti che se si utilizza un tema figlio, il file deve essere copiato nella stessa sottocartella del tema figlio.
Si noti inoltre che se il tema ha già un file yourtheme / woocommerce / loop / vendita-flash.php quindi è molto probabile che modifichi già il comportamento originale del flash di vendita. In questo caso ci sono due soluzioni:
Diamo un'occhiata al vendita-flash.php file:
Accentsconagua
is_on_sale ()):?> '. __ ('Vendita!', 'Woocommerce'). '', $ post, $ prodotto); ?> Il codice è molto semplice: genera a campata tag con il testo "SALDI"Ogni volta che un oggetto è in vendita. Tutto quello che dobbiamo fare è apportare le seguenti modifiche al codice:
is_in_stock ()) ritorno; $ sale_price = get_post_meta ($ product-> id, '_price', true); $ regular_price = get_post_meta ($ product-> id, '_regular_price', true); if (vuoto ($ regular_price)) // allora questo è un prodotto variabile $ available_variations = $ product-> get_available_variations (); $ Variation_id = $ available_variations [0] [ 'variation_id']; $ variazione = nuova WC_Product_Variation ($ variation_id); $ regular_price = $ variation -> regular_price; $ sale_price = $ variazione -> sale_price; $ sale = ceil ((($ regular_price - $ sale_price) / $ regular_price) * 100); ?> $ sale_price):?> -'. $ in vendita. '%', $ post, $ prodotto); ?>
La prima cosa che dobbiamo fare è calcolare lo sconto, e per farlo avremo bisogno del Prezzo regolare e il Prezzo di vendita. Per prodotti semplici e prodotti raggruppati, possiamo ottenere queste informazioni semplicemente utilizzando i due campi meta: _prezzo e _prezzo regolare(vedi righe 5 e 6).
Se il ottenuto Prezzo regolare è vuoto, quindi stiamo parlando di un prodotto variabile, e in questo caso dovremo fare come segue:
A questo punto, tutto ciò che dobbiamo fare è applicare una semplice formula per calcolare lo sconto, usando il Prezzo regolare e il Prezzo di vendita. Per semplificare, evitiamo di usare i decimali arrotondando il numero al numero intero più vicino usando il ceil (num) funzione, come nell'esempio che ti ho appena mostrato, o troncando il numero più piccolo più vicino usando il piano (num) funzione.
Possiamo aggiungere un po 'di colore alla nostra soluzione utilizzando una scala cromatica per rappresentare la percentuale di sconto. Il verde è 0% e il rosso è 100%.
I due colori hanno il seguente RGBcodici:
Con queste semplici formule possiamo aggiungere al canale rosso e prendere dal canale verde.
Il canale blu rimane invariato; sarà sempre zero.
R = (255 * sale) / 100G = (255 * (100 - vendita)) / 100B = 0Una volta che abbiamo i valori rosso e verde, possiamo modificare il vendita-flash sfondo aggiungendo la regola direttamente a campata etichetta.
Il codice completo è il seguente:
is_in_stock ()) ritorno; $ sale_price = get_post_meta ($ product-> id, '_price', true); $ regular_price = get_post_meta ($ product-> id, '_regular_price', true); if (vuoto ($ regular_price)) // allora questo è un prodotto variabile $ available_variations = $ product-> get_available_variations (); $ Variation_id = $ available_variations [0] [ 'variation_id']; $ variazione = nuova WC_Product_Variation ($ variation_id); $ regular_price = $ variation -> regular_price; $ sale_price = $ variazione -> sale_price; $ sale = ceil ((($ regular_price - $ sale_price) / $ regular_price) * 100); ?> $ sale_price):?> -'. $ in vendita. '%', $ post, $ prodotto); ?>
E il risultato:
Per coloro che hanno seguito, potrebbe chiedersi perché abbiamo impostato il sfondo: nessuno prima di impostare il colore di sfondo?
In questo caso specifico, il foglio di stile aveva una regola per il sfondoproprietà che ha sempre avuto la priorità sul colore di sfondo. Il modo corretto per farlo sarebbe stato cambiare il foglio di stile e sovrascrivere o annullare la regola che imposta lo sfondo del vendita-flash.
In generale, è necessario selezionare le proprietà e le regole di stile che si desidera sovrascrivere o modificare con strumenti come Firebug. Una volta capito dove e cosa cambiare, devi provare a non usare gli stili in linea. Invece, prova ad usare un foglio di stile esterno.
In questo caso, abbiamo un'eccezione alla regola. L'RGBil codice viene calcolato tramite un algoritmo molto semplice e puoi sempre modificare l'algoritmo modificando alcune righe di codice PHP invece di modificare centinaia di CSSclassi.
A questo punto, viene eseguita la personalizzazione del flash di vendita. Abbiamo modificato il modello che visualizza la relativa etichetta.
Piuttosto che modificare il file originale che si trova nella cartella del plugin, abbiamo usato una copia nella nostra cartella dei temi per salvaguardare le modifiche appena apportate in caso di aggiornamenti del plug-in.
Generalmente questa è una regola valida per tutti i file nella cartella dei modelli del plugin WooCommerce. Spero che tu abbia trovato questo tutorial utile non solo per migliorare il comportamento del flash di vendita, ma anche per capire meglio come funzionano alcuni dei meccanismi di WooCommerce.
