zZzzZ. — /home2/zrzvbdry/airuzu.com/wp-content/themes/savings-pro-main/inc/widgets

Editing: how-it-works.php

<?php
/**
 * Add Slider widget.
 */
class WPCoupon_How_It_Work_Widget extends WP_Widget {
    /**
     * Register widget with WordPress.
     */
    function __construct() {
        parent::__construct(
            'how_it_work', // Base ID
            esc_html__( 'Savings Pro How It Work', 'savings-pro' ), // Name
            array(
                'description' => esc_html__( 'Display How It Work Section', 'savings-pro' ),
                'classname' => 'how_it_work'
            ), // Args
            array(
                'width' => 530
            )
        );
    }

public function item( $name, $value = array(), $closed = true ){
        $value = wp_parse_args( $value,
            array(

'title'         => '',
                'des'           => '',
                'bg_color'      => '',
                'font_color'      => ''
            )
        );

?>
        <div data-name="<?php echo esc_attr( $name ); ?>" class="item">
            <div class="handle">
                <span class="item-index"></span>
                <span class="ellipsis live-item-title"></span>
                <a href="#" class="toggle"></a>
            </div>
            <div class="item-settings">
                <div class="element-settings1" style="padding: 10px;">
                    <div class="element">
                        <label><?php esc_attr_e( 'Title', 'savings-pro' ); ?></label>
                        <input type="text" name="<?php echo $this->get_field_name( 'fake' ); ?>" value="<?php echo esc_attr( $value['title'] ); ?>" data-name="title" class="live-title widefat">
                    </div>

<div class="element">
                        <label><?php esc_attr_e( 'Description', 'savings-pro' ); ?></label>
                        <input type="text" name="<?php echo $this->get_field_name( 'fake' ); ?>" value="<?php echo esc_attr( $value['des'] ); ?>" data-name="des" class="widefat">
                    </div>
                </div>
                <div class="actions">
                    <a href="#" class="remove"><?php esc_attr_e( 'Remove', 'savings-pro' ); ?></a>|<a href="#" class="close"><?php esc_attr_e( 'Close', 'savings-pro' ); ?></a>
                </div>
            </div>
        </div>
        <?php
    }

public function form( $instance ) {

$instance =  wp_parse_args( $instance, array(
            'title'     => '',
            'items'     => array(),
            'bg_color'   => '',
            'font_color' => ''
        ) );

$id =  uniqid('widget-ui-');
        $name = $this->get_field_name( 'items' );
        $title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( 'How It Works ', 'savings-pro' );
        $bg_color = ! empty( $instance['bg_color'] ) ? $instance['bg_color'] : esc_html__( '#d8ecef', 'savings-pro' );
        $font_color = ! empty( $instance['font_color'] ) ? $instance['font_color'] : esc_html__( '#07525d', 'savings-pro' );

?>
        <p>
            <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php esc_html_e( 'Title:', 'savings-pro' ); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
        </p>

<p>
            <label style="float:left;width:120px;" for="<?php echo $this->get_field_id( 'bg_color' ); ?>"><?php esc_html_e( 'Background Color:', 'savings-pro' ); ?></label>
            <input class="widefat bg_color" id="<?php echo $this->get_field_id( 'bg_color' ); ?>" name="<?php echo $this->get_field_name( 'bg_color' ); ?>" type="color" value="<?php echo esc_attr( $bg_color ); ?>" style="padding: 0px 2px;height: 25px;width: 38px;position: relative;top: 4px;left: 4px;">
        </p>

<p>
            <label style="float:left;width:120px;" for="<?php echo $this->get_field_id( 'font_color' ); ?>"><?php esc_html_e( 'Font Color:', 'savings-pro' ); ?></label>
            <input class="widefat font_color" id="<?php echo $this->get_field_id( 'font_color' ); ?>" name="<?php echo $this->get_field_name( 'font_color' ); ?>" type="color" value="<?php echo esc_attr( $font_color ); ?>" style="padding: 0px 2px;height: 25px;width: 38px;position: relative;top: 4px;left: 4px;">
        </p>

});
        </script>

<?php
    }

/**
     * Front-end display of widget.
     *
     * @see WP_Widget::widget()
     *
     * @param array $args     Widget arguments.
     * @param array $instance Saved values from database.
     */
    public function widget( $args, $instance ) {
        $instance =  wp_parse_args( $instance, array(
            'title' => '',
            'items' => array(),
            'bg_color' => '',
            'font_color' => ''
        ) );
        ?>
    <section class="how-page-section" style="background: <?php echo esc_attr( $instance['bg_color'] ); ?>">
        <div class="container">
            <?php
                echo $args['before_widget'];
            ?>
            <h3 class="how-title" style="color:<?php echo esc_attr( $instance['font_color'] ); ?>;">
                <?php
                    if ( ! empty( $instance['title'] ) ) {
                        echo  apply_filters( 'widget_title', $instance['title'] );
                    }
                ?>
            </h3>
            <div class="how-text-container flex">
            <?php
                foreach( $instance['items'] as $i => $item ) {
                    $item = wp_parse_args( $item,
                        array(
                            'title'         => '',
                            'des'           => ''
                        )
                    );
                    ?>

<?php
                }
            ?>
            </div>
            <?php
                echo $args['after_widget'];
            ?>
        </div>
    </section>
        <?php
    }

/**
     * Sanitize widget form values as they are saved.
     *
     * @see WP_Widget::update()
     *
     * @param array $new_instance Values just sent to be saved.
     * @param array $old_instance Previously saved values from database.
     *
     * @return array Updated safe values to be saved.
     */
    public function update( $new_instance, $old_instance ) {
        //$instance = array();
        //$new_instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
        return $new_instance;
    }

} // class Popular_Store

// register Foo_Widget widget
function wpcoupon_register_how_it_work_widget() {
    register_widget( 'WPCoupon_How_It_Work_Widget' );
}
add_action( 'widgets_init', 'wpcoupon_register_how_it_work_widget' );