WooCommerce - Sorteer Opties Aanpassen

WooCommerce Product Sorteer Opties Aanpassen

De WooCommerce sorteer optie wordt standaard getoond op de product-overzicht (categorie) pagina’s. De opties zijn niet instelbaar en standaard worden deze getoond:

WooCommerce Standaard Sorteer Opties

WC Sorteer Opties

Hebben we bijvoorbeeld geen product-reviews, dan is de optie om te sorteren op “waardering” eigenlijk overbodig, en in sommige gevallen is het denkbaar dat we de sorteer-opties in zijn geheel niet willen zien.

Sorteeropties Verbergen

Het verbergen van de sorteeropties kan met behulp van CSS. De juiste CSS-class vinden we met behulp van bijv. de Chrome Inspector:

WooCommerce Productsorteer opties verbergen met css

Sorteeropties CSS-Class

Door hier nu de regel “display: none;” aan toe te voegen, zal de sorteeroptie niet meer zichtbaar zijn. De volgende code dien je dan aan het style.css bestand van het Child-Theme toe te voegen:

.woocommerce .woocommerce-ordering, .woocommerce-page .woocommerce-ordering {
  display:none;
}

Het is ook mogelijk om de sorteeropties in zijn geheel uit te schakelen met behulp van een kleine code-snippet welke we aan het functions.php bestand van het Child-Theme dienen toe te voegen. Die Code Snippet ziet er dan zo uit:

/* Verwijder WooCommerce Sorteeropties */

remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

Voor meer informatie over het gebruik van code-snippets, zie dit artikel: WordPress Code Snippets.

Het gebruik van de code-snippet heeft zijn voorkeur boven die van de CSS-methode. De opbouw van sorteer-optie vindt namelijk niet plaats, terwijl bij de CSS-methode die opbouw wel gebeurd en dan weer uitgeschakeld (verborgen) wordt.


Enkele Sorteeroptie Verwijderen

Willen we bijvoorbeeld de optie om te sorteren op “waardering” uitschakelen en de rest wel beschikbaar stellen dan kan dat ook. We voegen dan de volgende code-snippet toe:

/* WooCommerce Verwijder "Waardering" Sorteer Optie */

add_filter( 'woocommerce_catalog_orderby', 'qwain_wc_remove_sorting_option' );

function qwain_wc_remove_sorting_option( $options ) {
    unset( $options['rating'] );    
    return $options;
}

Door middel van de regel “unset” is nu deze sorteeroptie niet meer beschikbaar.

De overige sorteeropties zijn ook uit te schakelen en hebben de volgende benaming:

  • ‘Standaard Sortering’ → ‘menu_order’
  • ‘Sorteer op populariteit’ → ‘popularity’
  • ‘Sorteer op nieuwste’ → ‘date’
  • ‘Sorteer op prijs: laag naar hoog’ → ‘price’
  • ‘Sorteer op prijs: hoog naar laag’ → ‘price-desc’

Sorteeroptie Toevoegen

Het is ook mogelijk om een sorteeroptie toe te voegen. Willen we bijvoorbeeld sorteren op productnaam (de titel van het product), dan dienen we die sorteeroptie bekend te maken aan WooCommerce met behulp van het volgende stukje code:

/* WooCommerce Sorteeroptie Product op naam */

add_filter( 'woocommerce_get_catalog_ordering_args', 'qwain_wc_sort_by_name' );
function qwain_wc_sort_by_name( $args ) {
    $orderby_value = isset( $_GET['orderby'] ) ? wc_clean( (string) wp_unslash( $_GET['orderby'] ) ) : wc_clean( get_query_var( 'orderby' ) );
    if ( 'name' == $orderby_value ) {
        $args['orderby'] = 'title';
        $args['order'] = 'asc';
        $args['meta_key'] = '';
    }
return $args;
}

add_filter( 'woocommerce_catalog_orderby', 'qwain_wc_load_custom_product_sorting' );
function qwain_wc_load_custom_product_sorting( $options ) {
$options['name'] = 'Sorteer op naam (asc)';
return $options;
}

Door middel van de eerste functie met deze code maken we een nieuw product-filter bekend en de tweede functie voegt de sorteeroptie aan aan het sorteer-menu (dropdown).

Vragen & Info

Heb je vragen naar aanleiding van dit artikel, stuur ons dan een mail op: info@qwain.nl of geef een reactie via onderstaand reactie-formulier.

Op de hoogte blijven van alle WordPress Nieuwtjes, Tips & Tricks… volg ons dan op Facebook .

 

Overige Artikelen


Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *