-1

I am still a bit new to wordpress development and I am facing a issue that I cant figure out.

My wordpress website theme uses the following code to display 3 categorys that show a image, category name and a link.

<?php echo do_shortcode('[product_categories number="' . $number . '" parent="0" columns="3"]'); ?>

This code outputs in:

<div class="woocommerce columns-3">
   <ul class="products">
     <li class="product-category product first"><a href="#">Cat1</a><li>
     <li class="product-category product"><a href="#">Cat2</a><li>
     <li class="product-category product last"><a href="#">Cat2</a></li>
   </ul>
</div>

My question is where can I find the code that outputs the html? I want to add a href before the li instead of after it. Because now it only links to the category page when you click on the word but I want it to link when you also click anywhere on the image.

I've looked in the short_code.php file but it was really hard to follow the code to find where it get's outputted.

Thanks.

1

There are number of ways to do it.

The specific one for your case is that you have to find the function which that shortcode "calls". For this, you can download your theme and plugin files and search add_shortcode or better product_categories(your shortcode name) term in all files using some notepad software. Notepad++ has a good feature for it that lets you to search term in all files in a specific directory. Once you find it, it should look like:

add_shortcode( 'product_categories', 'function_for_product_categories' );

Now you know that function_for_product_categories is the function that you want. Then you can search for function_for_product_categories to find the function which gives you that output and do the whatever change you want.

Another way is more generic, that you can use to find and explore the theme or plugins to do your custom edits. You can search html tags(class names, ids etc.) of output in all theme files to find the function. This way, mostly you will get more results and you will need to find which one is exactly what you want.

Note: Don't forget, that if you do the change to directly theme and plugin files, if you update them, your changes will lost. So if you are going to update them, define new functions in child themes or in your own plugins and use them.

Resources that you may look:
https://codex.wordpress.org/Shortcode_API
https://codex.wordpress.org/Child_Themes
https://codex.wordpress.org/Writing_a_Plugin

1

That looks to be a WooCommerce shortcode. You shouldn't edit those core files directly because your customization will get overwritten in the next plugin update.

Additionally, wrapping a list item in an anchor tag is not valid HTML.

You may be able to approach this with a little CSS foo though. Can you update your question with the HTML structure so that it includes the image you'd like to also be clickable?

UPDATE

Digging into WooCommerce, you can override the template for displaying product category thumbnails within loops by copying woocommerce/templates/content-product_cat.php to yourtheme/woocommerce/content-product_cat.php folder. This should preferably be done in a child theme.

  • +1 for recommending WooCommerce templates and child theme. – Michael Ecklund Jan 1 '17 at 16:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.