Woocommerce how to get product category - wordpress

Question

I want to create a drop down list for categories in php in a page built in code. I could create a shortcode for it successfully but since shortcode is not friendly with html, I decided not to pursue that route. So without any scripts or jquery, I'm attempting to add php code into a div
<select class="store-search-input form-control" name="dokan_seller_search" value="<?php
$taxonomy = 'product_cat';
$orderby = 'name';
$show_count = 0; // 1 for yes, 0 for no
$pad_counts = 0; // 1 for yes, 0 for no
$hierarchical = 1; // 1 for yes, 0 for no
$title = '';
$empty = 0;
$args = array(
'taxonomy' => $taxonomy,
'orderby' => $orderby,
'show_count' => $show_count,
'pad_counts' => $pad_counts,
'hierarchical' => $hierarchical,
'title_li' => $title,
'hide_empty' => $empty
);
$all_categories = get_categories( $args );
foreach ($all_categories as $cat) {
if($cat->category_parent == 0) {
$category_id = $cat->term_id;
echo '<br />'. $cat->name .'';
$args2 = array(
'taxonomy' => $taxonomy,
'child_of' => 0,
'parent' => $category_id,
'orderby' => $orderby,
'show_count' => $show_count,
'pad_counts' => $pad_counts,
'hierarchical' => $hierarchical,
'title_li' => $title,
'hide_empty' => $empty
);
$sub_cats = get_categories( $args2 );
if($sub_cats) {
foreach($sub_cats as $sub_category) {
echo $sub_category->name ;
}
}
}
}
?>" >
</select>
and this happened:
Any help would be appreciated
Update thanks to Alex's help:
I don't have enough points to add the image directly yet:
<input type="select" class="store-search-input form-control" name="dokan_seller_search" value="<?php
$args = array(
'taxonomy' => 'product_cat',
'orderby' => 'name',
'hierarchical' => true,
'hide_empty' => false
);
$all_categories = get_categories( $args );
esc_html('<select class="store-search-input form-control" name="dokan_seller_search">');
foreach($all_categories as $parent){
if ($parent->category_parent == 0) {
echo '<option value="'.$parent->name.'"><a href="'. get_term_link($parent->slug, 'product_cat') .'">'. $parent->name .'</option>';
}
$args2 = array(
'taxonomy' => 'product_cat',
'child_of' => $parent->term_id,
'parent' => $parent->term_id,
'hide_empty' => 'false'
);
$sub_cats = get_categories( $args2 );
if($sub_cats) {
foreach($sub_cats as $sub_category) {
echo $sub_category->name;
}
}
}
esc_html('</select>');
?>">
The result I'm expecting is a

Answer 1

What you are trying to do is a little dirty for a . You would be much better off using a dropdown triggered by javascript so you can better control the DOM in the dropdown. A select should really only be used when you need to submit data to the server.
UPDATE: This is tested and working.
<script type="text/javascript">
//First, some js to trigger the window to relocate when you click an option
jQuery(document).ready(function(){
//When the select is triggered
jQuery('#category-links').on('click', function(){
//Get the URL from the selected option
var url = jQuery(this).val();
//Navigate to the url
window.location.replace(url);
})
})
</script>
<?php
//Get the parent terms
$parents = get_terms([
'taxonomy' => 'product_cat',
'hide_empty' => false,
'parent' => 0
]);
//Start the dom for the select
echo '<select id="category-links">';
echo '<optgroup>';
//The parent option
echo '<option value="'.get_term_link($term->term_id).'">'. $term->name .'</option>';
//Check for children, if there are we'll add them here
$children = get_term_children($term->term_id, 'product_cat');
if (!empty($children)) {
foreach ($children as $child) {
$childterm = get_term_by('id', $child, 'product_cat');
echo '<option value="'.get_term_link($childterm->term_id).'">'. $childterm->name .'</option>';
}
}
echo '</optgroup>';
}
echo '<select>';