0

Basically I have a product grid page containing an item title, item description and item price.

When an item is free, the price shows as £0.00

However I wondered if there was a way I could get it to not show the price at all for free items.

The problem I have as well is that the system I am working in has very limited customisation options (CSS only)

So no JS, or PHP, or Pre-Processor CSS. Even the HTML can only be tweaked in certain parts.

So is it possible to achieve this is traditional CSS? 

.outer-wrapper {
    width: 250px;
}

.title {
    border: 1px solid black;
    margin: 10px;
}

.description {
    border: 1px solid black;
    margin: 10px;
}

.price {
    border: 1px solid black;
    margin: 10px;
}
<div class="outer-wrapper">
    <div class="title">
        ITEM TITLE
    </div>

    <div class="description">
        Lorem ipsum dolor sit amet
    </div>

    <div class="price">
        &pound;0.00
    </div>
</div>
ginomay89
  • 249
  • 3
  • 17
  • How does your page get rendered, or served to the browser? Do you not have any way to add a class (or data attribute) to the price element with some logic on a server? – chazsolo Jul 11 '19 at 14:01
  • @chazsolo It is using a WYSIWYG type editor (Infigo). Yes it will let me create classes, but there is no way I can access server side code. – ginomay89 Jul 11 '19 at 14:04
  • I've not used that but the only way you're going to be able to distinguish an element with a price of 0 vs. something else is attaching a class, data attribute, etc. that a CSS selector can point to - without that, pure CSS cannot do what you are asking. – chazsolo Jul 11 '19 at 14:11

0 Answers0