You can change in html of customizer control by extend of Class WP_Customize_Control
Check this code to change html of checkbox in theme customizer
<?php
/**
* Add customizer function.
*
* @param WP_Customize_Manager $wp_customize WP_Customize_Manager instance.
*/
function add_customizers_function( $wp_customize ) {
/**
* Custom checkbox control class.
*/
class Checkbox_Custom_Control extends \WP_Customize_Control {
/**
* The type of control being rendered.
*
* @var string
*/
public $type="checkbox_custom";
/**
* Enqueue our scripts and styles.
*/
public function enqueue() {
wp_enqueue_style( 'custom-controls-css', '../css/customizer.css', array(), '1.0', 'all' );
}
/**
* Render the control in the customizer.
*/
public function render_content() {
?>
<div class="checkbox_control">
<?php if ( ! empty( $this->label ) ) : ?>
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
<?php endif; ?>
<?php if ( ! empty( $this->description ) ) : ?>
<span class="customize-control-description"><?php echo esc_html( $this->description ); ?></span>
<?php endif; ?>
<?php if ( ! empty( $this->input_attrs['label_class'] ) && ! empty( $this->input_attrs['checkbox_id'] ) &&! empty( $this->input_attrs['checkbox_class'] ) ) : ?>
<label class="<?php echo esc_html( $this->input_attrs['label_class'] ); ?>">
<input type="checkbox" name="btn_name" id="<?php echo esc_html( $this->input_attrs['checkbox_id'] ); ?>" class="<?php echo esc_html( $this->input_attrs['checkbox_class'] ); ?>" <?php $this->link(); ?> <?php checked( $this->value(), true ); ?>/>
</label>
<?php endif; ?>
</div>
<?php
}
}
$wp_customize->add_section(
'sutta_section',
array(
'title' => __( 'Sutta', 'text-domain' ),
'priority' => 160,
)
);
$wp_customize->add_setting(
'show_sutta',
array(
'default' => true,
'type' => 'theme_mod',
'capability' => 'edit_theme_options',
)
);
$wp_customize->add_control(
new Checkbox_Custom_Control(
$wp_customize,
'show_sutta',
array(
'label' => __( 'Show Sutta', 'text-domain' ),
'section' => 'sutta_section',
'description' => esc_html__( 'Custom Checkbox description', 'text-domain' ),
'input_attrs' => array(
'checkbox_id' => 'cb1',
'checkbox_class' => 'tgl tgl-light',
'label_class' => 'tgl-btn',
),
)
)
);
}
add_action( 'customize_register', 'add_customizers_function' );
You have to make changes in html in Class Checkbox_Custom_Control
to get your desired structure because I’ve added different html structure then the default one to show changes more significantly.
Check this image :
Theme Customizer
Currently this code is in my active themes’ function.php & It’s working perfectly but if it’s not working same as image I attached here then let me in a comment.