I build my proper shop with ecommerce, and I'm beginner in development, I know correctly the CSS/HTML but JS he's not my tea cup... Actually, I want to display some products randomly in my "no_product_found" page in woocommerce. When a customer come to a product that are out of the shop, or a empty subcategory, he display products randomly.

I have add this hook to my function.php file from my child template

add_action( 'woocommerce_no_products_found', 'show_products_no_products', 20 );
function show_products_no_products() {
    echo '<h2 class="customnoproduct">' . __( 'Houston... On a un problème! </br>On a rien trouvé comme produits dans cette catégorie 👩‍🚀', 'north' ) . '</h2>';
    echo do_shortcode( '[products orderby="rand" per_page="8"]' );

That's work properly and great, but my filter bar are always display!... I want to hide them, so I have create another function and call her directly in php.

On my function.php

function hidefilter_callback() {
<script>function removeElement(thb-shop-filters) {
    // Removes an element from the document
    var element = document.getElementById(thb-shop-filters);

add_action( 'myhelp', 'hidefilter_callback' );

and after always on the same function.php, create add_action.

add_action( 'woocommerce_no_products_found', 'myhelp', 30 );
function myhelp() {
    do_action( 'wp_head','myhelp' );

I don't know if my javascript function is good... But the function is displayed but not on the head of my page, I don't understand why ? When I add my do_action( 'wp_head','myhelp' ); into my show_products_no_products hook, she appears but into my website... So the function don't run.

How I can fix this ?

Sorry for my english, I'm french and I made my best to write correctly! Thx for your help in advance!

1 Answer 1


It's better to use PHP to remove things when possible, because if you just use JS, they're still technically there on the page. What if a visitor is on a slow-loading network and the JS doesn't kick in for a long time, so they see the filters long enough to use them? If you can find out what actual template file is being used to display the page when there are no products found, you can probably make the changes there and just make them conditional - only show the filters if woocommerce_no_products_found is false.

Aside from that, the problem you're running into is that you are adding your myhelp action to the woocommerce_no_products_found hook. That means your function will only run when that hook fires - and it doesn't fire when wp_head fires, it's much later. That's why your code isn't injecting itself into the head.

  • Thank you for your complete reply, so I have thinking to delete the breadcrumb directly with a hook only, and no JS like you said. With a conditional format : add_filter( 'woocommerce_before_main_content', 'remove_breadcrumbs'); function remove_breadcrumbs() { if(!is_product() && !is_product_category()) { remove_action( 'woocommerce_before_main_content','woocommerce_breadcrumb', 20, 0); } } but nothing happen... I have insert this hook on the no-products-found.php file to try, and try on the function.php. But nothing, my breadcrumb are always here
    – AnaDarius
    Jun 13, 2019 at 21:03
  • And for easy way ? Add a css to the template file in use " wp_enqueue_style " ?
    – AnaDarius
    Jun 13, 2019 at 22:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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