Ho pensato potesse essere utile mostrare come realizzare un website per e-commerce.
Indubbiamente il software più usato sulla rete è WordPress col suo plugin WooCommerce.
Tutto il codice che mostrerò funziona su WordPress versione 5.4 e WooCommerce 4.1
Lavorare col codice vi permetterà di non ricorrere a decine e decine di plugin (spesso costosi) per implementare delle funzioni che potreste trovare utili.

Innanzitutto è utile creare un proprio plugin su cui lavorare. Questo metodo è molto più gestibile sia in fase di editing che in eventuale recovery delle funzioni del vostro website di e-commerce.

Se i vostri bottoni add-to-cart non lavorano con AJAX, è utile usare questo codice per evitare che l’utente faccia inutili loop fuori dalla pagina archivio che sta visitando.

Se i vostri prodotti singoli nella pagina archivio non hanno un field dove inserire la quantità potete usare questo codice per aggiungerlo.

Con questo codice potete rendere i vostri prodotti variabili acquistabili direttamente nelle pagine archivio. Opportunamente modificato implementa anche il field per la quantità ed un testo personalizzato ad ogni add-to-cart per ogni categoria di prodotti. Basta che sostituiate nei vari “case” la categoria che mostro come esempio con le  vostre categorie di prodotti variabili per far funzionare il codice.

Purtroppo nelle pagine archivio viene mostrato il prezzo più basso e quello più alto per ogni prodotto variabile. Con questo codice potete eliminare questa funzione di WooCommerce.

Questo codice potrebbe farvi risparmiare molti soldini, eliminandovi il disturbo di dover ricorrere a plugin costosi.
Vi permette di selezionare il metodo di spedizione che preferite a seconda della classe di spedizione che avete conferito ad un determinato prodotto.

Immaginando che abbiate dei prodotti che non volete vengano acquistati in quantità superiore a quella di vostro gradimento, con questo codice potete selezionare sia la categoria che il numero di items che si  possono aggiungere al carrello. Raggiunto il limite da voi stabilito, il sistema restituisce un errore (anche questo ovviamente personalizzabile).

Il primo snippet vi permette di redirectare il logo del sito WordPress su una pagina di vostro gradimento.
Col secondo snippet potete eliminare le informazioni aggiuntive dei prodotti dalle pagine archivio.
Il terzo snippet permette di eliminare l’intera casella “descrizione” dalla tabella che mostra le informazioni di un prodotto.
Col quarto snippet potete mettere un testo standard a vostra scelta ai vostri bottoni add-to-cart.

Col primo snippet sfruttiamo la funzione “translate” del php di WordPress per modificare a nostro piacimento delle stringhe di testo (attenzione quando usate questo strumento perchè verranno rimpiazzate tutte le stringhe che hanno quella stessa consecuzione di caratteri).
Col secondo snippet potete eliminare il cart-widget che è sempre presente nel navigator-menù del tema Storefront.
Col terzo snippet potete mostrare il vostro cart-widget personale in qualsiasi pagina, compresa la home-page, la pagina carrello o quella del checkout.

Il primo snippet implementa AJAX al vostro cart-widget.
Coi due filtri conclusivi potete eliminare i bottoni del cart-widget che mandano al carrello ed alla cassa.
Col quarto snippet potete eliminare le notifiche che normalmente WooCommerce mostra dopo ogni add-to-cart.

Veniamo ora alla personalizzazione del checkout. I plugin che vi permettono queste modifiche sono costosi.

Con questo semplice snippet potete aggiungere delle checkbox in uno degli hook del checkout di WooCommerce e mostrare un eventuale messaggio di errore se esse non vengono spuntate prima di proseguire con l’ordine.

Con questo snippet potete variare le etichette, i placeholder, le priorità e quindi l’ordine dei vari field del checkout.

Col primo filtro potete disabilitare le note aggiuntive all’ordine.
Con gli altri due snippet potete impostare lo stato e la provincia standard che verrà mostrata agli utenti del vostro sito.

Questo snippet vi permette di aggiungere dei fields al vostro checkout.

Questo snippet lo ho costruito per mostrare solo determinati fields del checkout, a seconda delle esigenze.
E’ anche subordinato ad una apposita checkbox che condiziona i field mostrati se spuntata o meno.

Un semplice snippet che aggiunge delle checkbox utili a condizionare alcuni dei vostri fields nel checkout.

Questo semplice jQuery condiziona dei fields a vostra scelta a seconda della scelta fatta dall’utente in un field opzionale, che sia un radiobutton o che sia un dropdown.

Potreste trovare utile aggiungere delle “fee” (mance) al vostro checkout.
Qui il field che le aggiunge è un dropdown, ma potreste editarlo per renderlo un radiobutton.

Da usare insieme allo snippet precedente, aggiunge il vostro “fee” field alla pagina, lo fa lavorare in AJAX nel vostro carrello e memorizza la scelta dell’utente nei dettagli dell’ordine che vi pervengono via email.

Un pochino di CSS per far lavorare il vostro sito 🙂 L’ultima parte lavora insieme a questo codice php che potreste usare per aggiungere un widget di tipo “float” al footer del vostro sito. Io lo ho costruito per avere sempre i contatti col sottoscritto a disposizione…eccovi il codice, molto molto semplice.

Bene, con questo ho concluso. Spero che i miei snippets possano tornarvi utili per costruire un sito che sia confacente alle vostre risorse economiche!
Se avete bisogno di chiarimenti o personalizzazioni non esitate a contattarmi usando l’apposito widget 🙂

Acquista per categoria

Nuovi arrivi

In offerta

I più venduti

  • Stampa e rilega:

    Svuota
  • Let people draw their own world:

    Svuota
  • Evidenziatore Tratto-Video:

    1,10
    Svuota
  • Caricabatterie a muro e cavo USB 2.0

    8,90
    Svuota