WooCommerce custom child products to variable products - php

Question

I have some variable products (different 3-4 variations) with different prices. I want to add some simple products as child products (show as optional checkbox in front). I don't know how to manage that for adding to the cart.
For example let's assume I have a cellphone as main product and when user added it to it's cart it should see 3 sub product (child product) :
Handsfree (in three type of color)
Glass guard (in two type of color )
cell phone shield case ( just black)
as you can understand from above example I wanna to:
add all of this items as one product (includes handsfree, glass guard , cellphone case and cellphone itself ) and calculate it's price .I've read Add a checkbox on single product pages that adds an additional cost in Woocommerce and after that I have codes below to adding options in product edit page.
//custom product tab to woocommerce edit
function sm_wccpd_custom_product_tabs($tabs)
{
$tabs['sm_wcpa_extra_products'] = array(
'label' => __('Samanik Extra Products', 'sm-wcpa'),
'target' => 'sm_wc_extra_products_options',
'class' => array('show_if_variable'),
);
return $tabs;
}
add_filter('woocommerce_product_data_tabs', 'sm_wccpd_custom_product_tabs');
and here is tab content
function extra_products_options_product_tab_content()
{
global $post;
// Note the 'id' attribute needs to match the 'target' parameter set above
?>
<div id='sm_wc_extra_products_options' class='panel woocommerce_options_panel'><?php
?>
<div class='options_group'><?php
woocommerce_wp_checkbox(
[
'id' => '_has_extra_products',
'label' => __('has extra products', 'sm-wcpa'),
]);
woocommerce_wp_select(
[
'class' => 'multiselect attribute_values wc-enhanced-select',
'custom_attributes' => ['multiple' => 'multiple', 'style' => 'width:100% !importan;'],
'id' => '_sm_wcpa_product[]',
'label' => __('Extra Products to be add here', 'sm-wcpa'),
'value' => array_values(json_decode(get_post_meta($post->ID, '_sm_wcpa_product'), true)),
'options' => sm_wcpa_get_products_as_options(),//this is function that I pass Products as array like [product_id => product name]
]);
?></div>
</div><?php
}
// add_filter('woocommerce_product_data_tabs', 'extra_products_options_product_tab_content'); // WC 2.5 and below
add_filter('woocommerce_product_data_panels', 'extra_products_options_product_tab_content'); // WC 2.6 and up
also I can save the data and I think they are not necessary here.
now what I need to do is how to manage this in front. I mean show child products as checkbox, add price to parent price if checked, what about changing variables(those have different prices).
thanks for your patient to read my question.