CODEWITHSUNDEEP
htmlcsswordpresswoocommerce
Sidney Sousa
Sidney Sousa

Reputation: 3604

Woocommerce add image after add to cart button

It seems weird, but am trying to add a background image after an element(button) but for some reason, the image does not show.

    .single_add_to_cart_button:after {
        content: '';
        width: 50px;
        height: 9px;
        display: inline-block;
        background: url(/images/arrow.png);
        background-position: 50%;
        background-size: cover;
        background-repeat: no-repeat;
    }
<button type="submit" class="single_add_to_cart_button button alt disabled wc-variation-selection-needed">Place order</button>

For some reason, the image does not show and I even tried using a live URL

Note: If I try using a paragraph it works as you can see in my pen here

How can I add an image from the template directory after my add to cart button?

In a simpler solution, I tried using a hook but I am also struggling to access the image using bloginfo:

add_action( 'woocommerce_after_add_to_cart_button', 'add_content_after_addtocart_button_func' );

function add_content_after_addtocart_button_func() {
    echo '<img src="<?php bloginfo("template_directory")/images/logo/logo.png">';   
}

Upvotes: 0

Views: 3348

Answers (2)

Momin IqbalAhmed
Momin IqbalAhmed

Reputation: 970

There is a syntax error as you are using <?php in a echo statement as well as bloginfo($option) echos out a value so request you to use get_template_directory_uri() to get the path to the template directory which will returns a string

your code will look like below snippet:

add_action( 'woocommerce_after_add_to_cart_button', 'add_content_after_addtocart_button_func' );

function add_content_after_addtocart_button_func() {
    echo '<img src="'.get_template_directory_uri().'/images/logo/logo.png">';   
}

Upvotes: 2

Dejan.S
Dejan.S

Reputation: 19158

Works just fine here (I added some additional styling)

.single_add_to_cart_button {
  background-color: #ededed;
  border: none;
  padding: 2rem;
  display: flex;
  align-items: center;
  font-size: 1rem;
  border-radius: 3px;
}

.single_add_to_cart_button:after {
  content: '';
  width: 4rem;
  height: 2rem;
  margin-left: 1rem;
  display: inline-block;
  background: url(http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
<button type="submit" class="single_add_to_cart_button button alt disabled wc-variation-selection-needed">Place order</button>

Upvotes: 0

Related Questions