Widgets are an important part of the Jupiter theme. Each widget has specific functionalities, some of them are configurable from the widget settings field but if you need more customization, one way is to override a widget in the child theme. In this article, we’ll explain about overriding widgets in the child theme.
Widgets Directory Introduction
In the Jupiter Core plugin there is a Widgets directory which is located in wp-content > plugins > jupiter-core > includes > widgets in your web host.
In Jupiter versions before 6.3, the directory was located in in wp-content > themes > jupiter > views > widgets.

The widgets directory contains all widgets files, each responsible for a specific widget. The names are intuitive and you will be able to identify which file is for which widget simply by checking the name of the file.
Overriding Widgets Directory
In the WordPress world, override term means to copy a file from the parent theme or plugin and pasting it to a child theme with same directory hierarchy, then editing the copied file. WordPress loads the edited file automatically.
To override a widget, Contact info, for example:
- Jupiter Core: wp-content > plugins > jupiter-core > includes > widgets
- Child theme: wp-content > themes > jupiter-child > views > widgets


Changing Icons in Contact Info Widget
To clarify the overriding process, in this example, we override Contact Info widget to change the Person icon.

<?php if ( !empty( $person ) ):?><li><?php Mk_SVG_Icons::get_svg_icon_by_class_name(true,'mk-moon-user-7', 16); ?><span itemprop="name"><?php echo $person;?></span></li><?php endif;?>

<?php if ( !empty( $person ) ):?><li><?php Mk_SVG_Icons::get_svg_icon_by_class_name(true,'mk-li-user', 16); ?><span itemprop="name"><?php echo $person;?></span></li><?php endif;?>

Making Texts Clickable in Contact Info Widget
To clarify the overriding process more, in this example, we override Contact Info widget to change the make the Phone number clickable.

<?php if ( !empty( $phone ) ):?><li><?php Mk_SVG_Icons::get_svg_icon_by_class_name(true,'mk-icon-phone', 16); ?><span><?php echo $phone;?></span></li><?php endif;?>
<?php if ( !empty( $phone ) ):?><li><?php Mk_SVG_Icons::get_svg_icon_by_class_name(true,'mk-icon-phone', 16); ?><span><a href="tel:<?php echo $phone;?>"><?php echo $phone;?></a></span></li><?php endif;?>