Txt button issue

Viewing 12 replies - 1 through 12 (of 12 total)
  • Muhammad Shakeel

    (@shak33l)

    9 months, 3 weeks ago

    Hi @freddyeee,

    You can try adding the following custom CSS under “Appearance > Customize > Additional CSS”:

    a.checkout-button.button.alt.wc-forward {
    display: flex;
    justify-content: center;
    align-items: center;
}

    Additional CSS screenshot: https://monosnap.com/file/1QJlCK9TDR03ophHQoU8B8WDMXO2rp

    “Finalizar compra” button screenshot after applying custom CSS: https://monosnap.com/file/FWxiYH92wtkqTGVCFtmzzO8HDHxCiA

    Thread Starter freddyeee

    (@freddyeee)

    9 months, 3 weeks ago

    thanks, but It didn’t solve the issue

    the strange thing is that it appears nomal on the Appearance > Customize > Additional CSS section, but when you see the web live it’s not.

    https://snipboard.io/0i1x76.jpg

    • This reply was modified 9 months, 3 weeks ago by freddyeee.
    Gilbert Hernandez

    (@ghernkadence)

    9 months, 3 weeks ago

    Hello @freddyeee,

    You have code that is changing the button that doesn’t belong to Kadence. However, try adding the following CSS to solve the problem. 

    button.single_add_to_cart_button font {
    vertical-align: unset !important;
}
    Thread Starter freddyeee

    (@freddyeee)

    9 months, 2 weeks ago

    what code is that ?

    Before writing the code you just sent me, I did some testing: I deleted browser cache, tried different browsers and incognito mode, it only worked ok for Mozilla firefox, the issue was in chrome and microsoft edge and also the issue is in the mobile version, I tested it on incognito mode.

    I wrote the code you gave me and it still persists the error.

    Gilbert Hernandez

    (@ghernkadence)

    9 months, 2 weeks ago

    Hello @freddyeee

    I don’t see the CSS on the page. Where did you add the CSS? After you add CSS, you should clear the cache. You should add the CSS to the Additional CSS section in the Customizer as explained in the following documentation page:

    https://www.kadencewp.com/help-center/docs/kadence-theme/how-do-i-add-custom-css/

    Thread Starter freddyeee

    (@freddyeee)

    9 months, 2 weeks ago

    I did, but It didn’t resolve the issue, that’s why i deleted it.

    I put it again, now

    Thread Starter freddyeee

    (@freddyeee)

    9 months, 2 weeks ago

    Hi @freddyeee
    I replicated the issue you’re experiencing on your cart page by checking it on both Chrome and Safari. On Chrome, a space automatically appears on top of the “Finalizar compra” button, and it’s not even removable by CSS.

    Direct link: https://gifyu.com/image/SRBob
    It looks like your theme is overriding the styles or has a browser compatibility issue. This is likely why your custom CSS isn’t working as expected. I recommend reaching out to your theme developer for further assistance here. I am sure they will have no problem supporting you there.
    I wish I could help more, but hopefully, this gets you going in the right direction to get the job done.

    That’s what the woocommerce plugin support team just told me.

    Gilbert Hernandez

    (@ghernkadence)

    9 months, 2 weeks ago

    Hello @freddyeee,

    I visited the site again and I still don’t see the CSS. Something adds the inline style: 

    vertical-align: inherit;

    However, the CSS I provided includes the !important attribute which should override the inline style. Nonetheless, I don’t see the CSS added. Did you clear the cache after updating the CSS.

    Thread Starter freddyeee

    (@freddyeee)

    9 months, 2 weeks ago

    sorry I forgot it, right now the code is there
    yes, I cleared cache but the error persist

    Gilbert Hernandez

    (@ghernkadence)

    9 months, 2 weeks ago

    Hello @freddyeee,

    I apologize, the CSS I provided is for the “Add to Cart” buttons on the single product pages. The buttons had the same look as the “Complete Purchase” Button. The CSS works for the “Add to Cart” buttons, but not the “Complete Purchase” (“Finalizar compra”).

    I viewed your button and it had a strange <br> tag in the link. When I removed it from your site, the button looked like the rest of the buttons on the page. This isn’t added by Kadence or WooCommerce. However, try adding the following CSS.

    a.checkout-button br {
    display: none;
}
    Thread Starter freddyeee

    (@freddyeee)

    9 months, 2 weeks ago

    thanks, that solved the issue, where is that tag coming from ?

    Gilbert Hernandez

    (@ghernkadence)

    9 months, 2 weeks ago

    Hello @freddyeee,

    If I had to guess, Id think it was whatever plugin you’re using to cause the animation. The button “pulses” for some reason, which is not standard.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Txt button issue’ is closed to new replies.