Support

August 22, 2019 at 2:54 am

Hi there,

You can use some CSS to hide the elements on the cart, for the update icons (+, -, trash):

#event-cart-tbl .event-cart-update-buttons {
    display: none!important;
}

For the subtotal:

.event-cart-total-row-sub-total {
    display: none;
}

You can place both of those in Appearance -> Customize -> Additional CSS.

I would also like to set the font size and eliminate bolding for all the tables in Event Expresso. Is there a way to do that, too?

It’s possible with CSS, but the tables in EE all do not use a single specific class/id so you’d need to go through each table and add CSS to suit.

August 22, 2019 at 12:17 pm

I just kept the !important in the CSS in Avada>Theme Options and it works it just has a little caution sign next to it.

The problem with !important is people overuse it, and use it incorrectly so it becomes hard to override styles and you get into ‘specificity wars’ trying to get your styles to apply. So the ! will simply be to warn you that its use is discouraged however it is necessary in this case.

People use !important when it isn’t needed, then it causes a whole mess of specificity issues when trying to apply additional styles, which in short is what you’re doing with your next question (no offence intended, but you don’t need !important there).

Those selectors don’t work because:

.event-cart-line-item-desc-spn I don’t know where that is from, it’s not a class I can find in EE?

.event-cart-line-item-desc-spn smaller text, work right to left with CSS so that’s targeting a ‘text’ element within a ‘smaller’ element, within an element with the class (which is that the . at the front means) event-cart-line-item-desc-spn smaller which doesn’t exist.

.line-item-desc-spn smaller text {
display: none !important;
}

This one is closest but smaller and text are incorrect.

Using chrome dev tools if you inspect the element you’ll see it’s a span with 2 classes line-item-desc-spn and smaller-text.

https://monosnap.com/file/7ZMJORkYdaXUTdRgG7WvKozMsZNtFh

smaller-text is too generic and so it will likely be used in other places (it is)

.line-item-desc-spn should target that line specifically.

So this will work:

.line-item-desc-spn {
    display: none;
}

Make it even more specific for only the event cart by working up the through the parents to find another element that has an ID or class that sounds like it specific to that section, I’d use event-cart-wrap-dv which is an ID so needs an # at the beginning, meaning you can use:

#event-cart-wrap-dv .line-item-desc-spn {
    display: none;
}

Right right to left, so any element with class line-item-desc-spn within the element with ID event-cart-wrap-dv, set to display: none.