Skip Navigation

[Resolved] Open youtube URL in a modal (using Elementor theme builder for WooCommerce)

This support ticket is created 5 years, 6 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

Tagged: 

This topic contains 5 replies, has 2 voices.

Last updated by pabloQ-2 5 years, 5 months ago.

Assisted by: Christian Cox.

Author
Posts
#1140448

Tell us what you are trying to do?
I want to open a youtube video in a modal. The URL will be inserted in a custom field made for WooCommerce products. The product template will be managed by Elementor.

Is there any documentation that you are following?
No. I didn't find sometghing similar. Maybe because I am the first trying this superawesome integration between Toolset-Elementor-WooCommerce :V

Is there a similar example that we can see?
Yes! You can see what I want to achieve here > hidden link
I want the same effect for the first play button.

What is the link to your site?
hidden link

THANKS!

#1140736

Hi, this is going to be a challenge, and I don't have a simple answer. Toolset doesn't create modals, in general. I can help you use the optional Bootstrap library, which offers a modal element: https://getbootstrap.com/docs/3.3/javascript/#modals
...but unfortunately Elementor isn't compatible with Bootstrap so I don't recommend using them together. I think there are add-ons for Elementor and for OceanWP that create modal elements, but I'm not qualified to show you how to implement those. What I can give you is information about how to access a custom URL field value using shortcodes, so you can place that shortcode in some modal system that is set up to display arbitrary YouTube videos by URL.

You can access a URL custom field value from the current post using this shortcode:

[types field="some-url-field-slug" output="raw"][/types]

Replace the some-url-field-slug with the actual slug of your custom field.

If you find and implement a modal system that accepts shortcodes for YouTube video URLs, I'll be glad to take a look and see what we can do. In my experience, however, Elementor accepts 3rd-party shortcodes in basically none of their element settings. This means it's not easy to use Types field values as the source of some media element or video URL. They recently started offering the Dynamic Content feature to accept custom fields in element settings, but it's still very new. They don't offer customization options for integrating Types custom fields, and it's not possible to use dynamic content from all Types field types, or in every element field. So if you're looking for something more integrated with Elementor, I encourage you to submit a new ticket in the forum using the "Suggest an improvement" option.

#1141425

Thank you Christian for your quick and nice answer!
I see what are you saying, it's not easy to implement something like that by now. And I would prefer to not involve another 3rd part plugin in the site just for this feature.

In fact, there's another suitable solution for my client. They just want to show a video embedded from youtube in the product page. I've created the "Embedded media" field. In order to display the embedded video in the template, do I need to create a view only for this field? Or can I place the shortcode [types field="video"][/types] directly on my Elementor template?

Thanks!

#1142245

No need to create a View just for one field. You can place the shortcode in a Text element in your Elementor template for this post type.

#1142289

Hi Christian!

Thank you for the quick response. I was trying to do it with the shortcode widget and it didn't work like expected. Just let me tell you and your team that integration Toolset - WC - Elementor is INSANE and very powerful for all non-coders like me. I am going to close the ticket, I just wanted to say thank you for your work 🙂

#1142292

My issue is resolved now. Thank you!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.