Shopping cart spins in a circle when I try to place an order

I would like you to help me look at the CSS code from my previous query post.
After I applied it, the shopping cart spins in a circle when I try to place an order.
I think it needs some improvement, or not?

Thanks
https://xtemos.com/forums/topic/change-the-text-inside-this-circle-to-a-shopping-cart-icon/

Attachments:

You must be logged in to view attached files.

Could you please customize the shopping cart to be a bit larger? People over 50 years old have given feedback that it’s too small. I have to adjust the entire website to be larger for the elderly.

Hi kruajeng,

Thanks for reaching to us.

1. I didn’t see cart icon spins as you mentioned, please let me know if you resolved it.

2. Please add the below Custom CSS code to Theme Settings > Custom CSS > Global CSS section:

button.button.single_add_to_cart_button:after {
    font-size: 25px;
}

button.button.single_add_to_cart_button:after{
    width: 25px;
    height: 25px;
    top: calc(50% - 15px);
}

Best Regards,

https://kruajeng.com/product/pizzaroni-stick/

I tried that, but it didn’t fix the issue. The shopping cart icon is still spinning, and it looks really weird. If you try to place an order, you’ll see what I mean. How can I resolve this?

Attachments:

You must be logged in to view attached files.

Hi kruajeng,

Please allow me to explain: The cart icon spins when the cart is loading after adding a product (https://monosnap.com/file/btHiHBDzWS4iw855rcMP8yjSjLYZfT). This happens because you created faulty custom code that merged the cart icon and the loader icon on the Add to Cart button (https://monosnap.com/file/H1z0oW2hnSYPMwXHzangWbOei36BaY) and you need to remove it.

If you want to re-apply the custom styling, please be clearly describe the desired appearance. We will assess whether it is possible to achieve – CSS solutions.

Regards,

Hello, Hung Pham
I’d like to do this, but could you make it stop rotating?

Since you were the one who guided me with this CSS,
I would appreciate it if you could help me troubleshoot it. Okay?

Attachments:

You must be logged in to view attached files.

Hi kruajeng,

The code I provided above help you to make icon bigger. In order to fix rotating icon issue, please follow my latest replies to check if it works.

Regards,

Hello, Hung Pham
How do I prevent the shopping cart on this page from constantly spinning?

Hi kruajeng,

Please provide me new admin link because it has been expired.

Regards,

Hello , Hung Pham
Log i n … here

Hi kruajeng,

Thanks for new link and appreciate your patience.

I checked your site, and spinning issue disappeared. Please confirm me back if you resolved it.

Regards,

Hello, Hung Pham

I haven’t done anything yet.
I’m waiting for you to make the edits, like you did on the Shopping cart Landing page

Hi kruajeng,

Please see my recorded video https://go.screenpal.com/watch/cTeF1Dni1Qc

The spinning icon is circle as default, not cart icon.

Regards,

Hello, Hung Pham

But I also want to make the shopping cart icon match the Landing page.
Could you please provide me with the CSS for that?

Thank you.

Attachments:

You must be logged in to view attached files.

Hi kruajeng,

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

Regards,

I think the image I sent clearly shows what I would like you to do. Please follow the image. https://kruajeng.com/

Attachments:

You must be logged in to view attached files.

Hi kruajeng,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global CSS section:

button.single_add_to_cart_button{
    font-size: 0;
}

button.single_add_to_cart_button:before{
    transform: translateY(0);
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 20px;
    transition: opacity .15sease, transform .25sease;
    content: "\f123";
    font-family: "woodmart-font";
}

button.single_add_to_cart_button.loading:before{
    opacity: 0;
}

Regards,

Great, thank you.
Close Topic

Hi kruajeng,

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

Regards,

[Author]

Posts