How to change woocommerce tabs into popup?

  • You MUST read the Babiato Rules before making your first post otherwise you may get permanent warning points or a permanent Ban.

    Our resources on Babiato Forum are CLEAN and SAFE. So you can use them for development and testing purposes. If your are on Windows and have an antivirus that alerts you about a possible infection: Know it's a false positive because all scripts are double checked by our experts. We advise you to add Babiato to trusted sites/sources or disable your antivirus momentarily while downloading a resource. "Enjoy your presence on Babiato"

xeric

Member
Apr 5, 2019
91
18
8
Here's a screenshot of the final look I'm aiming for

1615445983781.png

And this is how they currently are

1615446092722.png

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

Member
Apr 5, 2019
91
18
8
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
 

Medw1311

Grumpy MOD!!
Staff member
Moderator
Trusted Seller
Trusted Uploader
Jul 24, 2019
8,467
11,403
120
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?
 
  • Like
Reactions: xeric

Medw1311

Grumpy MOD!!
Staff member
Moderator
Trusted Seller
Trusted Uploader
Jul 24, 2019
8,467
11,403
120
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.
 
  • Like
Reactions: xeric

xeric

Member
Apr 5, 2019
91
18
8
Hi medw
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.
 

Medw1311

Grumpy MOD!!
Staff member
Moderator
Trusted Seller
Trusted Uploader
Jul 24, 2019
8,467
11,403
120
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

Member
Apr 5, 2019
91
18
8
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

New member
May 23, 2020
22
11
3
17
Manhattan
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
 

Medw1311

Grumpy MOD!!
Staff member
Moderator
Trusted Seller
Trusted Uploader
Jul 24, 2019
8,467
11,403
120
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...

Capture.JPG
 
  • Like
Reactions: xeric

xeric

Member
Apr 5, 2019
91
18
8
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

Member
Apr 5, 2019
91
18
8
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...

Capture.JPG
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

New member
May 23, 2020
22
11
3
17
Manhattan
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
 
  • Like
Reactions: xeric

xeric

Member
Apr 5, 2019
91
18
8
1615495114297.png
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

Member
Apr 5, 2019
91
18
8
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
 

Medw1311

Grumpy MOD!!
Staff member
Moderator
Trusted Seller
Trusted Uploader
Jul 24, 2019
8,467
11,403
120
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.
 
  • Like
Reactions: xeric

xeric

Member
Apr 5, 2019
91
18
8
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.
 
  • Like
Reactions: Medw1311

Medw1311

Grumpy MOD!!
Staff member
Moderator
Trusted Seller
Trusted Uploader
Jul 24, 2019
8,467
11,403
120
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 :)
 
  • Like
Reactions: xeric

Forum statistics

Threads
49,589
Messages
543,785
Members
133,949
Latest member
godlastc
AdBlock Detected

We get it, advertisements are annoying!

Sure, ad-blocking software does a great job at blocking ads, but it also blocks useful features of our website. For the best site experience please disable your AdBlocker.

I've Disabled AdBlock    No Thanks