Woocommerce: Add key based class to LI's in 'wc_display_item_meta'

Question

I'm not a coder. I do my best to understand PHP and over the years I have been able to tweak bits here and there, partly using examples and just by trial & error. But right now I am stuck.

I want to dynamically add CSS-classes to the LI's in the following example output generated by function "wc_display_item_meta" starting at line 3206 in the file /woocommerce/includes/wc-template-functions.php :

<ul class="wc-item-meta">
    <li>
        <strong class="wc-item-meta-label">Your Full Name</strong>
        <p>John Doe</p>
    </li>
    <li>
        <strong class="wc-item-meta-label">Your Previous Function</strong>
        <p>Carpenter</p>
    </li>
</ul>

These classes should be based on the item labels (keys), so that the example above would become

<ul class="wc-item-meta">
    <li class="your-full-name">
        <strong class="wc-item-meta-label">Your Full Name</strong>
        <p>John Doe</p>
    </li>
    <li class="your-previous-function">
        <strong class="wc-item-meta-label">Your Previous Function</strong>
        <p>Carpenter</p>
    </li>
</ul>

Based on a number of related problems on StackOverflow (for example can I add id or class 'wc_display_item_meta' ) and other bits and pieces on the web, and by trial & error, I have come up with the following code for use in functions.php:

function modified_woocommerce_display_item_meta( $html, $item, $args = array() ) {
$strings = array();
    $html = '';
    foreach ( $item->get_formatted_meta_data() as $meta_id => $meta ) {
        $display_value = wp_strip_all_tags( $meta->display_value );
        $display_key = $meta->display_key;
        $display_clean_key = sanitize_title_with_dashes( $meta->display_key );
        $value = $args['autop'] ? wp_kses_post( $display_value ) : wp_kses_post( make_clickable( trim( $display_value ) ) );
        $args['before'] = '<ul class="wc-item-meta"><li class="' . wp_strip_all_tags( $display_clean_key ) . '">';
        $args['separator'] = '</li><li class="' . wp_strip_all_tags( $display_clean_key ) . '">';
        $strings[] = $args['label_before'] . wp_kses_post( $display_key ) . $args['label_after'] . '<p>' . $value . '</p>';
    }
    if ( $strings ) {
        $html = $args['before'] . implode( $args['separator'], $strings ) . $args['after'];
    }
    return $html;
}
add_filter( 'woocommerce_display_item_meta', 'modified_woocommerce_display_item_meta', 10, 3 );

This leads to output like

<ul class="wc-item-meta">
    <li class="your-previous-function">
        <strong class="wc-item-meta-label">Your Full Name</strong>
        <p>John Doe</p>
    </li>
    <li class="your-previous-function">
        <strong class="wc-item-meta-label">Your Previous Function</strong>
        <p>Carpenter</p>
    </li>
</ul>

So the code works for the most part, except that all LI's get the same class, which is based on the label/key of the last item (in this case "your-previous-function". In the real situation I have about 10 LI's and they all get the class of the label/key of the last item, instead of their own.

How can I get what I want? I don't even really understand the code I have cobbled together, so I probably won't understand coding hints and directions. I'd appreciate ready to use code.

Answer 1

My coding wizard friend M. stepped in and solved it with this code:

function modified_woocommerce_display_item_meta( $html, $item, $args = array() ) {
$strings = array();
    $html = '';
    $class2li = '';
    $before = '<ul class="wc-item-meta">';
    $after = '</ul>';
    foreach ( $item->get_formatted_meta_data() as $meta_id => $meta ) {
        $display_value = wp_strip_all_tags( $meta->display_value );
        $display_key = $meta->display_key;     
        $display_clean_key = sanitize_title_with_dashes( $meta->display_key );
        $value = $args['autop'] ? wp_kses_post( $display_value ) : wp_kses_post( make_clickable( trim( $display_value ) ) );
        $class2li .=  '<li class="' . wp_strip_all_tags( $display_clean_key ) . '">' .
         '<strong class="wc-item-meta-label">' . $display_key . ': </strong>
         <p>' . $value . '</p></li>';
    }
    $html = $before . $class2li . $after;
    return $html;
}
add_filter( 'woocommerce_display_item_meta', 'modified_woocommerce_display_item_meta', 10, 3 );

It works great. Thanks again mate!