On the catalog page I only want to display the block-compare if the number of products to compare > 0. Now I still see the title of the comparison block, I don't want to see anything.

This is my code:

<div class="block block-compare" data-bind="scope: 'compareProducts'" data-role="compare-products-sidebar">
    <div class="block-title " data-bind="css: {'no-display': !compareProducts().count}">
        <strong id="block-compare-heading" role="heading" data-bind="css: {'no-display': !compareProducts().count}" aria-level="2"><?= $block->escapeHtml(__('Compare Products')) ?></strong>
        <span class="counter qty no-display" data-bind="text: compareProducts().countCaption, css: {'no-display': !compareProducts().count}"></span>
    <!-- ko if: compareProducts().count -->
    <div class="block-content no-display" aria-labelledby="block-compare-heading" data-bind="css: {'no-display': !compareProducts().count}">
        <ol id="compare-items" class="product-items product-items-names" data-bind="foreach: compareProducts().items">


enter image description here

1 Answer 1


Try moving up the <!-- ko if: compareProducts().count --> above the title.

This should hide the whole block when there is no product.

You might also want to remove the following block of code at the bottom of the file :

    <!-- ko ifnot: compareProducts().count -->
    <div class="empty"><?= $block->escapeHtml(__('You have no items to compare.')) ?></div>
    <!-- /ko -->

This is a block which appears when you have no products to compare, but as you want to hide it completely, you should also remove this part.

  • Thank you very much, it works!
    – beata
    Jul 24, 2023 at 10:23
  • The content (class="block block-compare") always appears in the first second, then disappears even if compareProducts().count < 0. what can I do to prevent it from appearing even in the first second?
    – beata
    Jul 28, 2023 at 6:50
  • On the block-title div, add the no-display class, and keep the data-bind="css: {'no-display': !compareProducts().count}" property. If you look at the block-content div below, this is how Magento prevents it from appearing/disappearing when loading the page : It is first hidden, and if there is some content, it is shown.
    – Cladiuss
    Jul 28, 2023 at 7:31
  • It still appears in the first second, and if I put the no-display class into block-compare it is not working at all. I think javascript loads faster, but I don't get the file where I need to change it.
    – beata
    Jul 28, 2023 at 8:23

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.