How to custom the "buy icon" in the product image

mariosacramento · September 2022

Hello and thank you very much for your help-

On the prebuilt site I installed, on the shop page, when I hover on a product, it shows 2 links, a "buy" and a "go to product" icon. I'd like to change these actual link icons to custom ones. I could not find that option on /Theme Options / Shop / Product List. How can I do that?

Thank you so much! :)

Phil · September 2022

Hi,

Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.

It is always a good idea to also attach a screenshot showing your issue.

Thanks

mariosacramento · September 2022

ok thanks:

URL is: http://modafitcary.es/

I'd like to know if I can change these icons:

Phil · September 2022

It could be done by writing a custom CSS code, but you can choose only from our icons:

https://muffingroup.com/betheme/elements/icons/

If you tell me which icons you want to use, I can help you write it.

Best regards

mariosacramento · September 2022

ok great, thanks.

For the "shopping" icon, any cart would do, for example this: fas fa-cart-plus

For the "link to product", this icon with the eye will work for us: far fa-eye

Thank you so much.

Phil · September 2022

Please, use the following CSS code:

.image_frame .image_wrapper .image_links a:not(:last-child) svg,
.image_frame .image_wrapper .image_links a:last-child svg{
 display: none!important;
}
.image_frame .image_wrapper .image_links a:not(:last-child):after{
 font-family: 'Font Awesome 5 Free';
 font-weight: 900;
 content: "\f217";
 font-size: 30px;
}
.image_frame .image_wrapper .image_links a:last-child:after{
 font-family: 'Font Awesome 5 Free';
 font-weight: 400;
 content: "\f06e";
 font-size: 30px;
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Thanks

mariosacramento · September 2022

Hi, I followed the instructions but it did not work (I copy/paste in the beginning of the CSS). Is there a specific place I should place the code? Thanks!

Phil · September 2022

It should be placed here:

If it is not working please send us WordPress dashboard access privately thru the contact form, which is on the right side at http://themeforest.net/user/muffingroup#contact and we will check what might be the reason.

Notice!

Please attach a link to this forum discussion.

Thanks

PS.

I encourage you to check our Facebook group, where you can talk about Betheme and confront your experience with others:

https://www.facebook.com/groups/betheme/

mariosacramento · September 2022

ok great, I just did. ;)

mariosacramento · September 2022

I just found what happened with the code: The icons did change, but not on the products, but on the posts boxes.

Phil · September 2022

I have modified a little the CSS on your website and purged the cache.

Please, check your website now.

Thanks

mariosacramento · October 2022

Thanks! All works fine now! :)

How to custom the "buy icon" in the product image

Comments