Support

Home Forums Event Espresso Premium Adding Space to EE4 Cart

Adding Space to EE4 Cart

Posted: September 20, 2022 at 4:58 pm


JacqK

September 20, 2022 at 4:58 pm

Hello
We have the latest EE4.

We tend to use long titles for our events and find that when an attendee registers for multiple events, it might be better if there was more space between events as they apear in the cart. I am hoping you can provide some easy css code to create an extra space between events in the cart – I will provide a screen shot
Regards, Joe


JacqK

September 20, 2022 at 5:00 pm

This reply has been marked as private.


JacqK

September 20, 2022 at 5:06 pm

PS: Wondering if another alternative would be code so that the longer titles wrap on to the next line, keeping them away from the numbers and icons on the cart?


Tony

  • Support Staff

September 21, 2022 at 5:29 am

Hi there,

So by default, EE tries to not override theme styles for most of the elements we output. We do this so that our output mostly matches the rest of your site, so when your theme styles tables in a particular way we don’t override those styles which is what is happening here.

The cart output is in a table and for many themes will look something like this:

https://monosnap.com/file/ZkUVbFog1j3idkflF60IFxkJByuYGZ

Which makes it a little clearer which section if for which event, on your site there are no table borders and row heights are reduced to be fairly close which then leads to the above.

You can try adding some additional styles to help with this, for example:

.event-cart-event-row {
    line-height: 1.2em;
    height: 4em;
    width: 50%;
    display: table-cell;
}

Which should set the event title row line height to be bigger and sets the width to be 50% to avoid showing the event title over the other fields.

Add that to Dashboard -> Appearance -> Customize -> Additional CSS.

Does that help?


JacqK

September 21, 2022 at 5:18 pm

This reply has been marked as private.


Tony

  • Support Staff

September 21, 2022 at 5:26 pm

You’re missing the . at the beginning of event-cart-event-row

The . tells CSS you are targeting a ‘class’.

You’ll also see # being used, which tells CSS you are targeting an ID.

Both of those are important in CSS so missing either will prevent it from working ๐Ÿ™‚


JacqK

September 21, 2022 at 6:05 pm

Ahh yes, sorry Tony (I need to get some glasses). I have added this and it has worked. Wondering though whether we can add a line space between the subtotal for the last event on the list and the Event Cart Subtotal information just to separate this a bit?


JacqK

September 21, 2022 at 6:05 pm

This reply has been marked as private.


JacqK

September 21, 2022 at 8:54 pm

Hi Tony – I would grateful if you could asl provide the code the implement the same to the checkout apge and also hide the ticket name and description details like we did with the cart. I will provide a screenshot of the checkout as it is now


JacqK

September 21, 2022 at 8:55 pm

This reply has been marked as private.


Tony

  • Support Staff

September 22, 2022 at 2:06 am

Something like this:

.event-cart-total-row-sub-total {
    line-height: 1.2em;
    height: 4em;
}

Will add spacing to the subtotal.

Wrt to the checkout page, is this what you are looking for?

#event-cart-total-row {
    line-height: 1.4em;
    height: 4em;
    width: 50%;
    display: table-cell;
}


JacqK

September 22, 2022 at 2:50 am

Thanks Tony – that does it. Hoping also that you could provide the code to hide the ticket details on the checkout page like we did with the cart.

Regards, Joe


Tony

  • Support Staff

September 22, 2022 at 4:47 am

Sorry, meant to add that into the last reply, I would use something like this:

#spco-payment-info-table .item .item_l:first-of-type {
    visibility: hidden;
}


JacqK

September 23, 2022 at 10:15 pm

Thanks Tony – would be great if you could also let me know the additional code to make the cart table cells borders show (very light border).


Tony

  • Support Staff

September 27, 2022 at 4:06 am

Adding a border to all tables or just the cart table?

All tables:

table, th, td {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

Specifically the cart table:

#event-cart-wrap-dv table,
#event-cart-wrap-dv th,
#event-cart-wrap-dv td {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

If you are adding borders you’ll likely find you’ll need to change the previous CSS I gave you so that the spacing doesn’t alter how the cells look for the event name.


JacqK

September 29, 2022 at 9:54 pm

This reply has been marked as private.


Tony

  • Support Staff

October 3, 2022 at 4:14 pm

Do you mean something like this?

#spco-payment-info-table thead .jst-cntr {
    text-align: right;
}


JacqK

October 3, 2022 at 7:04 pm

That’s great, many thanks


Tony

  • Support Staff

October 4, 2022 at 4:32 am

You’re most welcome ๐Ÿ™‚

You must be logged in to reply to this support post. Sign In or Register for an Account

Event Espresso