How to override Elementor Essentials Addons template render output

Problem

Add an Elementor field to an existing section and change the output of the Elementor Essentials Addon output, depending on the value of the field.

Case

My client asked me to add an extra field so he can choose to enable or disable the link to the Post Carousel element of the Elementor Essentials Addon Pro widget.

Solution

Step 1

We will need to hook to elementor/element/before_section_end to add the field as a first step. Thus, we need to add some code to our child theme or custom plugin (never edit directly on a commercial or free plugin)

More info at: https://www.nitroweb.gr/how-to-override-elementor-essentials-addons-template-render-output/
*/
add_action( 'elementor/element/before_section_end', function( $element, $section_id, $args ) {
/** @var \Elementor\Element_Base $element */
// put the field in the right place
if ( 'eael-post-carousel' === $element->get_name() && 'eael_section_post_timeline_layout' == $section_id ) {
$element->add_control(
'nitro_carousel_link_title',
[
'type' => \Elementor\Controls_Manager::SWITCHER, // https://code.elementor.com/classes/elementor-controls_manager/
'label' => __( 'Link title' ),
'label_on' => __( 'Yes' ),
'label_off' => __( 'No' ),
'return_value' => 'yes',
'default' => 'yes',
]
);

On the above code, I am adding a “switcher” field (it’s actually a fancy checkbox) in the eael-post-carousel element and its eael_section_post_timeline_layout sections, by using the add_control method.

It should look like this:

Step 2

We then need to tweak the output of the Widget, in order to add or remove the link from the title of the slide.

We can use the elementor/widget/render_content hook for this, but we also need to use the method eael_get_query_args of the \Essential_Addons_Elementor\Traits\Helper trait. Thus, we need to create a class in order to use it.

}, 10, 3 );
class nitro_elementor_hooks {
use \Essential_Addons_Elementor\Traits\Helper;
function __construct() {
// check if the eael_get_query_args Helper method exists
if( !method_exists( $this, 'eael_get_query_args') ) {
return;
}
add_action( 'elementor/widget/render_content', array( $this, 'nitro_carousel_render' ), 10, 2 );
}
public function nitro_carousel_render( $content, $widget ) {
if ( 'eael-post-carousel' === $widget->get_name() ) {
$settings = $widget->get_settings();
$args = $this->eael_get_query_args($settings);
if ( isset( $settings['nitro_carousel_link_title'] ) && $settings['nitro_carousel_link_title'] != 'yes' ) {
$query = new \WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
$title_link = '';
$title_text = '';
if ($settings['eael_show_title']) {
$title_link .= '<a class="eael-grid-post-link" href="' . get_permalink() . '" title="' . get_the_title() . '">';
if(empty($settings['eael_title_length'])) {
$title_text .= get_the_title();
}else {
$title_text .= implode(" ", array_slice(explode(" ", get_the_title() ), 0, $settings['eael_title_length']));
}
$title_link .= $title_text;
$title_link .= '</a>';
}
$content = str_replace( $title_link, $title_text, $content );
}
}
wp_reset_postdata();
}
}
return $content;
}
}

On the above code, I am “getting” the helper trait, add the Elementor hook, and then tweak the output to serve my needs. You can, of course, override the whole output of the widget. Finally, I call the class.

The full code via Gist:

<?php
/*
an example of how to add an extra field to an elementor section
and then override the ouput of the Elementor Essentials Addons template render
this should go to your child theme functions.php
More info at: https://www.nitroweb.gr/how-to-override-elementor-essentials-addons-template-render-output/
*/
add_action( 'elementor/element/before_section_end', function( $element, $section_id, $args ) {
/** @var \Elementor\Element_Base $element */
// put the field in the right place
if ( 'eael-post-carousel' === $element->get_name() && 'eael_section_post_timeline_layout' == $section_id ) {
$element->add_control(
'nitro_carousel_link_title',
[
'type' => \Elementor\Controls_Manager::SWITCHER, // https://code.elementor.com/classes/elementor-controls_manager/
'label' => __( 'Link title' ),
'label_on' => __( 'Yes' ),
'label_off' => __( 'No' ),
'return_value' => 'yes',
'default' => 'yes',
]
);
}
}, 10, 3 );
class nitro_elementor_hooks {
use \Essential_Addons_Elementor\Traits\Helper;
function __construct() {
// check if the eael_get_query_args Helper method exists
if( !method_exists( $this, 'eael_get_query_args') ) {
return;
}
add_action( 'elementor/widget/render_content', array( $this, 'nitro_carousel_render' ), 10, 2 );
}
public function nitro_carousel_render( $content, $widget ) {
if ( 'eael-post-carousel' === $widget->get_name() ) {
$settings = $widget->get_settings();
$args = $this->eael_get_query_args($settings);
if ( isset( $settings['nitro_carousel_link_title'] ) && $settings['nitro_carousel_link_title'] != 'yes' ) {
$query = new \WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
$title_link = '';
$title_text = '';
if ($settings['eael_show_title']) {
$title_link .= '<a class="eael-grid-post-link" href="' . get_permalink() . '" title="' . get_the_title() . '">';
if(empty($settings['eael_title_length'])) {
$title_text .= get_the_title();
}else {
$title_text .= implode(" ", array_slice(explode(" ", get_the_title() ), 0, $settings['eael_title_length']));
}
$title_link .= $title_text;
$title_link .= '</a>';
}
$content = str_replace( $title_link, $title_text, $content );
}
}
wp_reset_postdata();
}
}
return $content;
}
}
new nitro_elementor_hooks();

Woocommerce Variations to Table – Grid

This WordPress – WooCommerce plugin will turn product’s page default variations select-option menus to user friendly table – grid display. It features a self-explanatory with plenty of options admin settings panel, great documentation and support and per product options. The plugin is published in Codecanyon for purchase here.

Woocommerce Export products to XLS

Woocommerce Export products to XLS is a WordPress plugin that will export your Woocommerce product data to Microsoft Office Excel XLS format. The plugin is published in Codecanyon for purchase here.

WP Font Awesome Share Icons

WP Font Awesome Share Icons is a simple plugin that will help you put social sharing buttons on your site without writing any code, in a SEO friendly way. It is available in English, Greek and Spanish. The plugin is published for free download on wordpress.org and you can download it from here.

Simple SEO Slideshow

Simple SEO Slideshow is a WordPress plugin, for displaying on your site the images of a gallery from a specified post or page. The plugins allows you to display a slideshow in a widget with title, description and custom link from page or post gallery. The plugin is published for free download on wordpress.org and you can download it from here.

Simple SEO Categories Posts

Simple SEO Categories Posts is a WordPress plugin, for displaying on your site the posts from specified categories. The plugin allows you to display posts in a widget with title, thumb, excerpt, date and author. The plugin is published for free download on wordpress.org and you can download it from here.

Joomla – Virtuamart price updater by category per usergroup

This is a Joomla! component that installs via the Joomla installer. It can update prices by category, by shopper’s group with Virtuemart bulk price options, based on the default shopper group price, by giving a percentage and choosing an action.

It is inspired by Bureau Van Vliet B.V. VM Category Discount component.

All you have to do is install and:

1. Choose the category
2. Choose the action (-/+) and the percentage from the default price
3. You may add the quantity that the price starts
4. You may add the quantity that the price ends
5. Choose the shopper group from the list below
6. Click on Change prices to products

Tested on Joomla 1.5.23 and Virtuemart 1.1.8.

Download Category Price Update for Joomla – Virtuemart