Inserire il pulsante Richiedi Prezzo in Woocommerce

L’E-Commerce lo sappiamo tutti, è in continua evoluzione. Evolvono i mercati, evolvono i prodotti perché evolvono i clienti. Oggi chi possiede un E-Commerce (anche coloro che possiedono un e-commerce a Lecce o in Puglia o nel mondo), hanno delle responsabilità in più rispetto al passato e la prova sono proprio le miriadi di promozioni che ogni giorno riceviamo. Vedi Black Friday, Blue Monday, Cyber Weekend e affini!

Un E-Commerce ben progettato però non farà fatica ad adattarsi alle esigenze del merchant, perché il progettista, web designer e sviluppatore, avrà previsto la possibilità che queste esigenze sorgano, ed ecco perché è importante  affidarsi ai giusti professionisti.

Una recente problematica che ho dovuto affrontare era rappresentata dalla possibilità di sostituire il classico pulsante “Acquista” con una richiesta di prezzo personalizzata, nascondendo quindi qualsiasi prezzo o possibilità di acquisto. Chi mi segue sa bene che non amo l’installazione selvaggia di plugin, e in questo come sempre mi è venuto in aiuto WordPress e la sua straordinaria scalabilità.

Ma partiamo con ordine e illustriamo il procedimento per inserire il pulsante Richiedi Prezzo in Woocommerce come fosse un tutorial di Fai da te.

Il Problema

In una piattaforma E-Commerce realizzata con WordPress e Woocommerce, si richiedeva la possibilità di sostituire, solo in alcuni prodotti selezionati, il pulsante di “Acquista” con un pulsante “Richiedi Prezzo” e che al click fosse visualizzato un form di richiesta informazioni e che venisse nascosto il prezzo del prodotto.

La Strategia

Il primo problema che mi sono posto è stato come automatizzare tutto il processo. Non tutti i clienti sono dei tecnici o degli sviluppatori, e non tutti hanno la voglia e la capacità di operare su codice o di seguire intricate manovre, così ho fatto delle ricerche e alla fine sono arrivato alla conclusione di poter attivare il pulsante Richiedi Prezzo in Woocommerce quando il campo prezzo del prodotto fosse stato vuoto.

In questo modo avrei soddisfatto due delle tre necessità; ora non restava che attivare il form al click del pulsante. Ho optato per uno script in Javascript, snello, flessibile e veloce. Avevo tutto: quando il campo prezzo in un prodotto fosse risultato vuoto il pulsante Acquista sarebbe stato sostituito dal pulsante Richiedi Prezzo, il quale al click avrebbe attivato il form di richiesta informazioni.

L’occorrente per questo progetto

Ora che abbiamo tutto possiamo procedere, vi basterà semplicemente aprire il file function.php del vostro tema (meglio se tema child) e incollare il codice in basso:

/**
 * @snippet       Mostra pulsante quando il campo prezzo è vuoto in un prodotto semplice
 * @author        Marco De Sangro
 * @testedwith    WooCommerce 3.0.7
 */
 
add_filter('woocommerce_empty_price_html', 'newbutton_poa_and_enquiry_cf7_woocommerce');
 
function newbutton_poa_and_enquiry_cf7_woocommerce() {
    $html = '<div class="poa">PREZZO SU RICHIESTA</div>';
    $html .= '<button type="submit" id="trigger_cf" class="single_add_to_cart_button button alt"> Richiedi Prezzo </button>';
    $html .=  '<div id="product_inq" style="display:none">';
    $html .= do_shortcode('[Shortcode del vostro Contact Form]');
    $html .=  '</div>';
    return $html;
}

Che non fa altro che aggiungere un filtro che controlla se il campo prezzo è vuoto e, se la condizione è vera, sostituisce il pulsante Acquista con il pulsante Richiedi Prezzo. Inoltre, come potete vedere, stampa il form che in questa fase è invisibile, ma che sarà reso visibile in seguito, al click del pulsante.

Ora non ci resta che incollare di seguito il codice Javascript per l’attivazione del pulsante:

// --------------------------
// 2. Echo Javascript: 
// a) on click, display CF7
// b) and change CF7 button to "Close"
 
add_action( 'woocommerce_single_product_summary', 'newbutton_on_click_show_cf7_and_populate', 40);
 
function newbutton_on_click_show_cf7_and_populate() {
   
  ?>
    <script type="text/javascript">
        jQuery('#trigger_cf').on('click', function(){
        if ( jQuery(this).text() == 'Richiedi Prezzo' ) {
            jQuery('#product_inq').css("display","block");
			jQuery("#trigger_cf").html('Chiudi'); 
        } else {
            jQuery('#product_inq').hide();
            jQuery("#trigger_cf").html('Richiedi Prezzo'); 
        }
        });
    </script>
    <?php
       
}

Finito, ora non ci resta che testare il tutto.

Questo sistema è stato testato sull’ultima versione disponibile di Woocommerce, che porta con sé tante novità, ma se lo provate su altre versioni fatemi sapere come va.

Sommario
Scopriamo insieme come inserire un pulsante Richiedi Prezzo in Woocommerce solo su alcuni prodotti
Nome Articolo
Scopriamo insieme come inserire un pulsante Richiedi Prezzo in Woocommerce solo su alcuni prodotti
Descrizione
Può capitare a volte di voler inserire un pulsante Richiedi Prezzo in Woocommerce soltanto su alcuni prodotti per i quali occorre effettuare una quotazione particolare. Scopriamo come farlo.
Autore
Nome Editore
ideaGrafica
Logo Editore
Share it