0

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!

alex
  • 479,566
  • 201
  • 878
  • 984
Peter Wang
  • 13
  • 5
  • What have you done to troubleshoot this so far? Do you see the input appear on the page when loaded? Have you looked at your html in your browser's inspector to make sure the input is there? Have you inspected the element's css in your browser to see if the rule you wrote is being recognized? – scmccarthy22 Jan 27 '15 at 01:10
  • prob set a height and width for the element – David Jan 27 '15 at 01:11
  • I haven't actually. Can you guys give it a try? heres a link to a page. http://inkvia.com/?wpsc-product=emoji-capsule-retractable-pen – Peter Wang Jan 27 '15 at 01:16
  • Actually I think I do. In the elements it says: `
    `
     – Peter Wang Jan 27 '15 at 01:29

1 Answers1

0

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;
}
ReLeaf
  • 1,368
  • 1
  • 10
  • 17
  • Thanks! That makes sense actually. would I add that into my default.css or to my style.css? The way it would be is: `.button.wpsc_buy_button{ background:url(http://inkvia.com/wp-content/themes/mazine/images/addtocart.png)!important; }` – Peter Wang Jan 27 '15 at 02:46
  • It shouldn't matter where you put it as long as your selectors are specific enough. It looks like you'll also have to override styles for 'button span span' and 'button:hover span, button:hover span span' to get your new button working. If the answer above has helped you (I hope it has), please remember to mark it as correct so I can get credit for it. Thanks and good luck! https://s3.amazonaws.com/f.cl.ly/items/1N2o081J0T2J2p3w1T2b/Screen%20Shot%202015-01-27%20at%207.06.25%20AM.png – ReLeaf Jan 27 '15 at 12:06
  • Yeah, it definately helped. (If you can't tell I'm not too familiar with PHP and how themes work for Wordpress so far.) Do you know what I would have to do to override the styles? Thanks by the way, I appreciate your help! – Peter Wang Jan 27 '15 at 20:14
  • Add the CSS I added to my answer above to your styles.css and you should be good to go – ReLeaf Jan 27 '15 at 20:24