Replace “Add to Cart” Button with “Learn More” and change icon on hover
-
Hi!
I’m switching https://new.powerlab.com.pl online store to catalog mode, but unfortunately, the option provided in the theme doesn’t work for me, because I still need the buttons in the product archive. I’d like to replace the “Dodaj do koszyka” (Add to cart) link in the product archive with “Dowiedz się więcej” (Learn more), but I don’t want to remove the prices from the products. I’d also like the cart icon to change to an eye icon on hover.
Please send me the code for these changes. I’d really appreciate it.
Hello,
To change add to cart button text, You need to use the Loco Translate plugin, more details on how to use it are here – https://xtemos.com/docs-topic/translate-woodmart-theme-with-loco-translate/
To change the icon, Try to add the following custom CSS Code in Theme Settings > Custom CSS:
.wd-add-btn-replace .add-to-cart-loop:before {
content: "\f118" !important;
}
Then, navigate to Theme Settings > Typography > Icons font and change the icon code.
Best Regards,
Hello Aizaz,
Thank you for your reply. Unfortunately, the Loco Translate method doesn’t solve my issue, because I don’t only need to change the button text — I also need to change its behavior. Currently, the “Add to cart” button in the product archive adds the item directly to the cart. Instead, I want this button to link to the single product page.
Could you please advise the best way to achieve this.
Best regards, Irina
Hello,
Unfortunately, there is no such option by default in WoodMart and WooCommerce. You need to find a third-party plugin to achieve more functionality that best suits you.
https://wordpress.org/plugins/woocommerce-add-to-cart-custom-redirect/
Best Regards,
.
