How to fade out unavailable floor plans

Rent Fetch provides an option to visually distinguish floor plans that have no available units by applying faded styling. This helps users quickly identify which floor plans are currently unavailable.

NOTE: If you’re syncing data, depending on your API, floor plans with no availability within a particular term may be removed entirely from your site, as some APIs only send floor plans with availability and make no distinction between unavailable floor plans and floor plans that have been removed from properties altogether.

Setting Configuration

In the WordPress admin, navigate to Rent Fetch > Floor Plans > Floor Plan Display Settings. Enable the checkbox for “Fade out unavailable floor plans” under the “Apply faded styles to floor plans with no units available” option.

When enabled, floor plans with zero available units will have an additional CSS class applied for styling.

CSS Classes Applied

Floor plans receive availability-based classes regardless of the fade setting, so that you can further control display:

• .has-units-available: Applied to floor plans with at least 1 available unit
• .no-units-available: Applied to floor plans with 0 available units

When the fade setting is enabled, floor plans with no units also receive:

• .no-units-available-faded: Additional class for faded styling (Rent Fetch provides styles that handle this out of the box, but you may wish to style them differently and can override these styles in your theme).

Sample CSS for Availability Indication

You can style floor plans based on availability status:

/* Style available floor plans */
.has-units-available {
    border: 2px solid #4CAF50;
    background-color: rgba(76, 175, 80, 0.1);
}

/* Style unavailable floor plans */
.no-units-available {
    border: 2px solid #f44336;
    background-color: rgba(244, 67, 54, 0.1);
    position: relative;
}

.no-units-available::after {
    content: "Unavailable";
    position: absolute;
    top: 10px;
    right: 10px;
    background: #f44336;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

Implementation Notes

• The availability classes (has-units-available / no-units-available) are always applied based on the actual unit count
• The faded class (no-units-available-faded) is only added when the setting is enabled
• Unit counts are determined by the available_units meta field
• Styles should be added to your theme’s CSS file or via a custom CSS plugin
• The faded effect uses opacity and grayscale filters for a subtle visual distinction

This feature improves user experience by making availability status immediately apparent while maintaining the display of all floor plans.