How to add subcategories to custom post type of product catalogue without plugin and woocommerce

Question

i am stuck at problem. I have created a custom post type namely "products". In this custom post i have added a taxonomy category namle as "product categories". In product categories i have added my six categories namely sunglasses, contact lenses etc.. After that i simply add posts which are brand names like ray-ban, coopervision etc.. and assign them these product categories. Upon clicking the main categories like sunglasses=> it will redirect us to its single page where all the brands are displayed. Now upon clicking on these single brands i want to redirect it to another single main page where it will display products of that particular brand. But at moment if i click on a brand it is redirecting to its single page. What I want is to single page should appear after clicking on brand products.

what i am getting : products/sunglasses/ray-ban

what I want : products/sunglasses/ray-ban/ray-ban-products-page/single-prodcut-item.

if you donot get my point i am attaching a link i want same result as it have in products nav item...product=> dropdown=>categories>mainpage for category=>mainpage for subcategory=>productname/item page.

Here's check product nav menu item

P.S: please i am beginner if possible please send me whole code and configuration for all this.

I already tried to create another category with name product items but couldnot get results.

i have fetched it in two php files.

here is my functions.php

/****new custom functions**********/

// Create Custom Post type called Products
function register_products_post_type() {
    $args = array(
        'labels'    => array(
            'name'               => __( 'Products', 'mt-products' ),
            'singular_name'      => __( 'Products', 'mt-products' ),
            'menu_name'          => __( 'Products', 'mt-products' ),
            'name_admin_bar'     => __( 'Products', 'mt-products' ),
            'add_new'            => __( 'Add New', 'mt-products' ),
            'add_new_item'       => __( 'Add New Products', 'mt-products' ),
            'new_item'           => __( 'New Products', 'mt-products' ),
            'edit_item'          => __( 'Edit Products', 'mt-products' ),
            'view_item'          => __( 'View Products', 'mt-products' ),
            'all_items'          => __( 'All Products', 'mt-products' ),
            'search_items'       => __( 'Search Products', 'mt-products' ),
            'parent_item_colon'  => __( 'Parent Products:', 'mt-products' ),
            'not_found'          => __( 'No Products found.', 'mt-products' ),
            'not_found_in_trash' => __( 'No Products found in Trash.', 'mt-products' )
        ),
        'query_var'              => 'products',
        'rewrite'                => array(
            'slug'               => 'products/%product_category%',
            'with_front'         => false
        ),
        'public'                 => true,  // If you don't want it to make public, make it false
        'publicly_queryable'     => true,  // you should be able to query it
        'show_ui'                => true,  // you should be able to edit it in wp-admin
        'has_archive'            => 'products',    //true,
        'menu_position'          => 51,
        'supports'               => array( 'title', 'editor', 'thumbnail', 'excerpt' ),
        'taxonomies'             => array( 'product_category'),
    );
    flush_rewrite_rules();

    register_post_type('mt_products', $args);
}
add_action( 'init', 'register_products_post_type' );


/* Register custom taxonomy */

function taxonomies() {
    $taxonomies = array();

    $taxonomies['product_category'] = array(
        'hierarchical'  => true,
        'query_var'     => 'product-category',
        'rewrite'       => array(
            'slug'      => 'product/category'
        ),
        'labels'            => array(
            'name'          => 'Product Category',
            'singular_name' => 'Product Category',
            'edit_item'     => 'Edit Product Category',
            'update_item'   => 'Update Product Category',
            'add_new_item'  => 'Add Product Category',
            'new_item_name' => 'Add New Product Category',
            'all_items'     => 'All Product Category',
            'search_items'  => 'Search Product Category',
            'popular_items' => 'Popular Product Category',
            'separate_items_with_commas' => 'Separate Product Categories with Commas',
            'add_or_remove_items' => 'Add or Remove Product Categories',
            'choose_from_most_used' => 'Choose from most used categories',
        ),
        'show_admin_column' => true
    );

    flush_rewrite_rules();

    foreach( $taxonomies as $name => $args ) {
        register_taxonomy( $name, array( 'mt_products' ), $args );
    }
}
add_action( 'init', 'taxonomies' );

// filter url

function filter_post_type_link($link, $post)
{
    if ($post->post_type != 'mt_products')
        return $link;

    if ($cats = get_the_terms($post->ID, 'product_category'))
        $link = str_replace('%product_category%', array_pop($cats)->slug, $link);
    return $link;
}
add_filter('post_type_link', 'filter_post_type_link', 10, 2);

here is my first main product cateogry code

<?php get_header();
$catSlug = $wp_query->get_queried_object()->slug;
?> 
<style>
            h1,h2,h3,h4,h5,h6,p{
                margin: 0;
                padding: 0;
            }
            .category-inner-wrapper{
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                flex-basis: 100%;
            }
            .product-block{
                flex-basis: 33%;
                min-height: 341px;
                text-align: center;
                flex-basis: 30%;
                min-height: 341px;
                text-align: center;
                margin-right: 26px;
            }
            .product-block:hover{
                border: 1px solid black;
                cursor: pointer;
            }
            .product-block-footer{
                background: #f2f2f2;
                padding: 15px 5px;
            }
            .product-block-footer h2{
              font-size: 20px;
            }
            .product-block-footer a{
                text-transform: uppercase;
                font-size: 12px;
                color: #000;
                border: 1px solid #415561;
                border-radius: 2px;
                padding: 10px 8px;
                display: inline-block;
                outline: none;
            }

        </style>
    </head>
    <body>
        <section class="categories">
            <div class="category-outer-wrapper">
                <div class="container">
                    <div class="category-inner-wrapper">
                    <?php

// The Loop
$args = array(
  'post_type' => 'mt_products',
  'post_status' => 'publish',
  'posts_per_page' => -1,
  'tax_query' => array(
        array(
            'taxonomy' => '',
            'field'    => 'slug',
            'terms'    => get_queried_object()->slug,
        ),
    ),
);
global $post;

$myposts = get_posts($args);

if ( $myposts ) {
    foreach ( $myposts as $post ) : 
        setup_postdata( $post ); ?>
                        <div class="product-block">
                            <div class="img-part">
                                <img src="<?php the_post_thumbnail_url('full');?>">
                            </div>
                            <div class="product-block-footer">
                                <h2><?php the_title(); ?></h2>
                                <a href="<?php the_permalink(); ?>">Enquire Now</a>
                            </div>
                        </div>
    <?php
    endforeach;
    wp_reset_postdata();
}
?>                            
                    </div>
                </div>
            </div>
        </section>
<?php get_footer(); ?>

and here is for single page

<?php get_header();
$cat= $wp_query->get_queried_object();
$post = get_post();
?> 
<style>
            h1,h2,h3,h4,h5,h6,p{
                margin: 0;
                padding: 0;
            }
            section.brands{
                padding: 80px 0;
            }
            .brands-inner-wrapper{
                display: flex;
                flex-basis: 100%;
                flex-wrap: wrap;
                justify-content: space-between;
            }
            .brands-inner-wrapper .brand-content h3,h4,h5{
                font-size: 13px;
            }
            .brands-inner-wrapper .brand-content a{
                margin-top: 12px;
                display: inline-block;
                background: #2fcb41;
                border-radius: 0px;
                border: none;
                text-transform: uppercase;
                transition: all 0.4s ease-out;
                font-size: 14px;
                color: #fff;
                padding: 10px 16px;
            }
            .brands-inner-wrapper .brand-img{
                border: 1px solid #DEDEDE;
                flex-basis: 40%;
            }

            .brands-inner-wrapper  .brand-content{
                flex-basis: 50%;
            }

            .brands-inner-wrapper .brand-content p{
                width: 75%;
            }
            .brands-inner-wrapper .brand-content h2{
                color: #00a8ab;
                text-transform: uppercase;
            }
            .brands-inner-wrapper .brand-content h3{
                padding:25px 0 ;
            }
            .brands-inner-wrapper .brand-content h4{
                padding: 30px 0;
                text-transform: uppercase;
            }
        </style>
    </head>
    <body>
      <section class="brands">
            <div class="brands-outer-wrapper">
                <div class="container">
                    <div class="brands-inner-wrapper">

                         <div class="brand-img">
                            <img src=<?php the_post_thumbnail_url('full');?>>
                        </div>

                        <div class="brand-content">

                            <h2><?php echo $post->post_title;?></h2>
                            <h3><?php echo $post->post_title;?></h3>
                            <p><?php echo $post->post_content;?>.</p>

                            <h4>
<?php
$category_detail=wp_get_post_terms($post->ID,"product_category");
foreach($category_detail as $cd){
echo $cd->name." ";
}
?></h4>

        <h5>Sample</h5>
                            <a href="">Enquire Now</a>
                        </div>
                        <?php

// /// The Loop
// $args = array(
//   'post_type' => 'mt_products',
//   'post_status' => 'publish',
//   'posts_per_page' => -1
// );
// global $post;

// $myposts = get_posts($args);

// if ( $myposts ) {
//     foreach ( $myposts as $post ) : 
//         setup_postdata( $post ); 
//     endforeach;
//     wp_reset_postdata();
// }
?>                            
                    </div>
                </div>
            </div>
        </section>
<?php get_footer(); ?>

Answer 1

Firstly look into Template Hierarchy

Then look into wrapping your target with a custom link.

For cleaner code, put your style in a stylesheet.