Disable specific collection linkblock

Design help General
4

In Webflow, you don’t have a built-in option to disable links for a specific collection item. However, you can achieve this with a bit of custom code and conditional visibility.

Try this!

  1. Setup Collection Field: Go to the Collection settings and add a new switch field, let’s say “Active”. You will use this field to identify whether a product category is active or coming soon.
  2. Modify the Collection: For each item in the collection, set the “Active” switch field to true if the category is active (i.e., has products) and false if the category is still “coming soon”.
  3. Add Conditional Visibility to the Link Block: Go to the page where you have your categories menu. Select the link block and add a condition to only display it when “Active” is set to true.
  4. Add a Text Block for “Coming Soon” Categories: Add a separate text block element for the “coming soon” categories. This element should have the same styling as your link block, but without the actual link functionality. Then, apply a condition that this block will only be visible when “Active” is set to false.

Now, categories that are still “coming soon” will be displayed as plain text and won’t be clickable, while the active categories will have the usual link block.

Remember that you need to add this custom code inside an HTML Embed element or within Page Settings > Custom Code > Before tag:

<script>
  $(document).ready(function(){
    $('.your-class-name').each(function(){
      if($(this).attr('href') == '#'){
        $(this).removeAttr('href');
      }
    });
  });
</script>

In the code above, replace ‘your-class-name’ with the class of the element you want to disable the link for.

Let me know if this is helpful!

2 Likes