77839

Add font awesome icon to custom add to cart button in Woocommerce 3

Question:

I changed the style of my Add To Cart with the help of LoicTheAztec,

but how to add a font awesome icon in front of button text using the followin code

// For Woocommerce version 3 and above only add_filter( 'woocommerce_loop_add_to_cart_link', 'filter_loop_add_to_cart_link', 20, 3 ); function filter_loop_add_to_cart_link( $button, $product, $args = array() ) { if( $product->is_in_stock() ) return $button; // HERE set your button text (when product is not on stock) $button_text = __('Not available', 'woocommerce'); // HERE set your button STYLING (when product is not on stock) $color = "#777"; // Button text color $background = "#aaa"; // Button background color // Changing and disbling the button when products are not in stock $style = 'color:'.$color.';background-color:'.$background.';cursor:not-allowed;'; return sprintf( '<a class="button disabled" style="%s">%s</a>', $style, $button_text ); }

Answer1:

<blockquote>

First, if font awesome icons are not enabled in Wordpress for your theme, you might need to add <a href="https://wordpress.org/plugins/better-font-awesome/" rel="nofollow">Better Font Awesome</a> plugin.

</blockquote>

You can select any Icon code in this <a href="https://fontawesome.com/icons?d=gallery" rel="nofollow">fontawesome.com gallery of icons</a>

Now making a very small change to your code you will be able to add your desired Icon and size:

add_filter( 'woocommerce_loop_add_to_cart_link', 'filter_loop_add_to_cart_link', 20, 3 ); function filter_loop_add_to_cart_link( $button, $product, $args = array() ) { if( $product->is_in_stock() ) return $button; // HERE set your button text (when product is not on stock) $button_text = __('Not available', 'woocommerce'); // HERE set your button STYLING (when product is not on stock) $color = "#555"; // Button text color $background = "#aaa"; // Button background color // HERE set your fontawesome icon code and size $icon = 'fa-ban'; $size = 'fa-lg'; // large - To disable size use an empty value like $size = ''; // Changing and disbling the button when products are not in stock $style = 'color:'.$color.';background-color:'.$background.';cursor:not-allowed;'; return sprintf( '<a class="button disabled" style="%s"><i class="fa %s %s"></i> %s</a>', $style, $icon, $size, $button_text ); }

<em>Code goes in function.php file of your active child theme (or active theme).</em> Tested and works.

You will get something like:

<a href="https://i.stack.imgur.com/Uv7hI.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/Uv7hI.png" data-original="https://i.stack.imgur.com/Uv7hI.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

<blockquote>

Font awesome possible sizes values:

<ul><li>smallest: <strong>fa-xs</strong></li> <li>smaller: <strong>fa-sm</strong></li> <li>larger: <strong>fa-lg</strong></li> <li>largest <em>(multiplicator)</em>: <strong>fa-2x</strong>, <strong>fa-3x</strong> … to <strong>fa-10x</strong></li> </ul></blockquote>

Answer2:

<strong>SOLVED</strong>

<strong>Add font awesome icon to custom add to cart button in Woocommerce 3 Copy Below Code and paste it to your theme functions.php</strong>

/*STEP 1 - REMOVE ADD TO CART BUTTON ON PRODUCT ARCHIVE (SHOP) */ function remove_loop_button(){ remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 ); } add_action('init','remove_loop_button'); /*STEP 2 -ADD NEW BUTTON THAT LINKS TO PRODUCT PAGE FOR EACH PRODUCT */ add_action('woocommerce_after_shop_loop_item','replace_add_to_cart'); function replace_add_to_cart() { global $product; $link = $product->get_permalink(); echo do_shortcode('<a href="'.$link.'" class="button addtocartbutton"><i class="fa fa-shopping-bag"></i></a>'); }

Recommend

  • need to refresh the page after removing cookie
  • Importing utf-8 encoded csv in meteor using Papa Parse
  • iOS Silent Push Notification not delivered after device reboot
  • Why do I constantly get ActivityNotFound exceptions?
  • grails: how to change compiled GSPs (gsp*.class files)?
  • Cannot use mutating member … because append?
  • File not found - http://localhost/path-file-script-or-image
  • List recreated album names that were previously deleted
  • Ruby array manipulation inside method
  • Shouldn't the error event of xmlhttprequest have an error message?
  • Is there a performance difference in using a GROUP BY with MAX() as the aggregate vs ROW_NUMBER over
  • LINQ throwing invalid cast exception on a bigint
  • Normalize a table with tightly coupled data
  • multiple file download using SkyDrive API
  • Vue router and webpack - history mode config localhost
  • Google Cloud CDN started ignoring query strings for storage buckets
  • Understanding when to use python list in Pytorch
  • “Read-Only” Entity Framework? I'm trying to use RIA Services, EF, and Silverlight
  • expand ipv6 address in shell script
  • Condition on a timestamp column to select data for a year
  • Viewport for ipad portrait [only]
  • how to animate two continuous popup windows with jquery mobile?
  • how can I access to a hashed key stored by spring redis session using RedisTemplate?
  • How can I send data in text field using Selenium?
  • How to write a method signature “T that implements Comparable” in Java?
  • Replacing ui router 0.2 with 1.0.0
  • Integrating Yelp API v2 into iOS 7 app
  • Getting an error serving images from App_Themes when using precompilation?
  • How to hide 'Add To Cart' for variable products, but keep product variations visible
  • typescript multidimensional array with different types
  • Limit # of records returned based on a form control
  • React / Webpack - “Module parse failed: Unexpected token - You may need an appropriate loader to han
  • How to display youtube video on HTML page? [closed]
  • Node.js custom error handling
  • How to use FirstOrDefault inside Include
  • PHP Permalinks.. how to change?
  • Running R's aov() mixed effects model from Python using rpy2
  • ReferenceError: TextEncoder is not defined