Uitleg & kennis

Specifieke product attributen tonen op een categorie pagina in WordPress

Soms struin je het hele internet af op zoek naar dat stukje code dat je kunt gebruiken, of kunt aanpassen naar je wensen. Ongetwijfeld ben je zo ook op deze pagina gekomen. Het is niet altijd nodig om code zelf te maken, want met WordPress zijn de meeste problemen al een keer getackeld door iemand anders. Zodoende kun je veel voorbeelden van codes vinden op het web.

Toon eenvoudig specifieke product attributen op een categorie overzicht in Woocommerce

Wil jij Specifieke product attributen tonen op een categorie overzichtspagina kijk dan snel verder. Met onderstaande code, die je kunt kopiëren in je functions.php bestand (of implementeren via de plugin Code Snippets) in WordPress kun je eenvoudig specifeke productattributen tonen op de categorieoverzichtspagina van WooCommerce:

Het resultaat is bijvoorbeeld als volgt;

In dit voorbeeld wordt ‘operational lease’ en 30.000 km per jaar als productattribuut getoond. Hier is via CSS een afbeelding bijgevoegd. (met het :before element)

Plak dus onderstaande code in je functions.php:

add_action('woocommerce_after_shop_loop_item','add_attribute');
function add_attribute() {
    global $product;
    // Hier maak je een lijst met je productattributen die je wilt tonen
    $product_attributes = array( 'pa_leasevorm', 'pa_km-per-jaar');
    $attr_output = array();
    // array met de attributen
    foreach( $product_attributes as $taxonomy ){
        if( taxonomy_exists($taxonomy) ){
            $label_name = get_taxonomy( $taxonomy )->labels->singular_name;
            $value = $product->get_attribute( $taxonomy );
               if( ! empty($value) ){
                // Storing attributes for output. eventueel labelnaam uitcommenten voor de naam van het attribuut tonen
                $attr_output[] = '<span class="'.$taxonomy.'"><!--'.$label_name.':-->
    '.$value.'</span>';
            }
        }
    }
    // output, je kunt eventueel $label_name toevoegen aan de string
    echo '<div class="product-attributes">'.implode( $attr_output
    ).'</div>';
}

Optioneel kun je de comment tag bij Label Name uitzetten, waardoor je product attribuut naam ook verschijnt. Je moet dit bij de output dan nog wel even toevoegen, voor $attr_output.

Succes!