如何让PNG在WP电子商务中显示为按钮

Question

I'm currently building a website as a whole sale website. I'm having trouble getting a PNG to work as a button. WP Ecommerce comes with an automatic "add to cart" button on all of their pages. I'm having the hardest time figuring this out. I did this to my directory so far.

1. changed a custom "add to cart" PNG to the images directory.

2. Went to the default.css page and changed:

   input.wpsc_buy_button{}

to:

 input.wpsc_buy_button{
 background-image: url(images/addtocart.png);
 }

I don't know exactly what Im doing wrong. Maybe I didn't echo it on the product page? I feel like it should have because I kept the names the same.

Either way, any form of help would be awesome. Thanks!

Answer 1

A few things to note:

1. The class, wpsc_buy_button, is on a button, not an input.
2. The CSS that is putting the button in there now uses an !important tag so you must also use this and be more specific with your selector to override that style.
3. images/addtocart.png is not going to be a valid path to images in your media library. I'm not certain where it lives but the path is more likely to be something like this: http://inkvia.com/wp-content/uploads/2015/01/addtocart.png

Example CSS

button.wpsc_buy_button {
  background: url(/wp-content/themes/mazine/images/addtocart.png) no-repeat !important;
  height: 43px;
  width: 180px;
}

button.wpsc_buy_button span, button.wpsc_buy_button span span {
  background: none!important;
  text-indent: -99999px;
}