Creating Conditional Fields in Elementor Custom Widget

How are conditional fields or field groups created in Elementor? I’ve not found anything in the documentation regarding conditional fields for widget development. A simple example of what I’d like to do is the following:

I have a dropdown:

    // Select Control     $  this->add_control(         'dropdown_Example',         [             'label' => __('Dropdown Example', 'vs'),             'type' => \Elementor\Controls_Manager::SELECT,             'options' => [                 'default' => __('Default', 'vs'),                 'yes' => __('Yes', 'vs'),                 'no' => __('No', 'vs'),             ],             'default' => 'default',         ]     ); 

If the answer in the dropdown is yes, then show text field 1:

    // Text 1     $  this->add_control(         'text1',         [             'label' => __('Text1', 'vs'),             'type' => Controls_Manager::TEXT,         ]     ); 

Else, show text field 2:

    // Text 2     $  this->add_control(         'text2',         [             'label' => __('Text2', 'vs'),             'type' => Controls_Manager::TEXT,         ]     ); 

Get category link to widget

I add this code and is working good, but open different category link, Any idea?

    $  category = get_the_category();  if($  category[0]){     echo '<p class="read-more-custom-widget">';     echo '<a href="'.get_category_link($  category[0]->term_id ).'"title="Read More">Read More &raquo;</a>';     echo '</p>'; } 

Trying to style Woocommerce sidebar Cart Widget

I have looked at length to find CSS that will change the background color, border radius and product info text color. I think this may not be a "mini cart". The price of the item, subtotal and View Cart / Checkout buttons follow the styling Ive done to the cart. I have successfully changed my product text color on my actual Cart page. So frustrating! Help is much appreciated.

Add ID to widget within a dynamic sidebar

I would like my widgets to have a unique ID, preferably based on the title given to the widget. My specific case is that I would like to have a jump link (<a href="#widget-title">) to target widgets in a dynamic sidebar located in the footer of my site. I would like my widget to be wrapped in a div, i.e. <div id="widget-title">, or even better, if I could add that id to the tag that contains the widget’s title, i.e. <h3 id="widget-title"> (I’d love to avoid an extraneous div).

I know that each widget has its own ID somewhere that I could access, but I worry that if I use that, then add/change/delete widgets later, the ID may change. But I can and will always keep the widget title consistent. Right now the widget I have in mind has an ID of custom_html-4, but I’d like something more static and semantic.

Widget Drag and Drop from front end for users and rearrange order retrinving

I’m looking at front end feature, where from widget menu icons on left side, a user can drag and dropped, widgets into a default page common page and arranged in order as required by the user.

the number of widgets and the order and position and size how they are saved needs too be saved of each user and retrieved in the same order when he logs back in and displayed, like how its also in backend wp-admin dashboard

Kindly guide..

Widget not appearing in customizer

Hello I have a theme installed but on the homepage the homepage content widget section does not appear in the customizer view. I have it set on the wp-admin themes settings but when I go to the customizer it does not show all of the widgets that are setup in the admin settings. Every page I go to in the customizer only shows 5 widgets (not sure if theres a setting to enable more than 5) but I cant seem to get this figured out. any help is greatly appreciated .. I have 2 screenshots with this post to show whats going on[enter image description here]1

enter image description here

.widget CSS not working on my website

I am very new to website development. Currently, I’m having trouble making CSS changes to a certain class="widget". I want this CSS to work.

The CSS is on my main.css file:

.widget {   list-style-type:none;   padding:0;   margin:0; } 

This is part of my functions.php file:

// Load Stylesheets function load_css() {      wp_register_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), false, 'all');     wp_enqueue_style('bootstrap');      wp_register_style('main', get_template_directory_uri() . '/css/main.css', array(), false, 'all');     wp_enqueue_style('main');  } add_action('wp_enqueue_scripts','load_css');   // Load Javascript function load_js() {     wp_enqueue_script('jquery');     wp_register_script('bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery', false, true);     wp_enqueue_script('bootstrap');  } add_action('wp_enqueue_scripts','load_js'); 

This is my page.php file:

<?php get_header();?>  <section class="page-wrap"> <div class="container">     <section class="row">     <div class="col-lg-3">             <?php if( is_active_sidebar('page-sidebar')):?>                 <?php dynamic_sidebar('page-sidebar');?>             <?php endif;?>     </div>      <div class="col-lg-9">         <h1><?php the_title();?></h1>         <?php if(has_post_thumbnail()):?>             <img src="<?php the_post_thumbnail_url('blog-large');?>" alt="<?php the_title();?>" class="img-fluid mb-3 img-thumbnail">          <?php endif;?>         <?php get_template_part('includes/section','content');?>     </div>     </section> </div> </section> 

I feel like I just missed something, but as I said, I’m very new to WP website development so I don’t know where to look. Any help is very much appreciated. Thank you!