woocommerce product category widget disable parent category link

Question

I am using the woocommerce product category widget on my sidebar and footer widget area.

I have 2 parent categories. I would like these to be displayed, but not be clickable links.

You can see the page here http://www.terrykirkwood.co.uk/w

Can anyone advise what css to add to stop these links being clickable?

Thanks

Here's the code from the first occurrence:

<li class="cat-item cat-item-47 cat-parent"><a href="http://terrykirkwood.co.uk/w/product-category/originals/">Original Paintings</a><ul class="children">

Answer 1

All parent classes have a 'cat-parent' class, so you can either add a condition - 'javascript: void(0)' - in widget for anchor tag 'href'. Alternatively , you can add the below jquery code,

jQuery('.footer-widget').find('.product-categories li.cat-parent').each(function(){ 

  if(jQuery(this).find('ul.children').length == 1){ 

    jQuery(this).find('a').attr('href','javascript: void(0)');
  } 

});

This will reset all parent category links that have child categories. Now, If user clicks on parent category, it will not do anything.

This will also make sure, that if parent categories don't have child categories, then it will not be reset.

Answer 2

CSS only controls style, so there is no CSS you can use to disable a hyperlink. You could change the CSS to not change cursors, so it doesn't "look" like a link.

.cat-parent a { 
    cursor: default;
    text-decoration: none;
}

.cat-parent .children a {
    cursor: pointer;
    text-decoration: underline;
}

And then use some jQuery to actually disable the click function:

$('.cat-parent').click(function(e) {
    e.preventDefault();
});

If you were bold you could probably also modify the widget to not print an <a> link for parents, but I can't check on that right now.

Edit

You can either add the script to one of your theme's scripts, load a new external script file or drop the following into your themes' functions.php:

function so_add_this_script_footer(){ 

    if( !is_admin() ) { ?>

    <script>
        jQuery(document).ready(function($) {
            $('.cat-parent > a').click(function(e) {
                e.preventDefault();
            });
        });
    </script>

<?php } 

}

add_action('wp_print_footer_scripts', 'so_add_this_script_footer');