woocommerce show attributes on shop page

Have you ever seen that the product list page displays product attributes such as color, and size? You see that it is so attractive but you do not know how to this. This article woocommerce show attributes on shop page will help you. Attributes are quite important as they are the criteria used to filter products. For instance, you filter products by color, or size, etc.

woocommerce show attributes on shop page
This article will guide you on doing the following things

Display attributes for each product on the shop page

Because we display attributes after displaying title, we use the following function woocommerce_shop_loop_item_title. You should see the code below to edit appropriately. Firstly, we just apply it to variant products. If they are not variant products, we do nothing. If products do not have any attribute, we also do not process.


functioniconic_available_attributes() {
global $product;
if ( ! $product->is_type( 'variable' ) ) {
return;
}
$attributes = iconic_get_available_attributes( $product );
if ( empty( $attributes ) ) {
return;
}
foreach ( $attributes as $attribute ) {
?>
<div class="iconic-available-attributes">
<p class="iconic-available-attributes__title"><?php _e( 'Available', 'iconic' ); ?><strong><?php echo $attribute['name']; ?></strong></p>
<ul class="iconic-available-attributes__values">
<?phpforeach ( $attribute['values'] as $value ) { ?>
<li class="iconic-available-attributes__value<?php echo $value['available'] ? '' : 'iconic-available-attributes__value--unavailable'; ?>"><?php echo $value['name']; ?></li>
<?php } ?>
</ul>
</div>
<?php
}
}
 
add_action( 'woocommerce_shop_loop_item_title', 'iconic_available_attributes', 20 );
  
Next, you continue to use the code below
functioniconic_get_available_attributes( $product ) {
static $available_attributes = array();
$product_id = $product->get_id();
if ( isset( $available_attributes[ $product_id ] ) ) {
return $available_attributes[ $product_id ];
}
$available_attributes[ $product_id ] = array();
$attributes = $product->get_variation_attributes();
if ( empty( $attributes ) ) {
return $available_attributes[ $product_id ];
}
$attributes_to_show = iconic_get_attributes_to_show();
foreach ( $attributes as $attribute => $values ) {
if ( ! in_array( $attribute, $attributes_to_show ) ) {
continue;
}
$available_attribute = iconic_get_available_attribute( $product, $attribute, $values );
if ( empty( $available_attribute ) ) {
continue;
}
$available_attributes[ $product_id ][] = $available_attribute;
}
return $available_attributes[ $product_id ];
}

Next, you use the following code. This function includes three parameters which are $product, $attrbute ,$value. They will return the following values
Slug: it is the slug of attribute,
Name : is the name of attribute
Values is the list of attributes including name and available

 
functioniconic_get_available_attribute( $product, $attribute, $values ) {
$available_attribute = array(
'slug' => $attribute,
);
if ( ! taxonomy_exists( $attribute ) ) {
$available_attribute['name'] = $attribute;
foreach ( $values as $value ) {
$available_attribute['values'][ $value ] = array(
'name'      => $value,
'available' =>iconic_has_available_variation( $product, $attribute, $value ),
);
}
return $available_attribute;
}
$taxonomy = get_taxonomy( $attribute );
$labels   = get_taxonomy_labels( $taxonomy );
$available_attribute['name']   = $labels->singular_name;
$available_attribute['values'] = array();
foreach ( $values as $value ) {
$term = get_term_by( 'slug', $value, $attribute );
if ( ! $term ) {
continue;
}
$available_attribute['values'][ $value ] = array(
'name'      => $term->name,
'available' =>iconic_has_available_variation( $product, $attribute, $value ),
);
}
return $available_attribute;
}
Finally, we use the following function to complete.

functioniconic_has_available_variation( $product, $attribute, $value ) {
$available_variation = false;
$attribute           = 'attribute_' .sanitize_title( $attribute );
$variations          = $product->get_available_variations();
 
if ( empty( $variations ) ) {
return $available_variation;
}
 
foreach ( $variations as $variation ) {
foreach ( $variation['attributes'] as $variation_attribute_name => $variation_attribute_value ) {
if ( $attribute !== $variation_attribute_name ) {
continue;
}
 
if ( $value !== $variation_attribute_value&& ! empty( $variation_attribute_value ) ) {
continue;
}
 
$available_variation = $variation['is_purchasable'] && $variation['is_in_stock'];
break;
}
 
if ( $available_variation ) {
break;
}
}
 
return $available_variation;
}
 

After adding function.php file to the theme folder, we will check the front end to see the result. After styling a little bit, we have the result as that at the beginning of this article.

There are some people adding these codes but still face woocommerce show attributes on shop page. They are products to which attributes are not added. Or this category just includes simple products.

Attributes of product have lots of applications in practice. Along with product type, they are used to perform products’ features which are more clearly than using description. Besides, based on the features, filtering products can be done. You could read this article for more information.

If you have any problem with woocommerce show attributes on shop page, please leave a feedback or contact us. We will support you to solve your problem.

Leave a Reply

Your email address will not be published. Required fields are marked *