Attribute which are arrays (like "image" are ignored, as are attributes with no values.
Where no heading translation is provided the raw attribute name is output.
<?php
$headings = [ 'attribute_pa_pack-quantity' => 'Pack Qty',
'attribute_pa_variation' => 'Variation',
'sku' => 'SKU',
'variation_description' => 'Var Desc',
'variation_id' => 'Id',
'price_html' => 'Price'
];
$systems = [];
foreach ($variations as $var) {
$atts = array_values($var['attributes']);
$key = $atts[0];
$kv = count($var);
$ka = count($var['attributes']);
if (!isset($systems[$key])) {
$systems[$key] = [];
}
$systems[$key][] = array_merge(array_slice($var['attributes'], 1, $ka-1, 1), array_slice($var, 1, $kv-1, 1));
}
echo '<pre>', print_r($systems, 1), '</pre>';
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<style type='text/css'>
body {
font-family: calibri, sans-serif;
font-size: 10pt;
}
.system {
width: 30%;
float: left;
margin-right: 30px;
}
.item {
padding: 5px;
margin-bottom: 15px;
}
.hdg {
display: inline-block;
width: 150px;
font-weight: 600;
}
</style>
</head>
<body>
<?php
foreach ($systems as $sys => $sdata) {
echo "<div class='system'><h3>$sys</h3>\n";
foreach ($sdata as $item) {
echo "<div class='item'>\n";
foreach ($item as $h => $v) {
if ($v && !is_array($v)) {
$hd = $headings[$h] ?? $h; // use attribute key if no translation available
echo "<div class='hdg'>{$hd}</div>$v<br>\n";
}
}
echo "</div>\n";
}
echo "</div>\n";
}
?>
</body>
</html>