Rendere un tema WordPress compatibile con Woocommerce

Tempo di Lettura: 3 min.

E’ vero, non capita quasi mai, soprattutto negli ultimi anni, di avere la necessità di rendere un tema WordPress compatibile con Woocommerce: oramai si trovano milioni di temi, anche ben fatti, a disposizione nei vari store e a molti può sembrare ormai superfluo “sporcarsi le mani” e impazzire per trasformare un tema standard in un tema Woocommerce.

Eppure, questa necessità esiste, ed è anche frequente, in almeno due casi:

  1. Abbiamo un sito già esistente, un bellissimo tema personalizzato e confezionati dopo mesi o anni di duro lavoro e, improvvisamente, abbiamo la necessità di creare un e-commerce che abbia però lo stesso stile, caratteristiche, user interface di quello già in possesso.
  2. Nel briefing con il cliente non era stata esposta la necessità di avere un e-commerce, magari perché sorta in un secondo momento, oppure perché ad un tratto il cliente è rimasto folgorato sulla via di Amazon e vuole buttarsi nella mischia.

Queste sono solo due delle necessità che possiamo incontrare per dover rendere un tema WordPress compatibile con Woocommerce, quindi mettiamoci subito a lavoro e vediamo come ottimizzare e impostare il tutto in maniera semplice e veloce.

WordPress è un grande sistema, perché permette innanzitutto di percorrere varie strade per ottenere il medesimo risultato, e in secondo luogo perché è presente una community molto attiva e sviluppata che sicuramente avrà già affrontato il problema in esame.

IMPORTANTE: effettuate sempre un backup del tema prima di mettervi a lavoro, odio dirlo, ma non mi ritengo responsabile di eventuali perdite o malfunzionamenti.

Verifichiamo se Woocommerce è attivo:

La prima azione da compiere è quella di verificare se il plugin di Woocommerce è correttamente attivato nella vostra installazione, per fare ciò vi basterà inserire questo snippet di codice nel file function.php del vostro tema (meglio child-theme??):

// Add new constant that returns true if WooCommerce is active
define( 'WPEX_WOOCOMMERCE_ACTIVE', class_exists( 'WooCommerce' ) );
// Checking if WooCommerce is active
if ( WPEX_WOOCOMMERCE_ACTIVE ) {
// Do something...
// Such as including a new file with all your Woo edits.
}

Bene, ora che abbiamo verificato che il plugin è attivo occorre dichiarare la compatibilità del tema con esso. Per fare ciò vi basterà aggiungere queste poche righe sempre nello stesso file:

add_action( 'after_setup_theme', function() {
add_theme_support( 'woocommerce' );
} );

Abbiamo quasi terminato, l’ultima azione da compiere sarà quella di stilizzare le varie pagine di Shop, Carrello, Checkout, ecc con il nostro stile predefinito, per fare questo occorre però disattivare lo stile di Woocommerce, in questo modo:

// Remove all Woo Styles
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );

The End! Semplice vero?

Ci sono tantissime altre personalizzazioni che possiamo implementare, come ad esempio cambiare il numero di colonne nella pagina shop e tanto altro.

Tra le tante implementazioni però sicuramente una è di fondamentale importanza: l’icona del carrello con l’aggiornamento delle quantità dei prodotti inseriti.

Anche questa funzione non è difficile da implementare e tutto ciò che ci occorre è individuare il template dell’header del nostro sito, di solito allocato nella cartella del tema con il nome (difficile!) di header.php, e inserire il codice in basso nella posizione in cui vogliamo compaia l’icona:

 

<?php if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
 
    $count = WC()->cart->cart_contents_count;
    ?><a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php 
    if ( $count > 0 ) {
        ?>
        <span class="cart-contents-count"><?php echo esc_html( $count ); ?></span>
        <?php
    }
        ?></a>
 
<?php } ?>

E in seguito va aggiunto il seguente snippet nel file function.php che ci assicura l’aggiornamento del numero dei prodotti in tempo reale grazie all’AJAX:

/**
 * Ensure cart contents update when products are added to the cart via AJAX
 */
function my_header_add_to_cart_fragment( $fragments ) {
 
    ob_start();
    $count = WC()->cart->cart_contents_count;
    ?><a class="cart-contents" href="<?php echo WC()->cart->get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php
    if ( $count > 0 ) {
        ?>
        <span class="cart-contents-count"><?php echo esc_html( $count ); ?></span>
        <?php            
    }
        ?></a><?php
 
    $fragments['a.cart-contents'] = ob_get_clean();
     
    return $fragments;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'my_header_add_to_cart_fragment' );

Finalmente dovrebbe apparire la nostra icona del carrello, ma c’è ancora un’ultima cosa da fare: stilizzare il tutto con il design del nostro tema.

Si tratta fondamentalmente di aggiungere delle regole CSS che, io inserirò da esempio, ma che è possibile personalizzare come meglio crediamo, ad esempio se vogliamo cambiare l’icona del carrello ci basterà cambiare il font-family inserendone un altro come FontAwesome e in seguito inserire il codice content: “\f07a”; 

.cart-contents:before {
    font-family:WooCommerce;
    content: "\e01d";
    font-size:28px;
    margin-top:10px;
    font-style:normal;
    font-weight:400;
    padding-right:5px;
    vertical-align: bottom;
}
.cart-contents:hover {
    text-decoration: none;
}
.cart-contents-count {
    color: #fff;
    background-color: #2ecc71;
    font-weight: bold;
    border-radius: 10px;
    padding: 1px 6px;
    line-height: 1;
    font-family: Arial, Helvetica, sans-serif;
    vertical-align: top;
}

Abbiamo terminato, come potete vedere è stato molto più semplice di quanto potesse sembrare, a questo punto non vi resta che testare questa soluzione nel vostro tema, con una piccola accortezza: utilizzate sempre i child-theme e fate sempre, sempre, sempre un backup prima di mettervi a lavoro!

Sommario
Come rendere un tema WordPress compatibile con Woocommerce Plugin
Nome Articolo
Come rendere un tema WordPress compatibile con Woocommerce Plugin
Descrizione
Scopriamo insieme come rendere un tema WordPress compatibile con Woocommerce plugin in modo semplice e veloce.
Autore
Nome Editore
ideaGrafica
Logo Editore
Share it