Issue with styling

Hello – Thanks for the screenshots! That certainly doesn’t look ideal. It looks like the checkout plugin is adding css that is interacting poorly with the css we added (which I think is also what you are saying). I’m not completely familiar with how wordpress css works but couldn’t you add css to your main css file (not the kla-admin one, good point about it being overwritten) to make modifications?

Your point about not being able to target the sections is a good one – I will write-up an enhancement request for the team to ideally enclose our sections in a parent div so it is easier to target. For your case, the checkboxes should have an id that will allow you to target them, if you want the parent span you’ll just have to use some more complex target selectors (sorry, hard for me to give exact details without seeing your website). But the id should be kl_newsletter_checkbox. Hopefully that helps! If you want to dig in more together, please create a support ticket: ??https://help.klaviyo.com/hc/en-us/articles/115001002272-How-to-contact-support

Thank you very much for your response.
That Shopify style checkout plugin completely disables theme css. So, I have to edit the css in their plugin file. I styled checkboxes as both of them hav ids. And those are no longer overlapping. But for the text without any html tags around it, I cannot style it until it is wrapped in a div. Currently the font size of text is as big as form fields and we want to use smaller font size just for that text.

Got it – I asked around my team and one suggestion was to use another plugin that allows you to insert css/javascript. For example I tested one on our test site called WPCode that allowed me to add custom css/javascript to my checkout page. Would something like that work for editing the css on that page?

Your feedback about making better labeled divs is great and I did submit an enhancement request internally but the challenge would be that if we added a div it could impact how other groups have customized their checkout pages around our css already. It’s still something we should look at but there’s unlikely to be a quick or easy fix unfortunately.

Thanks for the suggestion. Like I wrote, I already added CSS for checkboxes. But the text is not in any element which is really a bad practice tbh. Both the checkboxes are wrapped in <p>. That text can go in another <p> just after those checkboxes is what I feel. If it affects existing users, then you can add a new parameter in plugin which users can select and that parameter will wrap this text in an element. Simple!

Not a bad idea! Would you mind sharing your website url so we can try and find a quick solution? I have a feeling there is likely a css selector we can put together.

Other plugin developer responded and provided me a way to add css. So, using that, I added some css. To reduce the font size of the text coming from klaviyo plugin, I had to add font size to parent element of checkout page which applied font changes on all checkout fields and labels. However, I applied another rule to change the font sizes for those. So, it is sorted now . But yes, please consider adding a wrapper element to that text in future updates.
Thanks.

• This reply was modified 1 year, 7 months ago by sagaranvekar.

Oh excellent – so glad you were able to figure out a workaround. Thank you for following up! I put in an enhancement suggestion for your original request.