[Resolved] How to show some few attributes on woocommerce category page?

[Roland]

Hi,

How to show some few attributes on woocommerce category page?

best regards

[Roland]

I find solution

add_action( 'woocommerce_after_shop_loop_item', 'custom_display_post_meta', 9 );

function custom_display_post_meta() {
   global $product;
   $attr = array('pa_cooling-capacity-watts', 'pa_heating-capacity-watts');
   foreach ( $attr as $attribute ) {
   $values = wc_get_product_terms( $product->id, $attribute, array( 'fields' => 'names' ) );
    echo apply_filters( 'woocommerce_attribute', wpautop( wptexturize( implode( ', ', $values ) ) ), $attribute, $values );
}
}

How add label name before attribute?

[Elvin]

Hi Roland,

If you need to add a text label before the attribute, you’ll need to modify this line:

echo apply_filters( 'woocommerce_attribute', wpautop( wptexturize( implode( ', ', $values ) ) ), $attribute, $values );

This particular part of the code is what displays on the front-end.

If you want to add a text, you’ll need to modify it into something like.

$text_label = 'your text here';
echo $text_label.apply_filters( 'woocommerce_attribute', wpautop( wptexturize( implode( ', ', $values ) ) ), $attribute, $values );

But this gets tricky if you want different labels for each attribute as you’ll need a basis or dynamic condition for the $text_label depending on the dynamic value of $attribute.

Example:

add_action( 'woocommerce_after_shop_loop_item', 'custom_display_post_meta', 9 );

function custom_display_post_meta() {
    global $product;
    $attr = array('pa_cooling-capacity-watts', 'pa_heating-capacity-watts');
    foreach ( $attr as $attribute ) {
      $values = wc_get_product_terms( $product->id, $attribute, array( 'fields' => 'names' ) );

      if($attribute == 'pa_cooling-capacity-watts'){
        $text_label = 'Cooling Capacity: ';
      } if($attribute == 'pa_heating-capacity-watts'){
        $text_label = 'Heating Capacity: ';
      }

      echo $text_label.apply_filters( 'woocommerce_attribute', wpautop( wptexturize( implode( ', ', $values ) ) ), $attribute, $values );
    }
}

This is just an example based from assumptions but you can modify this depending on the $attribute value. 😀

[Roland]

Thank you so much. It’s working. Just need to add png before and word at the end.

Now it is like this:

Weight: 300

And I want it like this:

<png image> Weight: 300 kg

Can you help me? Please.

[Elvin]

Will the PNG image serve like some sort of a label icon?

In that case, you may want to consider wrapping the attribute in its own HTML tag so we can include the PNG image before it through a pseudo-element.

Example:

add_action( 'woocommerce_after_shop_loop_item', 'custom_display_post_meta', 9 );

function custom_display_post_meta() {
    global $product;
    $attr = array('pa_cooling-capacity-watts', 'pa_heating-capacity-watts');
    foreach ( $attr as $attribute ) {
      $values = wc_get_product_terms( $product->id, $attribute, array( 'fields' => 'names' ) );

      if($attribute == 'pa_cooling-capacity-watts'){
        $text_label = 'Cooling Capacity: ';
      } if($attribute == 'pa_heating-capacity-watts'){
        $text_label = 'Heating Capacity: ';
      }

      echo '<span class="'.$attribute.'">'.$text_label.apply_filters( 'woocommerce_attribute', wpautop( wptexturize( implode( ', ', $values ) ) ), $attribute, $values ).'</span>';
    }
}

We then style the label’s pseudo-element with CSS to include the PNG beside it.

Example #1: For pa_heating-capacity-watts

.pa_heating-capacity-watts:before {
content:"";
background-image: url(URL-TO-IMAGE.png);
width: 1em;
height: 1em;
display: block;
}

Example #2: For pa_cooling-capacity-watts

.pa_cooling-capacity-watts:before {
content:"";
background-image: url(URL-TO-IMAGE.png);
width: 1em;
height: 1em;
display: block;
}

Make sure to change the value inside url(); to the URL of the image you wish to add. 😀

[Roland]

Thank you, it works very well.

[Elvin]

No problem. 😀

[Author]

Posts