Cannot Style YITH Gift Card Product Form widget

Hi there,
hope you are doing well! ??

Could you give us more info about what you want to achieve, please? (With a screenshot, for example)

Also, if possible, we will need to take a look on your product page, to understand better what you need, could you share with us the link of your gift card product page?

Let us know any news, please.

Have a nice day!

Hi There

Thank you for getting back to me. See the screenshot at link below:

View post on imgur.com

I have added the Yith Gift Card form on my Elementor page template, however it show all garbled and squashed. And there is no way of styling it through elementor as the YITH Widgets do not have the styling tab for Elementor.

I hope this helps to show my issue?

Also another issue I have is that the product image keeps disappearing…

See screenshot on link below

View post on imgur.com

Hello

Any feedback???

Hello there,

Could you check if the problem is solved by adding the next CSS in your theme, please?

.ywgc-form-widget-elementor-widget .gift-cards_form{
  display: block !important;
}

About the image, you have to add the widget of the WooCommerce product image to the template.

Let us know any news.

Have a nice day!

Thanks for the response however this does not seem to work. See link below.

View post on imgur.com

It would really be useful if one could use Elementor to style your widget like font size, fields, etc as one would style normal Elementor widgets… see screenshot below of what I mean.

View post on imgur.com

Hello there,

hope you are doing well! ??

Well, with Elementor you can add the gift card shortcode and that’s why you can’t edit directly it from Elementor.

If you want you can provide us with a page where we can see the body of the gift card and we will be happy to create some CSS rules to align and fix it.

Let us know.

Have a great day!

Thanks for the response, however I came upon a plugin that helped me style your widget as I wanted.

I am having this same problem. I HATE the default styling of the form for Delivery Info on the Product page. I am not using Elementor. However, there seems to be no way for me to style the form. My CSS (I’ve tried writing my new css into the theme’s style.css and elsewhere — nothing works); my CSS is also directly targeting the DOM IDs of the input fields and using !important but the old style persists and it’s very unfriendly… fields are WAY too long (length: 70%;) and should be taller (at least height: 25px;) as they are far too small for mobile users. Very frustrating and a good reason not to even mess with this plugin — too inflexible. Maybe the styles are in-lined?

I really wish people who find a solution would share it with the rest of us. That’s also very frustrating. Is this some sort of “trade secret”, LOL!?

Hi @lambertvans24 I’m having the same issues/frustrations as you, what plugin did you use to help styling the widget? Thanks in advance