New to the community? Start here

Trying to use a different buy now button image on different products

How do I use a different buy now button image on different products

Mon, 8 Sep 2014 22:35:33
  • Vaughan
    • Ex Staff

    Hi @marty,

    Welcome to wpmudev, hope you’re well?

    You would need to target it with CSS using the product_id.

    For instance, on your products page (Using a tool such as Firebug extension for firefox)

    Highlight each button you want changed, then you should see the source & CSS for each.

    In the screenshot attached, you can see I highlighted the button for

    NEW Mighty Mini Facebook Group Poster C Edition

    In the source, you can see the product id class in the line

    <div class="product-914 product type-product hentry mp_product">

    So you can target that particular button by making that class the parent.

    .product-914 .mp_button_buynow {
    
background: URL('/path/to/image-914.png') !important;
    
}

    and your next product for example

    .product-920 .mp_button_buynow {
    
background: URL('/path/to/image-920.png') !important;
    
}

    If you are unfamiliar with firebug, you might find the following articles helpful.

    http://www.studiopress.com/tips/using-firebug.htm

    http://www.w3resource.com/web-development-tools/firebug-tutorials.php

    Hope this helps

  • marty
    • WPMU DEV Initiate

    Maybe I am missing something. I tried putting the code snippet in the child themes style.css and I end up with an outline of the original button, but that is it. I checked the image file path I used and it works fine. Here is the exact code I placed in style.css of the child theme.

    .product-914 .mp_button_buynow {

    background: URL(‘http://multiplexautomation.com/media/ordernow17.PNG&#8217:wink: !important;

    }

    So the code is affecting the button, but not in the desired way. If you have any insights, please let me know.

  • Vaughan
    • Ex Staff

    Hi,

    It’s due to the size of the image.

    you can try the following.

    .product-914 .mp_button_buynow {
    
background: URL('http://multiplexautomation.com/media/ordernow17.PNG') !important;
    
width: auto;
    
height: 80px;
    
background-size: 149px 80px !important;
    
text-shadow: none !important;
    
color: transparent !important;
    
padding: 8px 40px !important;
    
}

    But how big do you want the button?

    I’m looking at it on the following page.

    http://multiplexautomation.com/store/products

    so unless you adjust the widths of the columns too, then it’s not going to look to clear.

    You’ll need different CSS on the single product page.

    Something like:

    .postid-914 .mp_button_buynow {
    
background: URL('http://multiplexautomation.com/media/ordernow17.PNG') !important;
    
width: auto;
    
height: 80px;
    
background-size: 149px 80px !important;
    
text-shadow: none !important;
    
color: transparent !important;
    
padding: 8px 40px !important;
    
}

    then adjust it to suit.

    When you adjust background-size height, make sure you adjust height: 80px to match.

    Hope this helps