Z. Dmitry Z. Dmitry - 7 months ago 86
Javascript Question

WooCommerce: change category checkboxes to drop-downs

Help me, please!

I need to change the category check-boxes to drop-down on the WooCommerce add product page. The user should be able choose only one category.

When the user chooses a category, all subcategories of the chosen category should be in the next drop-down. The user should be able to choose only one subcategory.

Then I need to put this two drop-downs under "Product Data" drop-down.


  1. How do I remove "Product Categories" block?

  2. How do I add categories drop-down to the "Product Data" block?

  3. How do I put subcategories in the second drop-down dependent on the category selected in the first drop-down?



Categories Image

Answer
  1. How do I remove "Product Categories" block?

    function remove_custom_meta_box() {
        remove_meta_box('{taxonomy-name}div', 'product', 'side');
    }
    add_action('admin_menu', 'remove_custom_meta_box');
    
  2. How do I add categories drop-down to the "Product Data" block?

    and

  3. How do I put subcategories in the second drop-down dependent on the category selected in the first drop-down?

    function categories_dropdown_metabox() {
        add_meta_box('custom-taxonomy-dropdown', 'Product Category', 'taxonomy_dropdowns_box', 'product', 'side', 'high');
    }
    
    function taxonomy_dropdowns_box($post) {
        $terms        = get_terms('product_cat', 'hide_empty=0');
        $object_terms = wp_get_object_terms($post->ID, 'product_cat', array('fields'=>'ids'));
    
        <script type="text/javascript">
            jQuery(document).ready(function() {
                jQuery('#product-category').change(function() {
                    var product = jQuery('#product-category').val();
                    if ( product == '0') {
                        jQuery('#prodcatoptions').html('');
                            jQuery('#categorycontainer').css('display', 'none');
                    } else {
                        var data = {
                            'action':'get_product_categories',
                            'product':product,
                            'dropdown-nonce': jQuery('#dropdown-nonce').val()
                        };
                        jQuery.post(ajaxurl, data, function(response){
                            jQuery('#prodcatoptions').html(response);
                            jQuery('#categorycontainer').css('display', 'inline');
                        });
                    }
                });
            });
        </script>       
    
        <div> 
            <span>Category:</span>
            <select required id='product-category' name='prodcategory[]'>
                <option value=''>Choose category</option>
                <?php
                foreach ($terms as $term) {
                    if ($term->parent == 0) {
                        if (in_array($term->term_id, $object_terms)) {
                            $parent_id = $term->term_id;
                            echo "<option value='{$term->term_id}' selected='selected'>{$term->name}</option>";
                        } else {
                            echo "<option value='{$term->term_id}'>{$term->name}</option>";
                        }
                    }
                }
                ?>
            </select>
        </div>
        <div id='categorycontainer' <?php if (!isset($parent_id)) { echo "style='display: none;'"; }?> >
            <span>Subcategory:</span>
            <select required id='prodcatoptions' name='prodcategory[]'>
                <?php
                if (isset($parent_id)) {
                    $models = get_terms('product_cat', 'hide_empty=0&child_of='.$parent_id);
    
                    foreach ($models as $model) {
                        if (in_array($model->term_id, $object_terms)) {
                            echo "<option value='{$model->term_id}' selected='selected'>{$model->name}</option>";
                        } else {
                            echo "<option value='{$model->term_id}'>{$model->name}</option>";
                        }
                    }
    
                }
                ?>
            </select>
        </div>
        <?php
    }
    
    add_action('add_meta_boxes', 'categories_dropdown_metabox');
    
    function save_my_custom_taxonomy($post_id) {
        if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
            return;
        }    
        if (!wp_verify_nonce($_POST['dropdown-nonce'], 'custom-dropdown')) {
            return;
        }  
        $product_cat = array_map('intval', $_POST['prodcategory']);
        wp_set_object_terms($post_id, $product_cat, 'product_cat');
    }
    
    add_action('save_post','save_my_custom_taxonomy');
    
    function get_product_categories() {
        check_ajax_referer('custom-dropdown', 'dropdown-nonce');
        if (isset($_POST['product'])) {
            $models = get_terms('product_cat', 'hide_empty=0&child_of='. $_POST['product']);
            echo "<option value=''>Choose subcategory</option>";
            foreach ($models as $model) {
                echo "<option value='{$model->term_id}'>{$model->name}</option>";
            }
        }
        die();
    }
    
    add_action( 'wp_ajax_get_product_categories', 'get_product_categories' );
    
Comments