Kolommen verbergen in de WooCommerce winkelwagen tabel

Stel, de verkoopt een product of producten waarvoor een klant er per definitie maar één aan kan schaffen. Een mooi voorbeeld is een online cursus.

De standaard tabel op de winkelwagen pagina zal de volgende informatie tonen: Product, Prijs, Aantal en Totaalprijs.

Dat is toch aardig overbodig. Met slechts enkele regels CSS code kan je de overbodige kolommen verbergen.

Voor de duidelijkheid, de kolommen zijn er nog steeds, ze worden alleen niet zichtbaar. Met CSS kan je niets ‘verwijderen’, alleen zichtbaar of onzichtbaar maken.

Uitgaande van het bovengenoemde voorbeeld willen we de kolommen 3 en 4 verbergen. Het kruisje in de kolom voor ‘Product’ is immers ook een kolom.

De code die je hiervoor nodig hebt is heel simpel toe te voegen. Dit kan je het best doen via de Customizer te kiezen voor ‘Additional CSS / Aanvullende CSS / Custom CSS of hoe de optie ook mag heten in jouw thema, of in het bestand style CSS van je child theme. Let erop, dat het je Child theme, en niet je hoofd thema is, omdat anders alles wordt overschreven bij een update.

De code die we hier nodig hebben is kort en heel krachtig:

.woocommerce table.cart td:nth-of-type(3), 
.woocommerce table.cart th:nth-of-type(3),  
.woocommerce table.cart td:nth-of-type(4), 
.woocommerce table.cart th:nth-of-type(4) {
   display:none;
}

Wat we hier in gewoon Nederlands zeggen is ‘verberg de kop (th) en de data (td) cellen in kolom 3 en 4.

Soms is het leven zo makkelijk.

Wanneer je een plugin gebruikt die extra kolommen toevoegt aan de winkelwagen tabel, dan zal je de nummers van de kolommen mogelijk aan moeten passen.

Dit is natuurlijk alleen nuttig wanneer er van alle producten maar één exemplaar gekocht kan worden. Verkoop je in je webshop bijvoorbeeld ook werkbladen bij een cursus, en kan iemand wel meerdere sets van de werkbladen kopen, dan zal je toch alle kolommen zichtbaar moeten houden.