Come visualizzare "Risparmi x%" sotto i prezzi di vendita per prodotti semplici e variabili in WooCommerce
Pubblicato: 2019-04-03Sappiamo tutti come gli sconti attirino i clienti e aumentino le vendite. Ma mostrare che stai vendendo un articolo a un prezzo inferiore non è sufficiente al giorno d'oggi, con tutti i rivenditori e i siti di e-commerce che offrono sconti allo stesso tempo. Quando vengono visualizzati solo i prezzi vecchi e nuovi, il cliente deve fare i conti per calcolare l'importo che sta effettivamente risparmiando. Un modo migliore per gestirlo è visualizzare la percentuale dell'importo che il cliente risparmia quando effettua l'acquisto. Questo dà loro un'idea migliore e un modo più semplice per decidere se effettuare quell'acquisto. Vediamo come puoi visualizzare "Risparmi x%" accanto ai prezzi di vendita per prodotti sia semplici che variabili in WooCommerce.
Come visualizzare Risparmi % sotto i prezzi di vendita per i prodotti semplici
Visualizzare la percentuale di importo risparmiato è facile per i prodotti semplici una volta che si conosce il prezzo regolare e di vendita. In casi normali, questi prezzi per un prodotto semplice vengono visualizzati come segue:
Aggiungendo il codice sottostante al file functions.php del tuo tema figlio verrà visualizzato "Risparmi x%" sotto il prezzo del prodotto semplice, in modo che l'utente abbia immediatamente un'idea di quanto sia buono o cattivo l'affare.
funzione ts_you_save() {
prodotto $ globale;
if( $prodotto->è_tipo('semplice') || $prodotto->è_tipo('esterno') || $prodotto->è_tipo('raggruppato') ) {
$prezzo_regolare = get_post_meta($prodotto->get_id(), 'prezzo_regolare', vero);
$prezzo_saldo = get_post_meta($prodotto->get_id(), '_prezzo_saldo', true);
if( !vuoto($prezzo_svendita) ) {
$importo_risparmio = $prezzo_regolare - $prezzo_saldo;
$simbolo_valuta = get_woocommerce_simbolo_valuta();
$percentuale = round((($prezzo_regolare - $prezzo_svendita) / $prezzo_regolare) * 100);
?>
<p><b>Risparmi: <?php echo number_format($percentage,0, '', '').'%'; ?></b></p>
<?php
}
}
}
add_action( 'woocommerce_single_product_summary', 'ts_you_save', 11 );In questo frammento di codice, abbiamo aggiunto una funzione ts_you_save() all'hook WooCommerce integrato woocommerce_single_product_summary , che punta all'area sotto il titolo del prodotto. La funzione ts_you_save() identifica la tipologia del prodotto e calcola la percentuale di importo risparmiato se il prodotto è in vendita. Aggiungendo alcuni CSS, puoi stamparlo nel modo in cui desideri:
Se vuoi visualizzare l'importo salvato insieme alla percentuale, puoi modificare un po' lo stesso snippet di codice nel modo seguente:
funzione ts_you_save() {
prodotto $ globale;
if( $prodotto->è_tipo('semplice') || $prodotto->è_tipo('esterno') || $prodotto->è_tipo('raggruppato') ) {
$prezzo_regolare = get_post_meta($prodotto->get_id(), 'prezzo_regolare', vero);
$prezzo_saldo = get_post_meta($prodotto->get_id(), '_prezzo_saldo', true);
if( !vuoto($prezzo_svendita) ) {
$importo_risparmio = $prezzo_regolare - $prezzo_saldo;
$simbolo_valuta = get_woocommerce_simbolo_valuta();
$percentuale = round((($prezzo_regolare - $prezzo_svendita) / $prezzo_regolare) * 100);
?>
<p><b>Risparmi: <?php echo number_format($amount_saved,2, '.', '')." (. number_format($percentage,0, '', '')."%)" ; ?></b></p>
<?php
}
}
}
add_action( 'woocommerce_single_product_summary', 'ts_you_save', 11 );La funzione number_format è una funzione PHP integrata che accetta 4 argomenti:
- Il numero o, nel nostro caso, l'importo e la percentuale salvati rispettivamente (abbiamo utilizzato la funzione due volte).
- Numero di cifre decimali. Lo abbiamo impostato su 2 per l'importo salvato e 0 per la percentuale poiché non desideriamo visualizzare alcun valore decimale per la percentuale.
- Il separatore decimale che desideri utilizzare. Abbiamo impostato questo su un punto (.) per l'importo salvato e un valore vuoto per la percentuale.
- Il separatore dei mille. Se l'importo salvato supera 1000, puoi utilizzare questo argomento. Al momento l'abbiamo impostato su bianco.
L'importo risparmiato e la percentuale verranno ora visualizzati sotto il prezzo:
Come visualizzare Risparmi % al di sotto dei prezzi di vendita per prodotti variabili
Quando si tratta di prodotti variabili, questo diventa complicato perché ogni variazione del prodotto può avere un prezzo diverso. Ad esempio, una maglietta potrebbe avere un prezzo più alto per una taglia più grande mentre il prezzo potrebbe essere inferiore per la stessa maglietta di una taglia più piccola. Per casi come questi, WooCommerce mostra la fascia di prezzo di vendita sotto il titolo del prodotto, mentre i prezzi normali e di vendita di ogni variazione del prodotto vengono visualizzati sopra il pulsante Aggiungi al carrello quando viene selezionata la variazione. Ciò è stato illustrato dalle immagini seguenti:
In questo caso, stamperemo il testo "Risparmi" insieme alla percentuale salvata al di sotto del prezzo visualizzato per la particolare variazione. Dovrai aggiungere frammenti di codice a entrambi i file functions.php e footer.php del tuo tema figlio .
Il seguente frammento di codice che aggiungerai nel file footer.php contiene una funzione che viene attivata quando la variazione viene modificata. Nel nostro caso, questo viene attivato quando la variazione di taglia viene selezionata o modificata utilizzando il menu a discesa Dimensioni. Questa funzione cattura il particolare ID variazione e lo invia a functions.php tramite una chiamata ajax.
<script>
jQuery(documento).ready(funzione($) {
$('input.variation_id').cambia( funzione(){
if( '' != $('input.variation_id').val() ) {
var var_id = $('input.variation_id').val(); // L'ID variante selezionato
$.ajax({
url: "https://<your_woocommerce_site_url>/wp-admin/admin-ajax.php",
dati: {'action':'ts_calc_percentage_saved','vari_id': var_id} ,
successo: funzione(dati) {
se (dati>0)
{
$( ".woocommerce-variation-price" ).append( "<p>Risparmi: "+data+"%</p>");
}
},
errore: funzione(errorThrown){
console.log(errorThrown);
}
});
}
});
});
</script>
Devi sostituire <your_woocommerce_site_url> con l'URL di base del tuo sito WooCommerce.
Il seguente frammento di codice che aggiungerai nel file functions.php contiene una funzione ts_calc_percentage_saved che recupera il prezzo normale e il prezzo di vendita del prodotto in base all'ID variazione, calcola la percentuale e restituisce lo stesso alla funzione ajax nel footer. file php.
//Ecco come agganciare una funzione chiamata da ajax, in WordPress
add_action("wp_ajax_ts_calc_percentage_saved", "ts_calc_percentage_saved");
//La funzione seguente viene chiamata tramite uno script ajax in footer.php
funzione ts_calc_percentage_saved(){
// La $_REQUEST contiene tutti i dati inviati tramite ajax
se ( isset($_RICHIESTA) ) {
$percentuale=0;
$variation_id = sanitize_text_field($_REQUEST['vari_id']);
$prodotto_variabile = wc_get_prodotto($id_variazione);
$prezzo_regolare = $prodotto_variabile->get_prezzo_regolare();
$prezzo_saldo = $prodotto_variabile->ottieni_prezzo_saldo();
if( !vuoto($prezzo_svendita) ) {
$importo_risparmio = $prezzo_regolare - $prezzo_saldo;
$simbolo_valuta = get_woocommerce_simbolo_valuta();
$percentuale = round((($prezzo_regolare - $prezzo_svendita) / $prezzo_regolare) * 100);
}
muori($percentuale);
}
}La funzione sanitize_text_field() è una funzione di WordPress che aiuta a disinfettare l'input che riceviamo dal lato client.
Pertanto, ora vedrai "Risparmi", insieme alla percentuale di importo risparmiato, al di sotto del prezzo della variazione.
Puoi modellarlo come preferisci, all'interno della stessa funzione ajax, aggiungendo HTML e CSS all'interno della funzione append su questa riga:
$( “.woocommerce-variation-price” ).append( “<p>Risparmi: “+data+”%</p>”);
Visualizza la % di risparmio sotto il titolo del prodotto anziché sopra il pulsante Aggiungi al carrello per i prodotti variabili
Se lo desideri, puoi visualizzare il testo che salvi insieme alla percentuale salvata sotto il titolo del prodotto anziché sopra il pulsante "Aggiungi al carrello" aggiungendo altri frammenti di codice a quelli sopra menzionati.
Questo pezzo di codice dovrebbe essere aggiunto al file functions.php del tuo tema figlio, oltre ai frammenti di codice menzionati sopra (nei file footer.php e functions.php).
//Il codice sottostante serve per spostare il prezzo
funzione ts_shuffle_variable_product_elements(){
se ( è_prodotto() ) {
posta $ globale;
$prodotto = wc_get_product($post->ID);
if ($prodotto->è_tipo('variabile')) {
remove_action('woocommerce_single_variation', 'woocommerce_single_variation', 10);
add_action( 'woocommerce_before_variations_form', 'woocommerce_single_variation', 20 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_before_variations_form', 'woocommerce_template_single_title', 10 );
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20);
add_action('woocommerce_before_variations_form', 'woocommerce_template_single_excerpt', 30);
}
}
}
add_action('woocommerce_before_single_product', 'ts_shuffle_variable_product_elements');Ciò che essenzialmente fa questo codice è rimuovere gli elementi (incluso il titolo) e riorganizzarli nel modo desiderato. Il risultato è che la fascia di prezzo viene eliminata e il prezzo della variazione viene visualizzato quando si seleziona una variazione, insieme al testo You Save sottostante, come illustrato:
