Adding Font Awesome Icons under Add to cart button with text

Try this snippet:

add_action( 'woocommerce_after_add_to_cart_button', 'add_content_after_addtocart' );
function add_content_after_addtocart() {
  echo '<div class="second_content">';
  echo '<i class="fas fa-dolly-flatbed"></i>';
  echo '<span>Free Shipping!</span></div>';
}

If you don’t like dolly-flatbed, pick one from here:
https://fontawesome.com/icons?d=gallery&m=free

and this custom css:

.second_content {
  margin: 16px 0;
}
.second_content i {
  vertical-align: middle;
  font-size: 36px;
  color: #0a0;
}
.second_content span {
  margin-left: 8px;
  vertical-align: middle;
}

Hi Lorro,

Not fused which font style we use happy to use whatever we need to achieve what the client wants.

Thanks for sending that through I’ll give it a go and update you

Hi Lorro that worked well thank you.

If I wanted to add a different icon underneath do i do this again but different text and icon?

echo ‘<div class=”second_content”>’;
echo ‘<i class=”fas fa-dolly-flatbed”></i>’;
echo ‘<span>100 days return!</span></div>’;

Yes.

Okay great thanks for that.

I have another question which I can’t find in the forum.

I want to add details under product at checkout in the summary is that possible? I tried a custom field plugin but that hasn’t worked.

I want to add:

What’s included?

Pillow
Pillow Cover (Cotton)
Care Card

Is there a way to add this via function.php or css?

• This reply was modified 5 years, 2 months ago by Renz_r.

add_action( 'woocommerce_review_order_before_payment', 'whats_included' );
function whats_included() {
  print 'What\'s included?';
  print '<ul>';
  print '<li>Pillow</li>';
  print '<li>Pillow Cover (Cotton)</li>';
  print '<li>Care Card</li>';
  print '</ul>';
}

If this works I will virtual hug you @lorro

@lorro nailed it mate works perfectly thank you so much

Sorry two more questions:

I went to add the code again but it gave me a php error

so

add_action( ‘woocommerce_after_add_to_cart_button’, ‘add_content_after_addtocart’ );
function add_content_after_addtocart() {
echo ‘<div class=”second_content”>’;
echo ‘<i class=”fas fa-dolly-flatbed”></i>’;
echo ‘<span>Free Shipping!</span></div>’;
echo ‘<div class=”second_content”>’;
echo ‘<i class=”fas fa-dolly-flatbed”></i>’;
echo ‘<span>Free Shipping!</span></div>’;
}
Is that correct for the second icon?

ALso how do i change the colour?

What PHP error? It looks like you’ve got it working.

You can use this service to validate your PHP:
https://phpcodechecker.com/

You’ve got the same icon and text duplicated.

.second_content i {
  vertical-align: middle;
  font-size: 36px;
  color: #0a0;
}

Do I add the colour code to the php theme file?

add_action( 'woocommerce_after_add_to_cart_button', 'add_content_after_addtocart' );
function add_content_after_addtocart() {
  echo '<div class="second_content">';
  echo '<i class="fas fa-plane" color: blue></i>';
  echo '<span>Free Shipping!</span></div>';
.second_content i {
  vertical-align: middle;
  font-size: 36px;
  color: #0a0;
}

Nope. You’ve got php and css there and they don’t mix.

The php goes in functions php for your child theme or you can try a snippets plugin.

add_action( 'woocommerce_after_add_to_cart_button', 'add_content_after_addtocart' );
function add_content_after_addtocart() {
  echo '<div class="second_content">';
  echo '<i class="fas fa-plane" color: blue></i>';
  echo '<span>Free Shipping!</span></div>';
}

but the css goes in:
Dashboard > Appearance > Customize > Additional CSS

.second_content i {
  vertical-align: middle;
  font-size: 36px;
  color: #0a0;
}

We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.