Preface: Grouped product attributes comparison in WordPress
Adding advanced fields in product comparison in WordPress is necessary to feature. but there is no ready to use the plugin for this. In this article, i will show you how to compare additional fields of a product in a comparison table.
Woocommerce is a great e-commerce script. it used in a very large amount of online shops all around the world. But it has an annoying limitation; it doesn’t support categorized attributes for products. There are some plugins that provide some functionality of attributes, but no one is perfect. in a series of articles, I want to create some plugins or manipulate some other to reach a perfect attribute set for Woocommerce. In this post, I will show you how to manipulate Yith Woocommerce compare plugin to work with the Advanced Custom Fields. It will generate a categorized comparison of the fields of products.
Advanced Custom Fields is a plugin that lets you add grouped user-defined fields to any type of posts. in WordPress Product is one of the post types so you can add unlimited additional fields like Model, Brand, Capacity, Material and so on to limited Woocommerce fields by Advanced Custom Fields. These fields appear on back-end and shop admin can set their values but this won’t be shown in the single product page or comparison page.
Woocommerce does not have to compare product ability by itself but there are some plugins that can add this ability to it. One of them is the Yith Woocommerce Compare Plugin. it can show Advanced Custom Fields on compares by the additional plugin but this is not grouped and there is no good control on hiding and sorting fields. now we want to make some changes to Yith Woocommerce Compare plugin to have a better comparison on products:
1-Installing required Plugins
first of all, you must install Woocommerce and advanced custom field (ACF) and Yith woocommerce compare plugins. then set up Woocommerce and in an advanced custom field (ACF) define fields group and fields and assign them to products. If you need more information about how to set up these plugins you can find some useful help by a simple search.
2-Finding template file
then find the template file of compare plugin. go to the plugin editor of your WordPress site and choose the free or advanced version of the Yith compare plugin, and locate the template folder :
in a free version (2.3.16) you must change the “compare.php” file in the template folder. additional code inserted about line 197. and in premium version (2.2.4), the file is “Yith-compare-table.php” and code inserted about line 185.
3- Insert code within template file
insert the following sniped code between two comment lines “<!—->” into the template file. this is the most basic code that already works :
</tr>
<?php endif; ?>
<!---------- Additional Code Start Here -------------------------------------->
<?php
$fieldGroups=acf_get_field_groups();
for ($i = 0; $i < count($fieldGroups); $i++) {
$fields = array();
$fields = acf_get_fields($fieldGroups[$i]['ID']);
if( $fields ){
$has_value=false;
foreach( $fields as $field ){
foreach( $products as $product_id => $product ) {
if (!empty(trim(get_field($field['name'],$product_id))) and empty($field['instructions'])) {
$has_value=true;
}
}
}
if ($has_value) :
echo '<tr class="price"><th>';
echo $fieldGroups[$i]['title'];
echo '</th>';
foreach( $products as $product_id => $product ) { echo '<td></td>'; }
echo '</tr>';
endif;
foreach( $fields as $field ){
if (empty($field['instructions'])){
$has_value=false;
foreach( $products as $product_id => $product ) {
if (!empty(trim(get_field($field['name'],$product_id)))) {
$has_value=true;
}
}
if ($has_value) :
echo '<tr class="add-to-cart"><td>';
echo $field['label'];
echo '</td>';
foreach( $products as $product_id => $product ){
echo "<td>";
echo get_field($field['name'],$product_id);
echo "</td>";
}
echo "</tr>";
endif;
}
}
}
}
?>
<!-------------- Additional Code End ------------------------------>
</tbody>
</table>
now you have a simple categorized compare table of products.
in the above code; this line gets all of the fields group from the advanced custom field (ACF) and runs a loop on them then for each of them gets the filed list of each group.
$fieldGroups=acf_get_field_groups();
for ($i = 0; $i < count($fieldGroups); $i++) {
$fields = array();
$fields = acf_get_fields($fieldGroups[$i]['ID']);
if( $fields ){if there is any field in the group, the following code will be executed :
$has_value=false;
foreach( $fields as $field ){
foreach( $products as $product_id => $product ) {
if (!empty(trim(get_field($field['name'],$product_id))) and empty($field['instructions'])) {
$has_value=true;
} } }the above code check if any field of field group has value. if any, the group header will be inserted in the output.
another noticeable part of code is here :
foreach( $fields as $field ){
if (empty($field['instructions'])){
$has_value=false;
foreach( $products as $product_id => $product ) {
if (!empty(trim(get_field($field['name'],$product_id)))) {
$has_value=true;
} }in the above code, first the “instructions” field will be checked. I used this field for marking fields that I don’t want to show in a comparison table. you can change this text with anything you want. for example, testing if the instruction field contains the keyword “NOCOMPARE”, then if the fields allowed to show in the compare table, it would be checked if it contains any value.
Conclusion
this is the simplest possible code to add a grouped product attributes comparison in a compare table. as you can find, it is very easy to change by yourself and add more functionality to it. in the next articles, i will show another advanced technique to use the advanced custom field (ACF) more effectively.
