Separate the widget “add to cart”, BUTTONS from PRODUCT VARIATIONS

Hi there! i’m attaching a single product page that I want to achieve.
The question is all the product variations there (flavor, size) are separated from the qty, add to cart and in woodmart’s case “buy now” button. For in woodmart, they all belong to the same “add to cart” widget.
Is there any way to achieve that layout? I’ve tested duplicating the widget and hiding with css, but it hides the same thing from both duplicated widgets. Another thing, is there any way to customize the color of the “text swatches”?

thanks!

Attachments:

You must be logged in to view attached files.

Hi steban.g,

Thanks for reaching to us.

Unfortunately, it’s impossible. They are a part of the same form in WooCommerce and we can’t separate them.

Regards,

is there any way to duplicate the widget, apply some unique class id to one of them, and hide via css the things that I don’t need from one of them?

Hi steban.g,

Provide me with the mockup of the styles that you try to achieve and we’ll send you custom code (if it’s possible).

Regards,

this is the mockup that I want to achieve:
https://www.chewy.com/meow-mix-seafood-medley-dry-cat-food/dp/127512

As you can see, the variations are in the middle column, and the QTY, ADD TO CART, and AUTOSHIP are in the right collumn. That’s what I need.

I need three more things:
1) How can I disable de “PULL TO REFRESH” feature on chrome -mobile-? It’s a really bad experience to be navegating on the web and accidentally swype and refesh.

2) How can I show different styles of variation swatches on mobile and desktop? For example “flavour” and “size” on desktop are text, but in mobile they are dropdown, I know this is possible because i’ve done it by accident in woodmart but I can’t achieve that again.

3) please check this one in MOBILE VIEW:
https://www.amazon.com/contenido-prote%C3%ADnas-SmartBlend-aut%C3%A9ntico-27-5-libras/dp/B00DE7WKSG/ref=mp_s_a_1_1?crid=2F105T2UMU4V0&dib=eyJ2IjoiMSJ9.sF7VHTtwy-nFkJCpM_BbsUQl-apGAh0P8K6rxgglxaC3gAspP6XAXazYlawRx0R8cSz1Nrck9KOusHBMdkX8MCdBW9O7c1_Lxd0zxhYf4Tq02FSLrxdl2pvS61hC1Yg2HkVcqJXo-DV6bhofkM5BZqOBt8QKnuEBB6vvbtHPX0knvTNbFUOkuCTy02KYuTpD_XjJL1jdh_bZIzAOSkZK2A.kmv35-BNNZQRU8udOVd6GQ7Q5FKWLBdUeX5_ytJuHAQ&dib_tag=se&keywords=dog+food&qid=1708039076&sprefix=dog+fo%2Caps%2C239&sr=8-1-spons&sp_csd=d2lkZ2V0TmFtZT1zcF9waG9uZV9zZWFyY2hfYXRm&psc=1

How can I achieve the “variation swatch slider”, as in “SIZE” feature?

Thanks!!!!!!!

4) How can I insert in elementor for example the “brand” of an article?

Hi steban.g,

First of all, take our apologies for the long delay in answering.

Screenshot is not available, please double check. Regarding more 3 questions:

1. This is Chrome functionality, which WoodMart does not control it.

2, 3. There is no such an option by default.

4. Sorry, but your answer is a bit unclear to me. Please describe in more details, this will allow me to thoroughly investigate and address your concerns in a more efficient.

Regards,

Hi there.
A) Weird that you don’t see the attached file, i’m attaching it again, and send you the link that I want to achieve.
https://www.chewy.com/pedigree-complete-nutrition-grilled/dp/388673

B) I’m trying to create a nicer mobile view, but this I can’t achieve (attached).
I want to create a “popup” when select ADD TO CART in the single product page. Just like the image I send you, but when I create a popup in elementor, and insert the add to cart widget, the theme takes the variations, but when I try to add, it says “Please choose product options by visiting Eames plastic side chair”, and it’s not working. What I’m I missing?

Attachments:

You must be logged in to view attached files.

C) Another one..Is there any way to change the way that “wishlist” works?? It would be much nicer if it works as a “ON” “OFF” button, instead of “ON” and “GO TO WISHLIST”. And is there any way to reduce the delay when clicking it? it takes too long to add.

D) I want to create a popup from elementor, and I want to trigger it from the navbar menu (mobile bottom menu) when I click it. How do I achieve that?
I want to do that to customize the mobile side menu and side cart

Hi steban.g,

Thanks for your patience.

A. Please use https://prnt.sc/ to capture screenshot and generate links.

B. Please provide URL of the mentioned page, so I can take a closer look.

C. There is no such an option by default. Delay is depends on many factors, you can try to increase PHP Max Input Vars value and check again https://prnt.sc/6CqhGu-sPidY

D. Are you referring to Promo popup? Which can be set in Theme Settings > Promo Popup?

Regards,

Hey guys! I will resend all again, but please I beg you to give me a hand here, it’s taking too long!

A) https://prnt.sc/2Jrl90My6W2a this is what I want to achieve, and this is the link that I already sent you, https://www.chewy.com/pedigree-complete-nutrition-grilled/dp/388673

B) See the feature in this link, switch to mobile view, and hit any variation, see that a popup comes up.
https://elessi.nasatheme.com/product/iphone-xs-max-silicone-case/

C) I’ll take a look.

D) No. What I want is to trigger an elementor popup from the navbar menu, so I can creaty my own cart and menu.

Hi steban.g,

Thanks for your patience.

A, B. There are no such an options by default. You need to find a third party plugin to achieve more functionality that best suits you.

C. Navigate to Appearance > Menu > Select the menu. Then, add Custom Link item or edit existing one. Add the following CSS class to the CSS Classes field of menu item link https://prnt.sc/xs4y5EuepN4Q

woodmart-open-newsletter

Make sure the popup has been activated in Theme Settings -> Promo Popup https://prnt.sc/mlASQy34ESzM.

Regards,

[Author]

Posts