Change Add To Cart Button

Hi,

When you pass above any product the button text ‘Add to cart’ appears, and if you still there the Chart icon appears.
Is it possible to remove the chart icon or change it?

Thank you!

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshots you attached. To hide the cart icon on the add to cart button you need to add the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.woodmart-hover-base:not([class*="add-small"]) .wd-bottom-actions .add-to-cart-loop::before{
display: none;
}

Best Regards.

thanks!
I pasted that into de global CSS and anything occurs, what can I do?
Cart icon still there

Thank you!

What’s more, in the movil view I only see the cart icon without the text.
Is it possible to remove the cart icon from the desktop view, and to change the cart icon, into my Menu cart icon for the mobile view?

Thank you

Hello,

1) I have replaced the previous code with this one and the add to cart icon is hidden now.

.wd-add-btn-replace .add-to-cart-loop::before {
display: none;
}

Please clear browser cache and check back.

2) If you want to hide it only for desktop then you need to paste the code in the Custom CSS for Desktop area under theme settings >> Custom CSS.

Best Regards.

Thanks!

Now, I don’t see the Icon but I see dark space if I put the cursor on. Is it possible to eliminate this space and only with ‘add to cart’ static?
If I what to change the ICON for the mobile, where do I change it?

Sorry for all these questions, I researched a lot but there is no info that solves my problems!

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshot you attached.

To remove the on space from desktop only you need to add the following Custom CSS code in the
Custom CSS for Desktop area Under Theme Settings Custom CSS.

.product-list-item .woodmart-add-btn>a:focus span:not(.woodmart-tooltip-label), .product-list-item .woodmart-add-btn>a:hover span:not(.woodmart-tooltip-label), .woodmart-hover-base:not(.product-in-carousel):not(.hover-width-small):not(.add-small-button) .woodmart-add-btn>a:focus span:not(.woodmart-tooltip-label), .woodmart-hover-base:not(.product-in-carousel):not(.hover-width-small):not(.add-small-button) .woodmart-add-btn>a:hover span:not(.woodmart-tooltip-label), .woodmart-hover-button .hover-mask>a:focus span:not(.woodmart-tooltip-label), .woodmart-hover-button .hover-mask>a:hover span:not(.woodmart-tooltip-label), .woodmart-hover-info-alt .product-actions>a:focus span:not(.woodmart-tooltip-label), .woodmart-hover-info-alt .product-actions>a:hover span:not(.woodmart-tooltip-label), .woodmart-hover-quick .woodmart-add-btn>a:focus span:not(.woodmart-tooltip-label), .woodmart-hover-quick .woodmart-add-btn>a:hover span:not(.woodmart-tooltip-label), .woodmart-hover-standard .btn-add>a:focus span:not(.woodmart-tooltip-label), .woodmart-hover-standard .btn-add>a:hover span:not(.woodmart-tooltip-label), .woodmart-price-table .woodmart-plan-footer .add-to-cart-loop:focus span:not(.woodmart-tooltip-label), .woodmart-price-table .woodmart-plan-footer .add-to-cart-loop:hover span:not(.woodmart-tooltip-label) {
transform: none!important;
}
.product-list-item .woodmart-add-btn>a:before, .woodmart-hover-base:not(.product-in-carousel):not(.hover-width-small):not(.add-small-button) .woodmart-add-btn>a:before, .woodmart-hover-button .hover-mask>a:before, .woodmart-hover-info-alt .product-actions>a:before, .woodmart-hover-quick .woodmart-add-btn>a:before, .woodmart-hover-standard .btn-add>a:before, .woodmart-price-table .woodmart-plan-footer .add-to-cart-loop:before {
content: none!important;
}

Best Regards.

THANKS!!

I pasted into de desktop CSS but now on the mobile view it looks like that (the cart icon has disappeared there).
I would love to change the chart icon on the mobile view into the same chart icon of my header menu, what can we do?

Thanks a lot!

Attachments:

You must be logged in to view attached files.

Hello,

I have fixed the issue on your website and I have changed the icon for mobile the same as the icon used in the header and it’s working absolutely fine on my end.

Screenshot for Clarification: https://ibb.co/0jyLSPR

I have added the following Custom CSS code in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.wd-add-btn-replace .add-to-cart-loop::before {
content: "\f120";
font-family: woodmart-font;
}

Please clear cache and check back.

Best Regards.

THANK YOU!

Most Welcome!!!.

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts