Woocommerce body class

cyber-ki codesnippets

De woocommerce pagina’s maken gebruik van de woocommerce templates.
Waardoor bepaalde functies die normaal gesproken werken voor je pagina’s geen invloed hebben op je woocommerce pagina’s.

Een voorbeeld hiervan is  het verbergen van de “sidebar” (balk met widgets) of het toekennen van bepaalde body classes.

Middels de onderstaande code kun je ervoor zorgen dat er  toch een body class wordt toegevoegd aan je woocommerce pagina. Nu je een body class hebt kun je de pagina naar hartelust stylen.

// Add specific CSS class by filtering NON woocommerce
// declared pages used for woocommerce
add_filter('body_class', 'my_body_class');
function my_body_class($classes) {
    if ( ! is_woocommerce()) {
        $classes[] = 'product-columns-3 woocommerce notWoo';
    }
    return $classes;
}

Bovenstaande code heb ik gevonden op www.fix-css.com

Aangezien ik alleen op de archive product pagina’s geen sidebar wilde en in plaats daarvan een “full width page” heb ik de code aangepast zodat ik het makkelijk kon stijlen.
In dit specifieke geval wordt er gebruik gemaakt van het wp template twenty sixteen. Dit is zo gebouwd dat als je geen sidebar gebruikt je automatisch de hele pagina breedte gebruikt. De class wordt in twenty sixteen “no-sidebar” genoemd. Aangezien ik nog een extra class wilde zodat ik nog iets specifieker kan stijlen heb ik de class “winkel” ook toegevoegd.
De onderstaande code voegt ” no-sidebar en winkel” toe aan de body class maar alleen als de pagina een woocommerce en post-type-archive body class heeft.

NB De shop page en de category pages worden gebruikt door de class “archive”

// Add specific CSS class by filtering NON woocommerce
// declared pages used for woocommerce
add_filter('body_class', 'my_body_class');
function my_body_class($classes) {
  if ( is_page('woocommerce') || is_archive('post-type-archive') ){
        $classes[] = 'no-sidebar winkel';
    }
    return $classes;
}

Let op! Om echt helemaal geen sidebar te hebben moet je ook de action hook verwijderen van de desbetreffende woocommerce pagina

Leave a Reply