How to change woocommerce tabs into popup?

xeric · Mar 10, 2021

Here's a screenshot of the final look I'm aiming for

And this is how they currently are

Theme I'm using is JupiterX. It came with all Jet Plugins bundle.
I was thinking of removing the tabs section with css then creating pop-ups with jet popup. But I'm not sure how to grab the description for each product in a jet popup and then was not really sure how to add the popup triggers under the add to basket button.

The page is set up in a weird way where all products are on the same page using shortcodes. https://savasana.shop/bundle

The idea I have in mind is that I create multiple pop-ups, with pre-loaded description and care instructions in them and use a plugin that allows you to show reviews for any specefic product using shortcodes and add the pop-up triggers as headings in elementor and position them to be under the add to basket button for each product. But I feel like that may be horribly inefficient and really bad in terms of responsive. Looking for some feedback on how exactly to go about this

xeric · Mar 10, 2021

Or maybe as an alternate solution I could have the default jupiterx tabs set to 48% width and float right and somehow close them by default unless clicked on to expand

MrSam_1 · Mar 11, 2021

The first part of your question is harder than I thought it would be and I'm still playing around trying to figure that one out.

But for the second part, the launching of the popup, that's easy...

In your Heading widget go to the advanced tab and select the JetPopup menu and in Attached Popup select the popup you want to launch and for Trigger Type select Click on Widget.

You can also use buttons for this and same procedure except for Trigger Type select Click on Button.

Btw do you have Elementor Pro installed or not?

MrSam_1 · Mar 11, 2021

Ok so in theory this should work...

1) Create 3 Popups - 1 each for Details, Care & Reviews. Edit each of them in Elementor and in the settings tab of the widget make sure you turn on Loading content with Ajax and Force Loading. Don't add any content at all to these popups. Save them but don't add any display conditions.

2) Next you need to create 3 JetWooBuilder Single item templates, again 1 each for Details, Care & Reviews. Use the relevant widgets to add the data you need in each one.

3) Now go to your shop page and the heading launchers your created and follow the instructions in my previous post but also turn on the option for JetWooBuilder Quick View and select the relevant JetWooBuilder template you created.

As I say in theory that should work.

xeric · Mar 11, 2021

Hi medw

medw1311 said:
The first part of your question is harder than I thought it would be and I'm still playing around trying to figure that one out.

But for the second part, the launching of the popup, that's easy...

In your Heading widget go to the advanced tab and select the JetPopup menu and in Attached Popup select the popup you want to launch and for Trigger Type select Click on Widget.

You can also use buttons for this and same procedure except for Trigger Type select Click on Button.

Btw do you have Elementor Pro installed or not?

I have basic elementor with jupiter x license but if elementor pro helps me achieve this, i don't mind getting a plan for it at all.

I know how to trigger the popups. My concern was populating them with the data from the products dynamically. I'll try to follow the steps you suggested tomorrow morning.

MrSam_1 · Mar 11, 2021

xeric said:
Hi medw

I have basic elementor with jupiter x license but if elementor pro helps me achieve this, i don't mind getting a plan for it at all. I know how to trigger the popups.

My 2nd reply negates the need for Elementor Pro.

xeric · Mar 11, 2021

medw1311 said:
My 2nd reply negates the need for Elementor Pro.

MY current product display on the shop page which is savasana.shop/bundle is not through jet woo builder but rather through default jupiterx.

Also, this part confuses me a bit "in the settings tab of the widget make sure you turn on Loading content with Ajax and Force Loading." but I'll try messing around with this in the morning.
Edit: I think you mean in the settings of the jet pop up I create. Please correct me if I'm wrong

The static solution I have of loading up manual popups works for sure. It's just that I'd rather have them dynamic.

Also the reason I'm not currently using jet woo builder single product layout as my default for the moment is because it's a bit buggy in terms of styling that I want.

Akeanes47 · Mar 11, 2021

Hi,
I would use oxygen builder.
Disable tabs completely on woocommerce and basically create 3 modals. The modals can be triggered from any element so you can create anything that will trigger the content.

My 2 cents.

But of course changing to oxygen can be a pain but after all page builders seem quite inefficient.

Having said that. You can still apply the same principle by using elementor and getting 3 pop ups.

Regards

MrSam_1 · Mar 11, 2021

xeric said:
MY current product display on the shop page which is savasana.shop/bundle is not through jet woo builder but rather through default jupiterx.

Also, this part confuses me a bit "in the settings tab of the widget make sure you turn on Loading content with Ajax and Force Loading." but I'll try messing around with this in the morning.
Edit: I think you mean in the settings of the jet pop up I create. Please correct me if I'm wrong

The static solution I have of loading up manual popups works for sure. It's just that I'd rather have them dynamic.

Also the reason I'm not currently using jet woo builder single product layout as my default for the moment is because it's a bit buggy in terms of styling that I want.

It shouldn't matter that you are not using Jetwoobuilder for the shop page itself, you should be able to just use it for the popup templates.

It works perfectly for me on a normal single product page but my only doubt about my method is that you effectively have all single products on 1 page.

The below image is the setting I meant...

xeric · Mar 11, 2021

Akeanes47 said:
Hi,
I would use oxygen builder.
Disable tabs completely on woocommerce and basically create 3 modals. The modals can be triggered from any element so you can create anything that will trigger the content.

My 2 cents.

But of course changing to oxygen can be a pain but after all page builders seem quite inefficient.

Having said that. You can still apply the same principle by using elementor and getting 3 pop ups.

Regards

Hey. Thanks for your reply.

Thing is with switching to oxygen, j would have ti redo the entire site in oxygen which would be a headache.

I know how to trigger the popup. My issue is trying to get the description etc dynamically for each product if I have multiple "single_product" on the page

xeric · Mar 11, 2021

medw1311 said:
It shouldn't matter that you are not using Jetwoobuilder for the shop page itself, you should be able to just use it for the popup templates.

It works perfectly for me on a normal single product page but my only doubt about my method is that you effectively have all single products on 1 page.

The below image is the setting I meant...

That's exactly my issue of having all single products on one page because that's the layout needed. I think I'll just do them manually. The website will not be receiving very high levels of traffic anyway

Akeanes47 · Mar 11, 2021

xeric said:
Hey. Thanks for your reply.

Thing is with switching to oxygen, j would have ti redo the entire site in oxygen which would be a headache.

I know how to trigger the popup. My issue is trying to get the description etc dynamically for each product if I have multiple "single_product" on the page

Okay let's ditch oxygen then. Okay for the pop-ups then. Now perhaps the thing is exactly that. Multiple descriptions in a single product page.
Humm custom fields might help. Does it need to be a product page? Or more of a shop page?

Nice problem... Ahahahah

xeric · Mar 11, 2021

This is how I have it set currently. I think I'll just create a manual one for each prduct since there's only 4 products in total. Then I'll adjust top margin to make it closer to add to cart

xeric · Mar 11, 2021

Akeanes47 said:
Okay let's ditch oxygen then. Okay for the pop-ups then. Now perhaps the thing is exactly that. Multiple descriptions in a single product page.
Humm custom fields might help. Does it need to be a product page? Or more of a shop page?

Nice problem... Ahahahah

The pop up needs to be about the product that the button was near on a page that lists multiple "single_products" link at https://savasana.shop/bundle

MrSam_1 · Mar 11, 2021

xeric said:
That's exactly my issue of having all single products on one page because that's the layout needed. I think I'll just do them manually. The website will not be receiving very high levels of traffic anyway

Given you only have a few products doing it manually might be the way to go. (Are those real prices btw?)

Without knowing exactly how you are pulling in the product data currently it's hard to say if my method would work or not.

xeric · Mar 11, 2021

medw1311 said:
Given you only have a few products doing it manually might be the way to go. (Are those real prices btw?)

Without knowing exactly how you are pulling in the product data currently it's hard to say if my method would work or not.

No just dummy prices for now lol. Still in development. If you need some access to come to a better conclusion I trust you enough to do that but at the same time in this low a product count, manual solution just seems to make more sense than spending so much more time trying to work out an automatic one.

I really appreciate all the help though. Thank you both.

MrSam_1 · Mar 11, 2021

xeric said:
No just dummy prices for now lol. Still in development. If you need some access to come to a better conclusion I trust you enough to do that but at the same time in this low a product count, manual solution just seems to make more sense than spending so much more time trying to work out an automatic one.

I really appreciate all the help though. Thank you both.

I think you're right about doing it manually tbh.

It was an interesting couple of hours this afternoon coming up with my proof of concept for my method and I actually learned something new from it so wasn't time wasted

How to change woocommerce tabs into popup?

Welcome to Original Babiato! All Resource are Free and No downloading Limit.. Join Our Official Telegram Channel For updates Bypass All the resource restrictions/Password/Key? Read here! Read Before submitting Resource Read here!Support Our Work By Donating Click here!

Join Our Official Telegram Channel For updates Bypass All the resource restrictions/Password/Key? Read here! Read Before submitting Resource Read here!

Support Our Work By Donating Click here!

Member

Member

Well-known member

Well-known member

Member

Well-known member

Member

New member

Well-known member

Member

Member

New member

Member

Member

Well-known member

Member

Well-known member

Similar threads

Forum statistics

Share this page

Welcome to Original Babiato! All Resource are Free and No downloading Limit..
Join Our Official Telegram Channel For updates
Bypass All the resource restrictions/Password/Key? Read here!
Read Before submitting Resource Read here!
Support Our Work By Donating Click here!

Join Our Official Telegram Channel For updates
Bypass All the resource restrictions/Password/Key? Read here!
Read Before submitting Resource Read here!