If you want to have some additional attributes for each product and showing them on the product page, there are some solutions but no one is perfect. I want to have several groups of attributes and show each group in a separate section of the page. So I developed a Widget and put it in a plugin for my specific problem. note that I keep my code very simple for learning proposes.<\/p>\n
1- create a simple plugin structure<\/h4>\n<?php\r\n\/**\r\n * Plugin Name: Elementor ACF Widget\r\n * Description: Elementor Widget to show a group of advanced custom fields\r\n * Plugin URI: https:\/\/avengering.com\/\r\n * Version: 1.3.0\r\n * Author: Ali Sohrabi\r\n * Author URI: https:\/\/avengering.com\/\r\n * Text Domain: elementor-advanced-custom-fields\r\n *\/\r\n\r\n<\/pre>\na plugin structure is a simple PHP file inside a directory. as you can see there is some comment line in the first lines of file. this file must be named as the directory name. you can find complete help in this address https:\/\/codex.wordpress.org\/Writing_a_Plugin<\/a><\/p>\n2- add Elementor widget structures<\/h4>\n
Creating a widget for Elementor is very different from creating a widget for WordPress itself. you must create a class that derives from Widget_Base<\/a> <\/strong>class.you can find a full document here https:\/\/developers.elementor.com\/creating-a-new-widget\/<\/a><\/p>\nyou must create a “widget” folder under the plugin root directory. I have put Widget_Base derived class in the “acf4ele.php” file.<\/p>\n
<?php\r\nnamespace Elementoracf4ele\\Widgets;\r\n\r\nuse Elementor\\Widget_Base;\r\nuse Elementor\\Controls_Manager;\r\n\r\nif ( ! defined( 'ABSPATH' ) ) exit; \/\/ Exit if accessed directly\r\n\r\n\/**\r\n * Acf4Ele\r\n *\r\n * Elementor widget for ACF.\r\n *\r\n * @since 1.0.0\r\n *\/\r\nclass acf4ele extends Widget_Base {\r\n<\/pre>\nthen you must declare at least 8 functions in this class. 6 of them are very simple functions that you can understand them by visiting the source code.<\/p>\n
\tpublic function get_name() \r\n\tpublic function get_title() \r\n\tpublic function get_icon() \r\n\tpublic function get_categories() \r\n\tpublic function get_script_depends() \r\n<\/pre>\nyou can find detailed information about these 5 functions in the above link. the two remained functions described in the following paragraphs.<\/p>\n
3- add parameter input controls for design time<\/h3>\n
in the Elementor designer panel, you have the choices to change some Controls of a Widget. but you need some more Controls, for example, the group_ID of advanced custom fields. in the _register_controls function, you must define these Controls.<\/p>\n
\tprotected function _register_controls() {\r\n\t\t$this->start_controls_section(\r\n\t\t\t'section_content',\r\n\t\t\t[\r\n\t\t\t\t'label' => __( 'Content', 'elementor-acf4ele' ),\r\n\t\t\t]\r\n\t\t);\r\n\r\n\t\t$this->add_control(\r\n\t\t\t'groupid',\r\n\t\t\t[\r\n\t\t\t\t'label' => __( 'ACF Group ID', 'elementor-acf4ele' ),\r\n\t\t\t\t'type' => Controls_Manager::TEXT,\r\n\t\t\t]\r\n\t\t);\r\n\r\n\t\t$this->end_controls_section();<\/pre>\nWith\u00a0 $this->start_controls_section <\/em>command, a new section appears in designer panel of Elementor.\u00a0 it is named as ‘section_content’<\/em> and labeled as ‘Content’<\/em> with ‘label’ =>![\"elementor](\"https:\/\/avengering.com\/wp-content\/uploads\/2019\/11\/acfgroupid-300x224.jpg\")
<\/em><\/p>\n __( ‘Content’, ‘elementor-acf4ele’ )<\/em> .<\/p>\nthis section include a Control named as ‘groupid’<\/em> witch labeled as ‘ACF Group ID’<\/em> and type of Text ‘type’ => Controls_Manager::TEXT<\/em>, finally this section is closed with $this->end_controls_section().<\/em> now you have a control that must be filled by Group_ID parameter.<\/p>\nTo finding group_ID of a parameter group in ACF you must go to Custom Fields>Fields Group menu. then select the desired group. now select the Edit link. In the new window go to the right upper corner and copy the group ID and paste it to the Elementor Control panel.<\/p>\n![\"find](\"https:\/\/avengering.com\/wp-content\/uploads\/2019\/11\/photo_2019-11-25_11-05-44.jpg\")
group ID of ACF group<\/figcaption><\/figure>\n4- modify the “Render()” procedure<\/h4>\n
this is the main part of the Widget that appears on the front page. you need a little modification to the code that I published in the previous post.<\/a><\/p>\nprotected function render() {\r\n\t\techo '<div class=\"title\">';\r\n\t\techo '<table>';\r\n\t\t\r\n\t\t$settings = $this->get_settings_for_display();\r\n $fields = acf_get_fields($settings['groupid']);\r\n\t\tforeach( $fields as $field ){\r\n\t\t\t echo '<tr class=\"price\"><td>';\r\n\t\t echo $field['label']; \t\r\n\t\t echo '<\/td>';\r\n\t\t echo \"<td>\";\r\n echo get_field($field['name'],$post_id); \r\n echo \"<\/td><\/tr>\";\r\n\t\t}\r\n\t\techo '<\/table><\/div>';\r\n\t}<\/pre>\nyou can find the complete source code of this project at https:\/\/github.com\/alisohrabit\/ACF4Elementor.<\/a> Consider as I apply the new versions to GIT, you may find some modifications from the above codes.<\/p>\nConclusion<\/h2>\n
As you can see this is very simple to add a new widget to Elementor. now we have a widget that shows a table of a group of additional parameters of a post. these additional parameters are prepared by Advanced custom fields plugin and you can put them grouped, in any section of the page. in the next article of this series, I will create a single product template in Elemntor and use this widget to show the advanced properties of the product on this template.<\/p>\n
A few things to note<\/a>:<\/p><\/blockquote>\n\n- \n
Your plugin should only include the widget class file if Elementor is active and loaded.<\/p><\/blockquote>\n<\/li>\n
- \n
There are other methods available to make your widget more reactive like\u00a0_content_template()<\/code>\u00a0which lets you recreate the\u00a0render()<\/code> method in JavaScript to be used in the Editor which uses the\u00a0MarionetteJS template engine<\/a>\u00a0and using it will render the content of the widget on any instantly on any change to one of his controls without making a request to the server.<\/p><\/blockquote>\n<\/li>\n- \n
a plugin structure is a simple PHP file inside a directory. as you can see there is some comment line in the first lines of file. this file must be named as the directory name. you can find complete help in this address https:\/\/codex.wordpress.org\/Writing_a_Plugin<\/a><\/p>\n Creating a widget for Elementor is very different from creating a widget for WordPress itself. you must create a class that derives from Widget_Base<\/a> <\/strong>class.you can find a full document here https:\/\/developers.elementor.com\/creating-a-new-widget\/<\/a><\/p>\n you must create a “widget” folder under the plugin root directory. I have put Widget_Base derived class in the “acf4ele.php” file.<\/p>\n then you must declare at least 8 functions in this class. 6 of them are very simple functions that you can understand them by visiting the source code.<\/p>\n you can find detailed information about these 5 functions in the above link. the two remained functions described in the following paragraphs.<\/p>\n in the Elementor designer panel, you have the choices to change some Controls of a Widget. but you need some more Controls, for example, the group_ID of advanced custom fields. in the _register_controls function, you must define these Controls.<\/p>\n With\u00a0 $this->start_controls_section <\/em>command, a new section appears in designer panel of Elementor.\u00a0 it is named as ‘section_content’<\/em> and labeled as ‘Content’<\/em> with ‘label’ => __( ‘Content’, ‘elementor-acf4ele’ )<\/em> .<\/p>\n this section include a Control named as ‘groupid’<\/em> witch labeled as ‘ACF Group ID’<\/em> and type of Text ‘type’ => Controls_Manager::TEXT<\/em>, finally this section is closed with $this->end_controls_section().<\/em> now you have a control that must be filled by Group_ID parameter.<\/p>\n To finding group_ID of a parameter group in ACF you must go to Custom Fields>Fields Group menu. then select the desired group. now select the Edit link. In the new window go to the right upper corner and copy the group ID and paste it to the Elementor Control panel.<\/p>\n this is the main part of the Widget that appears on the front page. you need a little modification to the code that I published in the previous post.<\/a><\/p>\n you can find the complete source code of this project at https:\/\/github.com\/alisohrabit\/ACF4Elementor.<\/a> Consider as I apply the new versions to GIT, you may find some modifications from the above codes.<\/p>\n As you can see this is very simple to add a new widget to Elementor. now we have a widget that shows a table of a group of additional parameters of a post. these additional parameters are prepared by Advanced custom fields plugin and you can put them grouped, in any section of the page. in the next article of this series, I will create a single product template in Elemntor and use this widget to show the advanced properties of the product on this template.<\/p>\n A few things to note<\/a>:<\/p><\/blockquote>\n Your plugin should only include the widget class file if Elementor is active and loaded.<\/p><\/blockquote>\n<\/li>\n There are other methods available to make your widget more reactive like\u00a02- add Elementor widget structures<\/h4>\n
<?php\r\nnamespace Elementoracf4ele\\Widgets;\r\n\r\nuse Elementor\\Widget_Base;\r\nuse Elementor\\Controls_Manager;\r\n\r\nif ( ! defined( 'ABSPATH' ) ) exit; \/\/ Exit if accessed directly\r\n\r\n\/**\r\n * Acf4Ele\r\n *\r\n * Elementor widget for ACF.\r\n *\r\n * @since 1.0.0\r\n *\/\r\nclass acf4ele extends Widget_Base {\r\n<\/pre>\n\tpublic function get_name() \r\n\tpublic function get_title() \r\n\tpublic function get_icon() \r\n\tpublic function get_categories() \r\n\tpublic function get_script_depends() \r\n<\/pre>\n
3- add parameter input controls for design time<\/h3>\n
\tprotected function _register_controls() {\r\n\t\t$this->start_controls_section(\r\n\t\t\t'section_content',\r\n\t\t\t[\r\n\t\t\t\t'label' => __( 'Content', 'elementor-acf4ele' ),\r\n\t\t\t]\r\n\t\t);\r\n\r\n\t\t$this->add_control(\r\n\t\t\t'groupid',\r\n\t\t\t[\r\n\t\t\t\t'label' => __( 'ACF Group ID', 'elementor-acf4ele' ),\r\n\t\t\t\t'type' => Controls_Manager::TEXT,\r\n\t\t\t]\r\n\t\t);\r\n\r\n\t\t$this->end_controls_section();<\/pre>\n<\/em><\/p>\n4- modify the “Render()” procedure<\/h4>\n
protected function render() {\r\n\t\techo '<div class=\"title\">';\r\n\t\techo '<table>';\r\n\t\t\r\n\t\t$settings = $this->get_settings_for_display();\r\n $fields = acf_get_fields($settings['groupid']);\r\n\t\tforeach( $fields as $field ){\r\n\t\t\t echo '<tr class=\"price\"><td>';\r\n\t\t echo $field['label']; \t\r\n\t\t echo '<\/td>';\r\n\t\t echo \"<td>\";\r\n echo get_field($field['name'],$post_id); \r\n echo \"<\/td><\/tr>\";\r\n\t\t}\r\n\t\techo '<\/table><\/div>';\r\n\t}<\/pre>\nConclusion<\/h2>\n
\n
_content_template()<\/code>\u00a0which lets you recreate the\u00a0render()<\/code> method in JavaScript to be used in the Editor which uses the\u00a0MarionetteJS template engine<\/a>\u00a0and using it will render the content of the widget on any instantly on any change to one of his controls without making a request to the server.<\/p><\/blockquote>\n<\/li>\n