Moving the WooCommerce Tickets form to display to the right of the feature image

[raymond]

We saw the page “Moving the WooCommerce Tickets form” at https://theeventscalendar.com/knowledgebase/moving-the-ticket-form/.

We would like to move the Tickets to the right of the featured image. We did not find any documentation, so if you could help with this we would appreciate it.

Thanks,

Allan McNabb

[Josh]

Hey Allan,

Thanks for reaching out to us!

To start, you’ll want to follow what is described in the tutorial you linked to so we can get our tickets near where we would like them to end up. To give you a little more of a direct response and to ensure I’m not giving you a code snippet that would cause more confusion than help, would you mind linking me to an event that has both a featured image and WooCommerce Tickets on your site?

Thanks!

[raymond]

Thanks.

We have a test event setup here that we are working on with this issue – https://www.ffmva.com/event/adult-child-infant-cpraedfirst-aid-6/

If we are not able to get the Tickets to the right of the feature image, we may want to put the event description to the right of the image.

Thanks again for helping us!

Allan McNabb

[Josh]

Hey Raymond,

Thanks for the link! I’m not seeing tickets on that link but here is a quick CSS snippet that you should be able to add to get what you’re looking for:

.tribe-events-event-image,
.single-tribe_events #tribe-events-content form.cart {
float:left;
width:50%;
}

This should get you started in the right direction. You may want to modify a bit from there but that should get you mostly there.

Let me know if this helps.

Thanks!

[raymond]

Thanks, that helped.

We have also made changes so that you can see the tickets on the test page again.

Now we are trying to accomplish 2 things to improve the styling.

#1 change the plugin css

.single-tribe_events #tribe-events-content div.cart, .single-tribe_events #tribe-events-content form.cart {
margin: 30px 0;
}

to 0 margin.

When we add add

.single-tribe_events #tribe-events-content div.cart,.single-tribe_events #tribe-events-content form.cart {
margin: 0;
}

to the child theme, it does not work.

#2 We are trying to style the description below the tickets so that the first line starts at the far left, rather than inline with the tickets.

Thanks for any help you can provide!

Allan McNabb

[Josh]

Hey Raymond,

For the first, try starting with “body.single-tribe-events” when adding the selector to your theme. This should help in overriding the style there.

I’m currently seeing a 404 (may need to try re-saving the Permalinks under the Settings > Permalinks page within your dashboard) when trying to visit the previous link, however it sounds like this may be an issue with the float. Try adding “clear:both” to the css styles for the content area that you would like started at the far left.

Let me know if this helps.

Thansk!

[raymond]

Hi Josh,

Thanks so much for your time and the help!

The link to the test event is https://www.ffmva.com/event/adult-child-infant-cpraedfirst-aid-8/

We have changed the CSS in the child theme to

.body.single-tribe_events #tribe-events-content div.cart,.body.single-tribe_events #tribe-events-content form.cart {
margin: 0;
}

This has not overridden the plugin CSS

.single-tribe_events #tribe-events-content div.cart, .single-tribe_events #tribe-events-content form.cart {
margin: 30px 0;
}

Thanks for helping us!

Allan McNabb

[raymond]

Hi Josh,

I made a short video showing the problem we are having over ridding the plugin CSS in the child theme.

Thanks for any help you can give us!

The video is at
https://drive.google.com/open?id=0B4Xnjhbx7hBkQlM5N3gzWURabDg
and will be available for a few days.

Thanks again!

Allan

[Josh]

Hey Allan,

Thanks for providing the video. The CSS should work if you add “body” to the beginning of the string. You’ll want to include it as “body.single-tribe_events” excluding the leading “.” that you have in your example above.

Let me know if that works.

Thanks!

[raymond]

Hi Josh,

Thanks for your help!

Adding “body” was what we needed to moved the Tickets up:

/* Set WooCommerce Tickets to left of the featured image
——————————————— */

.tribe-events-event-image,
.single-tribe_events #tribe-events-content form.cart {
float:left;
width:50%;
}

body.single-tribe_events #tribe-events-content div.cart,
body.single-tribe_events #tribe-events-content form.cart {
margin: 0;
}

To affect changes to the max image size, we changed the CSS to:

/* Set WooCommerce Tickets max image width
——————————————— */

.tribe_events .tribe-events-event-image img {
max-width: 300px;
height: auto;
}

[Josh]

Hey Raymond,

Awesome! I’m glad you were able to get this looking the way you want it.

I’ll go ahead and close this thread for now. If you have any further questions, please don’t hesitate to open a new thread.

Thanks!

[Author]

Posts