WordPress Category, Child Category, Active Category Problems - Woocommerce

cholonto
April 15, 2021
172 views
0 votes
2 Answers

`Let’s say I went to a category page. There is some content on this category page. I would like to show all the child categories of the parent category of this category below the content or under this category page. I would also like to show the description and thumbnail image of the category. How do I do that?

Then if a user goes to a category page from the menu, that category will remain active. The rest of the categories will be blur, inactive or something like that.

UPDATE:

Let’s say it’s a menu. Now all the category items have been added in this menu. Now if anyone clicks on parent or sub-category from here, all the sub-categories of the parent category of that category will be shown. Like the code below. All right.

But when someone clicks on a category from the menu, that category will be highlighted. The rest of the categories will be in blur or something like that. But if you hover the mouse, that blur will no longer exist.

I would have benefited if someone helped. Any ideas?

if( is_product_category() ){

$queried_object = get_queried_object();
$child_terms    = get_term_children ( $queried_object->term_id, 'product_cat' );
$based_term     = (is_wp_error($child_terms) || empty($child_terms)) ? get_term ( $queried_object->parent, 'product_cat' ) : $queried_object;

printf( '<h2 class="shop__sidebar-heading"><a href="%s?so64231449=true">%s</a></h2>', esc_url(get_term_link($based_term->term_id)), $based_term->name );

$display_terms = get_terms( 'product_cat', array(
    'orderby'       => 'name', 
    'order'         => 'ASC',
    'hide_empty'    => false,
    'parent'        => $based_term->term_id,
) );

if( !empty( $display_terms ) && !is_wp_error( $display_terms ) ){

    echo '';
  
        foreach( $display_terms as $display_term ){

            $thumbnail_id = get_term_meta ($display_term->term_id, 'thumbnail_id', true);
            $image        = wp_get_attachment_url( $thumbnail_id );
            
            printf(
                '<div class="col-md-3">
                    <div class="content-inner">
                        <h6%s><a href="%s">%s</a></h6>
                        <img src="%s" alt="" />
                    </div>
                </div>',
                ($display_term->term_id == $queried_object->term_id) ? ' class="active"' : '',
                esc_url(get_term_link($display_term->term_id)),
                $display_term->name,
                $image,
            );
        }

    echo '';
   
}

}

Answers

Chosen as BEST ANSWER

           $(document).ready(function(){
            $('.category-box')(
               function () {
                    $('.category-box').removeClass('active');
                    $(this).addClass('active');
               }, function () {
                    $(this).removeClass('active');
               }
            );
        });
    })(jQuery);

.sub-cat-list {
    width: 100%;
}

.sub-cat-list .content-inner {
  text-align: center;
  overflow: hidden;
}


.sub-cat-list .content-inner img {
  width: 220px;
  height:120px;
  border-radius: 10px;
}

.sub-cat-list  .content-inner h6 {
  padding: 10px 0;
 }

 .sub-cat-list .content-inner h6 a {
  font-size: 16px;
  text-transform: capitalize;
  font-weight: 600;
  color: #000;
 }

 .sub-cat-list .content-inner h6 a:hover {
  color: #CC0066; 
 }

// All are testing purpose

 .category-box {
     background: blue;
 }

 .category-box:hover {
     background: red;
 }

 .category-box.active {
  background-color: #e7e7e7
  
}

.category-box.active h6 a {
  color: cayan;
}

.category-box.active:hover > h6 a {
  color: rgb(228, 22, 66);
}

<div class="container">
    <div class="sub-cat-list">
        <div class="col-md-3">
            <div class="content-inner">
                    <img src="" />
                    <h6><a>This is a cat heading 1</a></h6>
                </div>   
        </div>
        <div class="col-md-3">
            <div class="content-inner">
                    <img src="" />
                    <h6><a>This is a cat heading 2</a></h6>
                </div>   
        </div>
        <div class="col-md-3">
            <div class="content-inner">
                    <img src="" />
                    <h6><a>This is a cat heading 3</a></h6>
                </div>   
        </div>
        <div class="col-md-3">
            <div class="content-inner">
                    <img src="" />
                    <h6><a>This is a cat heading 4</a></h6>
                </div>   
        </div>
    </div>
</div>

(Edit)

$(document).ready(function(){
    $('.category-box').hover(
       function () {
            $('.category-box').removeClass('active');
            $(this).addClass('active');
        }, function () {
            $(this).removeClass('active');
        }
    );
});

.sub-cat-list {
    width: 100%;
}

.sub-cat-list .content-inner {
  text-align: center;
  overflow: hidden;
}


.sub-cat-list .content-inner img {
  width: auto;
  height:120px;
  border-radius: 10px;
}

.sub-cat-list  .content-inner h6 {
  padding: 10px 0;
 }

 .sub-cat-list .content-inner h6 a {
  font-size: 16px;
  text-transform: capitalize;
  font-weight: 600;
  color: #000;
 }

 .sub-cat-list .content-inner h6 a:hover {
  color: #CC0066; 
 }

// All are testing purpose

 .category-box {
     background: blue;
 }

 .category-box:hover {
     background: red;
 }

 .category-box.active {
  background-color: #e7e7e7
  
}

.category-box.active h6 a {
  color: cayan;
}

.category-box.active:hover > h6 a {
  color: rgb(228, 22, 66);
}
.col-md-3 {
    float: left;
    width: 25%;
}
.col-md-3.category-box {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}
.col-md-3.category-box.active {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="sub-cat-list">
        <div class="col-md-3 category-box active">
            <div class="content-inner">
                    <img src="https://via.placeholder.com/150" />
                    <h6><a>This is a cat heading 1</a></h6>
                </div>   
        </div>
        <div class="col-md-3 category-box">
            <div class="content-inner">
                    <img src="https://via.placeholder.com/150" />
                    <h6><a>This is a cat heading 2</a></h6>
                </div>   
        </div>
        <div class="col-md-3 category-box">
            <div class="content-inner">
                    <img src="https://via.placeholder.com/150" />
                    <h6><a>This is a cat heading 3</a></h6>
                </div>   
        </div>
        <div class="col-md-3 category-box">
            <div class="content-inner">
                    <img src="https://via.placeholder.com/150" />
                    <h6><a>This is a cat heading 4</a></h6>
                </div>   
        </div>
    </div>
</div>

Add active class on first category box using counter variable.

if( is_product_category() ){

    $queried_object = get_queried_object();
    $child_terms    = get_term_children ( $queried_object->term_id, 'product_cat' );
    $based_term     = (is_wp_error($child_terms) || empty($child_terms)) ? get_term ( $queried_object->parent, 'product_cat' ) : $queried_object;

    printf( '<h2 class="shop__sidebar-heading"><a href="%s?so64231449=true">%s</a></h2>', esc_url(get_term_link($based_term->term_id)), $based_term->name );

    $display_terms = get_terms( 'product_cat', array(
        'orderby'       => 'name', 
        'order'         => 'ASC',
        'hide_empty'    => false,
        'parent'        => $based_term->term_id,
    ) );

    if( !empty( $display_terms ) && !is_wp_error( $display_terms ) ){

        echo '';
            $i = 0;
            foreach( $display_terms as $display_term ){

                $thumbnail_id = get_term_meta ($display_term->term_id, 'thumbnail_id', true);
                $image        = wp_get_attachment_url( $thumbnail_id );
                
                $class = ( $i == 0 ) ? 'active' : '' ;

                printf(
                    '<div class="col-md-3 category-box '.$class.' ">
                        <div class="content-inner">
                            <h6%s><a href="%s">%s</a></h6>
                            <img src="%s" alt="" />
                        </div>
                    </div>',
                    ($display_term->term_id == $queried_object->term_id) ? ' class="active"' : '',
                    esc_url(get_term_link($display_term->term_id)),
                    $display_term->name,
                    $image,
                );
                $i++;
            }

        echo '';
       
    }
}

Add class on category-box on hover called ‘active’ and based on do CSS.

function add_custom_js(){
    ?>
    <script type="text/javascript">
        (function($){
            $(document).ready(function(){
                $('.category-box').hover(
                   function () {
                        $('.category-box').removeClass('active');
                        $(this).addClass('active');
                   }, function () {
                        $(this).removeClass('active');
                   }
                );
            });
        })(jQuery);
    </script>
    <?php
}
add_action( 'wp_footer', 'add_custom_js', 10, 1 );

Please signup or login to give your own answer.

Click here to cancel reply.

WordPress Category, Child Category, Active Category Problems – Woocommerce

Answers