WooCommerce - excelling eCommerce
Change "Add To Cart" to a Graphic Button (3 posts)

  1. avniy
    Posted 2 years ago #


    I want to change the button of "Add To Cart" to this button:

    Which is much more inviting as I see it.

    How can I do that?

    I tried one trick with background-image fuck it messed my IE display.



  2. Roy Ho
    Posted 2 years ago #

    This is not really a question for this forum but more of a general "how to" on CSS/HTML.

    Changing HTML elements from text to graphic is all done the same way. So for your particular case, you would want something like the following:

    .woo_buy_button_container button.button {display:block;text-indent:-9999px;background:url(images/yourgraphic.png) no-repeat scroll 0 0 transparent;width:30px;height:70px;outline:none;border:none;}

    Of course this is just an example and you have to alter it to your site for it to work.

  3. katootje
    Posted 2 years ago #

    I added this line in the add-to-cart.php

    just belowd endswitch;

    echo sprintf('<img src="url to your image" width="20px"/>', $link, $product->id, $product->product_type, $label);

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • WooCommerce - excelling eCommerce
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic