Adding h4 in Woocommerce attribute and custom field list

Viewed 83

I am displaying several product attributes and custom meta fields on the single product page with this code I got here:

function action_woocommerce_single_product_summary() {
global $product;

$attributes_names = array( 'Brand', 'Color', 'Size' );

$attributes_data  = array();

foreach ( $attributes_names as $attribute_name ) {
    if ( $value = $product->get_attribute($attribute_name) ) {
        $attributes_data[] = $attribute_name . ': ' . $value;
    }       
}

// NOT empty
if ( ! empty($attributes_data) ) {
    echo '<h4>' . __( 'Details', 'woocommerce' ) . '</h4><ul><li>' . implode( '</li><li>', $attributes_data );
}

// Get meta
$sn = $product->get_meta( 'Serial_Number' );    
$mpn = $product->get_meta( 'MPN' );

// NOT empty
if ( ! empty ( $sn ) ) {
    echo '<li>' . __( 'My label 1: ', 'woocommerce' ) . $sn . '</li>';
}

// NOT empty
if ( ! empty ( $mpn ) ) {
    echo '<li>' . __( 'My label 2: ', 'woocommerce' ) . $mpn . '</li>';
}

echo '</ul>';
}

add_action( 'woocommerce_single_product_summary', 'action_woocommerce_single_product_summary', 36, 0 );

My problem is that the h4 ('Details') and the starting ul are only displayed when there are attributes. When there are only custom fields set for a product, the h4 and the starting ul for the list are not displayed. How can I always show the h4 and the starting

    whenever either an attribute or a custom field is set for a product?

    EDIT to clarify: There are 3 possible product types:

  • products that have attributes AND custom fields
  • products that ONLY have an attribute OR custom field
  • products that neither have an attribute or custom field

For the first type of products, it should be displayed for example:

<h4>Details</h4>
<ul>
<li>Brand: ...</li>
<li>MPN: ...</li>
</ul>

For the second type of products an example would be:

<h4>Details</h4>
<ul>
<li>MPN: ...</li>
</ul>

and for the last type of products NOTHING should be displayed at all.

1 Answers

There are multiple ways to set that up, you could do that using either if/else statement or a ternary operator. For example you could do something like this:

// Using "if/else" method 

if ( ! empty($attributes_data) ) {

    echo '<h4>' . __( 'Details', 'woocommerce' ) . '</h4><ul><li>' . implode( '</li><li>', $attributes_data );

}else{

    // if it's empty you could output a placeholder text OR a any value you could get from woocommerce

    echo '<h4>' . __( 'Details', 'woocommerce' ) . '</h4><span>' . {YOUR VALUE OR PLACEHOLDER TEXT AS A FALLBACK} . '</span>';

}

Or you could use the ternary operator like so:

echo ( ! empty($attributes_data) ) ? '<h4>' . __( 'Details', 'woocommerce' ) . '</h4><ul><li>' . implode( '</li><li>', $attributes_data ) : '<h4>' . __( 'Details', 'woocommerce' ) . '</h4><span>' . {YOUR VALUE OR PLACEHOLDER TEXT AS A FALLBACK} . '</span>';

EDIT

Assuming that Serial_Number and MPN are your custom fields, you could set your if condition like this:

add_action( 'woocommerce_single_product_summary', 'action_woocommerce_single_product_summary', 36, 0 );

function action_woocommerce_single_product_summary()
{
  global $product;
  
  $attributes_names = array( 'Brand', 'Color', 'Size' );
  
  $attributes_data  = array();
  
  foreach ( $attributes_names as $attribute_name ) {
      if ( $value = $product->get_attribute($attribute_name) ) {
          $attributes_data[] = $attribute_name . ': ' . $value;
      }       
  }

  $sn = $product->get_meta( 'Serial_Number' );    
  $mpn = $product->get_meta( 'MPN' );

  // Assuming that 'Serial_Number' and 'MPN' are your custom fields
  
  if(! empty($attributes_data) && ! empty ( $sn ) && ! empty ( $mpn )){

    echo '<h4>' . __( 'Details', 'woocommerce' ) . '</h4><ul><li>' . implode( '</li><li>', $attributes_data );
    echo '<li>' . __( 'My label 1: ', 'woocommerce' ) . $sn . '</li>';
    echo '<li>' . __( 'My label 2: ', 'woocommerce' ) . $mpn . '</li>';
    echo '</ul>';

  }elseif(! empty($attributes_data) || ! empty ( $sn ) || ! empty ( $mpn )){

    echo ( ! empty($attributes_data)) ? '<h4>' . __( 'Details', 'woocommerce' ) . '</h4><ul><li>' . implode( '</li><li>', $attributes_data ): '<h4>' . __( 'Details', 'woocommerce' ) . '</h4><ul>';
    echo (! empty ( $sn )) ? '<li>' . __( 'My label 1: ', 'woocommerce' ) . $sn . '</li>' : "";
    echo (! empty ( $mpn )) ? '<li>' . __( 'My label 2: ', 'woocommerce' ) . $mpn . '</li>': "";
    echo '</ul>';

  }else{

    echo '<h4>' . __( 'Details', 'woocommerce' ) . '</h4><p>Looks like there is no extra info on this product!</p>'; 

  }
}

Let me know if that is what you're looking for!

Related