Personalizza le pagine carrello e checkout di WooCommerce via CSS

A volte è necessario dare uno stile diverso al carrello e alle pagine di pagamento di WooCommerce a seconda di alcune condizioni, come l’utente che ha effettuato l’accesso ai prodotti nel carrello.

Sfortunatamente, WooCommerce non aggiunge alcun selettore CSS basato sulle condizioni sopra menzionate.

Tuttavia, possiamo usare il filtro body_class per aggiungere alcune classi CSS al corpo, a seconda delle condizioni che abbiamo menzionato.

Il codice seguente aggiunge diverse classi CSS al corpo se:

  • Il carrello è vuoto o non è vuoto
  • C’è almeno un prodotto con un prezzo maggiore di zero (metodo di pagamento necessario)
  • I metodi di spedizione sono indicati o non necessari
  • Se è necessario l’indirizzo di spedizione o ci sono solo prodotti digitali nel carrello
  • I prezzi sono indicati con o senza tasse
  • Tutti i prodotti sono venduti singolarmente
  • Ci sono prodotti specifici nel carrello
  • La quantità di prodotti specifici è un numero specifico
  • L’indirizzo di fatturazione del cliente ha un paese specifico
  • Il cliente ha un ruolo specifico sul sito web
  • Il cliente ha già acquistato qualcosa
  • Il cliente ha acquistato un numero specifico di tempo

Se ad esempio nel carrello ci sono solo prodotti vendibili singolarmente, puoi sfruttare la classe CSS ccfw-cart-all-sold-individually-true per nascondere la colonna “Qty”.
In questo caso scriverai il CSS:

.ccfw-cart-all-sold-individually-true .shop_table .product-quantity {
    display: none;
}

Quindi, dopo aver scritto il codice PHP suggerito in questo post, non ti resta che scrivere il tuo CSS personalizzato sfruttando le classi CSS aggiunte al corpo.

Se vuoi puoi anche installare il plugin gratuito CSS Classes For WooCommerce che puoi scaricare dal repository di WordPress.