{"id":20000,"date":"2019-10-28T20:32:05","date_gmt":"2019-10-28T19:32:05","guid":{"rendered":"https:\/\/avengering.com\/?p=20000"},"modified":"2019-12-11T21:49:23","modified_gmt":"2019-12-11T20:49:23","slug":"how-to-add-grouped-product-attributes-comparison-in-woocommerce","status":"publish","type":"post","link":"https:\/\/avengering.com\/en\/how-to-add-grouped-product-attributes-comparison-in-woocommerce\/","title":{"rendered":"how to add grouped product attributes comparison in Woocommerce"},"content":{"rendered":"

Preface: Grouped product attributes comparison in WordPress<\/h3>\n

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.<\/p>\n

Woocommerce is a great e-commerce<\/a> 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<\/a> to work with the Advanced Custom Fields<\/a>. It will generate a categorized comparison of the fields of products.<\/p>\n

Advanced Custom Fields is a plugin that lets you add grouped user-defined fields to any type of posts. in WordPress Product<\/em> 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.<\/p>\n

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:<\/p>\n

1-Installing required Plugins<\/h3>\n

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.\u00a0 If you need more information about how to set up these plugins you can find some useful help by a simple search.<\/p>\n

2-Finding template file<\/h3>\n

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 :<\/p>\n

\"categorized
woocommerce compare product: Finding template file<\/figcaption><\/figure>\n

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.<\/p>\n

3- Insert code within template file<\/h3>\n

insert the following sniped code between two comment lines “<!—->”\u00a0 into the template file.\u00a0 this is the most basic code that already works :<\/p>\n

                <\/tr>\r\n            <?php endif; ?>\r\n<!---------- Additional Code Start Here -------------------------------------->\r\n<?php  \r\n    $fieldGroups=acf_get_field_groups();       \r\n    for ($i = 0; $i < count($fieldGroups); $i++) { \r\n\r\n        $fields = array();\r\n        $fields = acf_get_fields($fieldGroups[$i]['ID']);\r\n        if( $fields ){\r\n              $has_value=false;\r\n              foreach( $fields as $field ){\r\n                   foreach( $products as $product_id => $product ) { \r\n                       if (!empty(trim(get_field($field['name'],$product_id))) and empty($field['instructions'])) {\r\n                            $has_value=true;\r\n                        } \r\n                   }\r\n              }\r\n              if ($has_value) :\r\n                 echo  '<tr class=\"price\"><th>';\r\n                 echo $fieldGroups[$i]['title']; \r\n                 echo '<\/th>';\r\n                 foreach( $products as $product_id => $product ) { echo '<td><\/td>';  } \r\n                 echo '<\/tr>';\r\n               endif;\r\n    \r\n       \r\n               foreach( $fields as $field ){\r\n                   if (empty($field['instructions'])){\r\n                       $has_value=false;\r\n                       foreach( $products as $product_id => $product ) { \r\n                            if (!empty(trim(get_field($field['name'],$product_id)))) {\r\n                                    $has_value=true;\r\n                            } \r\n                       }      \r\n                   if ($has_value) :        \r\n                         echo '<tr class=\"add-to-cart\"><td>';\r\n                         echo $field['label']; \r\n                         echo '<\/td>';\r\n                            foreach( $products as $product_id => $product ){\r\n                                echo \"<td>\";\r\n                                echo get_field($field['name'],$product_id); \r\n                                echo \"<\/td>\";\r\n                            }         \r\n                         echo   \"<\/tr>\";      \r\n                    endif;                 \r\n                }\r\n          }      \r\n      }\r\n  }   \r\n?>  \r\n<!-------------- Additional Code End ------------------------------>\r\n\t\t<\/tbody>\r\n\t<\/table>\r\n<\/pre>\n
 <\/p>\n
now you have a simple categorized compare table of products.<\/p>\n
in the above code; this line gets all of the fields group from the advanced custom field (ACF) and runs a loop on them<\/span>\u00a0then for each of them gets the filed list of each group.<\/span><\/p>\n
$fieldGroups=acf_get_field_groups(); \r\nfor ($i = 0; $i < count($fieldGroups); $i++) {\r\n                $fields = array(); \r\n                $fields = acf_get_fields($fieldGroups[$i]['ID']); \r\n                if( $fields ){<\/pre>\n
if there is any field in the group, the following code will be executed :<\/p>\n
$has_value=false; \r\nforeach( $fields as $field ){ \r\n         foreach( $products as $product_id => $product ) { \r\n              if (!empty(trim(get_field($field['name'],$product_id))) and empty($field['instructions'])) { \r\n                 $has_value=true; \r\n} } }<\/pre>\n
the above code check if any field of field group has value. if any, the group header will be inserted in the output.<\/p>\n
another noticeable part of code is here :<\/p>\n
foreach( $fields as $field ){ \r\n      if (empty($field['instructions'])){ \r\n            $has_value=false; \r\n            foreach( $products as $product_id => $product ) { \r\n                if (!empty(trim(get_field($field['name'],$product_id)))) { \r\n                   $has_value=true; \r\n} }<\/pre>\n
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.<\/p>\n
Conclusion<\/h3>\n
this is the simplest possible code to add a grouped product attributes comparison in a compare table.\u00a0 as you can find, it is very easy to change by yourself and add more functionality to it. \u00a0in the next articles, i will show another advanced technique to use the advanced custom field (ACF) more effectively.<\/p>\n","protected":false},"excerpt":{"rendered":"
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. […]<\/p>\n","protected":false},"author":2,"featured_media":20603,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"_glsr_average":0,"_glsr_ranking":0,"_glsr_reviews":0,"footnotes":""},"categories":[3370,1718],"tags":[1721,3230,1719,2685,1722],"yoast_head":"\nhow to add grouped product attributes comparison in Woocommerce<\/title>\n<meta name=\"description\" content=\"this is the simplest possible code to add a grouped product attributes comparison to compare table of woocommerce.find all of tips\" \/>\n<meta name=\"robots\" content=\"index, nofollow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/avengering.com\/en\/how-to-add-grouped-product-attributes-comparison-in-woocommerce\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"how to add grouped product attributes comparison in Woocommerce\" \/>\n<meta property=\"og:description\" content=\"this is the simplest possible code to add a grouped product attributes comparison to compare table of woocommerce.find all of tips\" \/>\n<meta property=\"og:url\" content=\"https:\/\/avengering.com\/en\/how-to-add-grouped-product-attributes-comparison-in-woocommerce\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/avengering\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-28T19:32:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-12-11T20:49:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/avengering.com\/wp-content\/uploads\/2019\/10\/maxresdefault.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"ali sohrabi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@avengering1\" \/>\n<meta name=\"twitter:site\" content=\"@avengering1\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ali sohrabi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"how to add grouped product attributes comparison in Woocommerce","description":"this is the simplest possible code to add a grouped product attributes comparison to compare table of woocommerce.find all of tips","robots":{"index":"index","follow":"nofollow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/avengering.com\/en\/how-to-add-grouped-product-attributes-comparison-in-woocommerce\/","og_locale":"en_US","og_type":"article","og_title":"how to add grouped product attributes comparison in Woocommerce","og_description":"this is the simplest possible code to add a grouped product attributes comparison to compare table of woocommerce.find all of tips","og_url":"https:\/\/avengering.com\/en\/how-to-add-grouped-product-attributes-comparison-in-woocommerce\/","article_publisher":"https:\/\/www.facebook.com\/avengering\/","article_published_time":"2019-10-28T19:32:05+00:00","article_modified_time":"2019-12-11T20:49:23+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/avengering.com\/wp-content\/uploads\/2019\/10\/maxresdefault.jpg","type":"image\/jpeg"}],"author":"ali sohrabi","twitter_card":"summary_large_image","twitter_creator":"@avengering1","twitter_site":"@avengering1","twitter_misc":{"Written by":"ali sohrabi","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/avengering.com\/en\/how-to-add-grouped-product-attributes-comparison-in-woocommerce\/#article","isPartOf":{"@id":"https:\/\/avengering.com\/en\/how-to-add-grouped-product-attributes-comparison-in-woocommerce\/"},"author":{"name":"ali sohrabi","@id":"https:\/\/avengering.com\/en\/#\/schema\/person\/c3f5a067a60c606366dab72381533aae"},"headline":"how to add grouped product attributes comparison in Woocommerce","datePublished":"2019-10-28T19:32:05+00:00","dateModified":"2019-12-11T20:49:23+00:00","mainEntityOfPage":{"@id":"https:\/\/avengering.com\/en\/how-to-add-grouped-product-attributes-comparison-in-woocommerce\/"},"wordCount":709,"commentCount":0,"publisher":{"@id":"https:\/\/avengering.com\/en\/#organization"},"image":{"@id":"https:\/\/avengering.com\/en\/how-to-add-grouped-product-attributes-comparison-in-woocommerce\/#primaryimage"},"thumbnailUrl":"https:\/\/avengering.com\/wp-content\/uploads\/2019\/10\/maxresdefault.jpg","keywords":["Advanced custom fields","e-commerce","elementor","woocommerce","WordPress"],"articleSection":["How to","wordpress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/avengering.com\/en\/how-to-add-grouped-product-attributes-comparison-in-woocommerce\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/avengering.com\/en\/how-to-add-grouped-product-attributes-comparison-in-woocommerce\/","url":"https:\/\/avengering.com\/en\/how-to-add-grouped-product-attributes-comparison-in-woocommerce\/","name":"how to add grouped product attributes comparison in Woocommerce","isPartOf":{"@id":"https:\/\/avengering.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/avengering.com\/en\/how-to-add-grouped-product-attributes-comparison-in-woocommerce\/#primaryimage"},"image":{"@id":"https:\/\/avengering.com\/en\/how-to-add-grouped-product-attributes-comparison-in-woocommerce\/#primaryimage"},"thumbnailUrl":"https:\/\/avengering.com\/wp-content\/uploads\/2019\/10\/maxresdefault.jpg","datePublished":"2019-10-28T19:32:05+00:00","dateModified":"2019-12-11T20:49:23+00:00","description":"this is the simplest possible code to add a grouped product attributes comparison to compare table of woocommerce.find all of tips","breadcrumb":{"@id":"https:\/\/avengering.com\/en\/how-to-add-grouped-product-attributes-comparison-in-woocommerce\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/avengering.com\/en\/how-to-add-grouped-product-attributes-comparison-in-woocommerce\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/avengering.com\/en\/how-to-add-grouped-product-attributes-comparison-in-woocommerce\/#primaryimage","url":"https:\/\/avengering.com\/wp-content\/uploads\/2019\/10\/maxresdefault.jpg","contentUrl":"https:\/\/avengering.com\/wp-content\/uploads\/2019\/10\/maxresdefault.jpg","width":1280,"height":720,"caption":"woocommerce compare product"},{"@type":"BreadcrumbList","@id":"https:\/\/avengering.com\/en\/how-to-add-grouped-product-attributes-comparison-in-woocommerce\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/avengering.com\/en\/"},{"@type":"ListItem","position":2,"name":"how to add grouped product attributes comparison in Woocommerce"}]},{"@type":"WebSite","@id":"https:\/\/avengering.com\/en\/#website","url":"https:\/\/avengering.com\/en\/","name":"Avenger IT Next Generation","description":"site web Concepcion","publisher":{"@id":"https:\/\/avengering.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/avengering.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/avengering.com\/en\/#organization","name":"Avenger It Next Generation","url":"https:\/\/avengering.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/avengering.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/avengering.com\/wp-content\/uploads\/2019\/03\/av-logo.jpg","contentUrl":"https:\/\/avengering.com\/wp-content\/uploads\/2019\/03\/av-logo.jpg","width":672,"height":156,"caption":"Avenger It Next Generation"},"image":{"@id":"https:\/\/avengering.com\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/avengering\/","https:\/\/x.com\/avengering1","https:\/\/www.instagram.com\/avengeritnextgeneration\/","https:\/\/linkedin.com\/company\/avengering","https:\/\/www.pinterest.fr\/kaviani0593\/","https:\/\/www.youtube.com\/channel\/UCVwQU9Tx51ptiSG-Z9MOOTQ"]},{"@type":"Person","@id":"https:\/\/avengering.com\/en\/#\/schema\/person\/c3f5a067a60c606366dab72381533aae","name":"ali sohrabi","description":"master of science in software engineering. About 20 years of writing codes. developer of desktop and web based financial software.","sameAs":["https:\/\/avengering.com","https:\/\/www.linkedin.com\/in\/ali-sohrabi-9772a739\/"],"url":"https:\/\/avengering.com\/en\/author\/sohrabi-ali\/"}]}},"_links":{"self":[{"href":"https:\/\/avengering.com\/en\/wp-json\/wp\/v2\/posts\/20000"}],"collection":[{"href":"https:\/\/avengering.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/avengering.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/avengering.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/avengering.com\/en\/wp-json\/wp\/v2\/comments?post=20000"}],"version-history":[{"count":0,"href":"https:\/\/avengering.com\/en\/wp-json\/wp\/v2\/posts\/20000\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/avengering.com\/en\/wp-json\/wp\/v2\/media\/20603"}],"wp:attachment":[{"href":"https:\/\/avengering.com\/en\/wp-json\/wp\/v2\/media?parent=20000"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/avengering.com\/en\/wp-json\/wp\/v2\/categories?post=20000"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/avengering.com\/en\/wp-json\/wp\/v2\/tags?post=20000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}