Change Icon on Add to Cart Button on shop list and archives

Hi,
could you please help me?
I would like to change the actual “shopping cart” hover icon on the “Add to Cart”-Button to another icon.

how is this possible for the shop page and also for the category archives?

Thanks for your help
greetings

Hello,

Choose and advise which icons you want to replace from this source https://fontawesome.com/v4.7.0/icons/

Provide page URL and screens which ones.

Best Regards

Thanks for your fast reply.

As my page is in development mode I cannot provide a valid page link yet.

But it’s about the shop page and categorie archives.
there products are shown as grid with summary on hover style.
Now on the “addtocart” button there is a hover effect where a cart icon is shown.
I think its following class : button product_type_external add-to-cart-loop

I would like to replace the hover effect icon with any fontawesome icon.

Specially here I would like to take following icon : fa-plus-square

Best option would be if i could change this icon by myself, if i want to change it afterwards again.

i attach a screenshot of the “addtocart” button on products grid view, but as it’s on the hover effect i cannot add a screenshot of the icon itself.

thanks for your help.
greetings

Attachments:

You must be logged in to view attached files.

Hello,

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

body .product-list-item .woodmart-add-btn>a:before, 
body .woodmart-hover-base:not(.product-in-carousel):not(.hover-width-small):not(.add-small-button) .woodmart-add-btn>a:before,
body .woodmart-hover-button .hover-mask>a:before, 
body .woodmart-hover-info-alt .product-actions>a:before, 
body .woodmart-hover-quick .woodmart-add-btn>a:before,
body .woodmart-hover-standard .btn-add>a:before, 
body .woodmart-price-table .woodmart-plan-footer.add-to-cart-loop:before{
    content: "\f196 ";
	 font-family: fontawesome;
}

Best Regards

Thank you.
But this code is doing something else.
Now the Colored Button with “Buy Now” is not there anymore. Now I only see a Cart-Icon on white background instead.
What I wanted is to have the “BuyNow” Colored Button, and on mouse hover there is shown the cart-icon.
I want to replace this icon with ” fa-plus-square” but still want to have to colored button with tagging “Buy now”. So I only want to change the icon on mouse hover.
Do you get me now?

Thanks for your help
greetings

To be more clear I want to replace the shopping-cart-icon on mouse hover with “fa-plus-square” from fontawesome.

I use “Show summary on hover” template for shop page from your theme and as you can see in settings page on the preview image of this template it’s about the green “select options” button . there on hover the icon needs to be changed.

Oh sorry missed something.

In 3×3 Grid view its already working with the wished icon but in 4×4 grid view its still the shopping-cart-icon. can you help me there?

Hello,

As soon as your site is on the live host, contact us with your site admin access and we shell provide your new CSS.

Best Regards

Okay thank you. You can access our environment. See Private Content.

Hello,

You requested to provide the code to change the icon to any, plus in the square, for example, so that you could further insert your own icon. So I have provided the code. You can insert any icon from fontawesome icons https://gyazo.com/e5cf03962ac23d25b0d18449955d5e60

Please clarify what icon do you want.

Best Regards

I attach a video of the 4×4 grid view where still the shoppingcart icon is shown.

Hello,

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

body .woodmart-buttons .woodmart-add-btn > a:before {
    content: "\f196 ";
	 font-family: fontawesome;
}

Best Regards

Thank you so much for your patience and your help! everything working fine now!!

Except one more thing:
Before I added your latest code I had the blue “buynow” button still viewable on 3×3 grid view and on 2×2 grid view.
as i now added your latest code all grid views have only the style from 4×4.
now there is no blue button anymore.
could you advise me how to have the blue button viewable on 2×2 and 3×3?
and only on 4×4 i wanted to replace the icon on white background.
greetings

Hello,

CSS code does not influence the button form. Moreover, the CSS provided touche only icon content. Remove the CSS for testing and you will have the same result.

Set 3 columns in the row. Now you have 4 https://gyazo.com/34f2259000992d173bc36299d7056a92

Best Regards

[Author]

Posts