[Skip to main content](#vessel-content) # Change Add To Cart Button to Image? ## - **[flashx](/forum/user/8818-flashx "View flashx's Profile")** - [![flashx's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar_2013-06-21.jpg)](/forum/user/8818-flashx "View flashx's Profile") Topic Author - [ Offline](/forum/user/8818-flashx) Less More - Posts: 20 - Thank you received: 4 - - 13 years 4 months ago [\#109243](#109243) by [flashx](/forum/user/8818-flashx "View flashx's Profile") *[Change Add To Cart Button to Image?](/forum/4-how-to/83718-change-add-to-cart-button-to-image#109243 "Hi guys, how can I change the default 'Add to Cart' grey button to an image button? thanks")* was created by *[flashx](/forum/user/8818-flashx "View flashx's Profile")* Hi guys, how can I change the default 'Add to Cart' grey button to an image button? thanks The following user(s) said Thank You: [brayden10](/forum/user/14328-brayden10 "View brayden10's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzgzNzE4LWNoYW5nZS1hZGQtdG8tY2FydC1idXR0b24tdG8taW1hZ2U/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile")** - [![Mohamed Thelji's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar6861.png)](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile") - [ Offline](/forum/user/6861-mohamed-thelji) Less More - Posts: 12953 - Thank you received: 1778 - - - 13 years 4 months ago - 13 years 4 months ago [\#109258](#109258) by [Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile") Replied by *[Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile")* on topic *[Change Add To Cart Button to Image?](/forum/4-how-to/83718-change-add-to-cart-button-to-image#109258 "Hi guys, how can I change the default 'Add to Cart' grey button to an image button? thanks")* Hi, You'll just have to edit your [ CSS ](http://www.hikashop.com/fr/support/84-css-styling.html)code and replace these lines : Code: a.hikashop_cart_button, a.hikashop_cart_button:hover, a.hikashop_compare_button, a.hikashop_compare_button:hover{ background-image:url(../images/button.jpg); by : Code: a.hikashop_cart_button, a.hikashop_cart_button:hover, a.hikashop_compare_button, a.hikashop_compare_button:hover{ background-image:url(LINK TO YOUR NEW ADD TO CART BUTTON IMAGE); Last edit: 13 years 4 months ago by [Mohamed Thelji](/forum/user/6861-mohamed-thelji "View Mohamed Thelji's Profile"). The following user(s) said Thank You: [brayden10](/forum/user/14328-brayden10 "View brayden10's Profile"), [markV](/forum/user/22055-markv "View markV's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzgzNzE4LWNoYW5nZS1hZGQtdG8tY2FydC1idXR0b24tdG8taW1hZ2U/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[flashx](/forum/user/8818-flashx "View flashx's Profile")** - [![flashx's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar_2013-06-21.jpg)](/forum/user/8818-flashx "View flashx's Profile") Topic Author - [ Offline](/forum/user/8818-flashx) Less More - Posts: 20 - Thank you received: 4 - - 13 years 4 months ago [\#109341](#109341) by [flashx](/forum/user/8818-flashx "View flashx's Profile") Replied by *[flashx](/forum/user/8818-flashx "View flashx's Profile")* on topic *[Change Add To Cart Button to Image?](/forum/4-how-to/83718-change-add-to-cart-button-to-image#109341 "Hi guys, how can I change the default 'Add to Cart' grey button to an image button? thanks")* Thanks Mohamed. I tried this by going to hikashop > display > CSS > front-end CSS file and edited it to: Code: a.hikashop_cart_button, a.hikashop_cart_button:hover, a.hikashop_compare_button, a.hikashop_compare_button:hover{ background-image:url(/templates/my-template/images/add-to-cart.jpg); however I still cant get it to show. ive tried different variations of the url above and cleared the cache though the original grey button always shows. any ideas? The following user(s) said Thank You: [brayden10](/forum/user/14328-brayden10 "View brayden10's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzgzNzE4LWNoYW5nZS1hZGQtdG8tY2FydC1idXR0b24tdG8taW1hZ2U/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86320 - Thank you received: 14279 - - 13 years 4 months ago [\#109400](#109400) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Change Add To Cart Button to Image?](/forum/4-how-to/83718-change-add-to-cart-button-to-image#109400 "Hi guys, how can I change the default 'Add to Cart' grey button to an image button? thanks")* We would need a link to that page to tell you exactly what CSS to use. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzgzNzE4LWNoYW5nZS1hZGQtdG8tY2FydC1idXR0b24tdG8taW1hZ2U/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[flashx](/forum/user/8818-flashx "View flashx's Profile")** - [![flashx's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar_2013-06-21.jpg)](/forum/user/8818-flashx "View flashx's Profile") Topic Author - [ Offline](/forum/user/8818-flashx) Less More - Posts: 20 - Thank you received: 4 - - 13 years 4 months ago [\#110160](#110160) by [flashx](/forum/user/8818-flashx "View flashx's Profile") Replied by *[flashx](/forum/user/8818-flashx "View flashx's Profile")* on topic *[Change Add To Cart Button to Image?](/forum/4-how-to/83718-change-add-to-cart-button-to-image#110160 "Hi guys, how can I change the default 'Add to Cart' grey button to an image button? thanks")* thanks Nicolas, sorry its taken me a while to get back to you. my website is currently on a local server, however i have included a firebug snapshot below: Code: <div class="hikashop_container"> <div class="hikashop_subcontainer thumbnail"> <div id="img-thumb"> <div id="product-info"> <span class="hikashop_product_name"> <span class="hikashop_product_price_full"> <span class="hikashop_product_code_list"> <form enctype="multipart/form-data" name="hikashop_product_form_6_hikashop_category_information_module_102" method="post" action="/Joomla_3.1.1-Stable-Full_Package/index.php/component/hikashop/product/updatecart"> <div class="hikashop_product_stock"> <input class="btn button hikashop_cart_input_button" type="submit" onclick="var field=document.getElementById('hikashop_product_quantity_field_4');if(hikashopCheckChangeForm('item','hikashop_product_form_6_hikashop_category_information_module_102')){ return hikashopModifyQuantity('6',field,1,'hikashop_product_form_6_hikashop_category_information_module_102','cart',102); } return false;" value="Add to cart" name="add"> <input id="hikashop_product_quantity_field_4" class="hikashop_product_quantity_field" type="hidden" name="quantity" value="1"> </div> <input id="hikashop_cart_type_6_102" type="hidden" value="cart" name="hikashop_cart_type_6_102"> <input type="hidden" value="6" name="product_id"> <input type="hidden" value="102" name="module_id"> <input type="hidden" value="1" name="add"> <input type="hidden" value="product" name="ctrl"> <input type="hidden" value="updatecart" name="task"> <input type="hidden" value="aHR0cDovL2xvY2FsaG9zdDo4ODg4L0pvb21sYV8zLjEuMS1TdGFibGUtRnVsbF9QYWNrYWdlLw%3D%3D" name="return_url"> </form> </div> </div> </div> </div> the bit i want changed to an image is the .btn button hikashop_cart_input_button i believe, not sure though ![:/](/irritated.gif ":/") any help would be ace ![:)](/media/kunena/emoticons/3.png ":)") thanks Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzgzNzE4LWNoYW5nZS1hZGQtdG8tY2FydC1idXR0b24tdG8taW1hZ2U/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Eliot](/forum/user/1824-eliot "View Eliot's Profile")** - [![Eliot's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar1824.png)](/forum/user/1824-eliot "View Eliot's Profile") - [ Offline](/forum/user/1824-eliot) Less More - Posts: 2334 - Thank you received: 403 - - 13 years 4 months ago [\#110181](#110181) by [Eliot](/forum/user/1824-eliot "View Eliot's Profile") Replied by *[Eliot](/forum/user/1824-eliot "View Eliot's Profile")* on topic *[Change Add To Cart Button to Image?](/forum/4-how-to/83718-change-add-to-cart-button-to-image#110181 "Hi guys, how can I change the default 'Add to Cart' grey button to an image button? thanks")* Hello there, According to your code, I think you just have to add something like this: Code: a.hikashop_cart_input_button{ background-image:url(/templates/my-template/images/add-to-cart.jpg); } Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzgzNzE4LWNoYW5nZS1hZGQtdG8tY2FydC1idXR0b24tdG8taW1hZ2U/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[flashx](/forum/user/8818-flashx "View flashx's Profile")** - [![flashx's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar_2013-06-21.jpg)](/forum/user/8818-flashx "View flashx's Profile") Topic Author - [ Offline](/forum/user/8818-flashx) Less More - Posts: 20 - Thank you received: 4 - - 13 years 4 months ago [\#110184](#110184) by [flashx](/forum/user/8818-flashx "View flashx's Profile") Replied by *[flashx](/forum/user/8818-flashx "View flashx's Profile")* on topic *[Change Add To Cart Button to Image?](/forum/4-how-to/83718-change-add-to-cart-button-to-image#110184 "Hi guys, how can I change the default 'Add to Cart' grey button to an image button? thanks")* Thanks Eliot, Unfortunately, this doesn't work ![:(](/media/kunena/emoticons/22.png ":(") any other ideas? Thanks Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzgzNzE4LWNoYW5nZS1hZGQtdG8tY2FydC1idXR0b24tdG8taW1hZ2U/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Eliot](/forum/user/1824-eliot "View Eliot's Profile")** - [![Eliot's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar1824.png)](/forum/user/1824-eliot "View Eliot's Profile") - [ Offline](/forum/user/1824-eliot) Less More - Posts: 2334 - Thank you received: 403 - - 13 years 4 months ago [\#110211](#110211) by [Eliot](/forum/user/1824-eliot "View Eliot's Profile") Replied by *[Eliot](/forum/user/1824-eliot "View Eliot's Profile")* on topic *[Change Add To Cart Button to Image?](/forum/4-how-to/83718-change-add-to-cart-button-to-image#110211 "Hi guys, how can I change the default 'Add to Cart' grey button to an image button? thanks")* I can't really help you without an access to your site... Check the code with firebug and try to see if the property is present but overrided. If so you can try to write it like this: background-image:url(/templates/my-template/images/add-to-cart.jpg) !important; Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzgzNzE4LWNoYW5nZS1hZGQtdG8tY2FydC1idXR0b24tdG8taW1hZ2U/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[flashx](/forum/user/8818-flashx "View flashx's Profile")** - [![flashx's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar_2013-06-21.jpg)](/forum/user/8818-flashx "View flashx's Profile") Topic Author - [ Offline](/forum/user/8818-flashx) Less More - Posts: 20 - Thank you received: 4 - - 13 years 4 months ago [\#110213](#110213) by [flashx](/forum/user/8818-flashx "View flashx's Profile") Replied by *[flashx](/forum/user/8818-flashx "View flashx's Profile")* on topic *[Change Add To Cart Button to Image?](/forum/4-how-to/83718-change-add-to-cart-button-to-image#110213 "Hi guys, how can I change the default 'Add to Cart' grey button to an image button? thanks")* thanks for your help bro. I will give that a shot and see how I go, might have to keep bashin away at it. cheers Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzgzNzE4LWNoYW5nZS1hZGQtdG8tY2FydC1idXR0b24tdG8taW1hZ2U/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[flashx](/forum/user/8818-flashx "View flashx's Profile")** - [![flashx's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar_2013-06-21.jpg)](/forum/user/8818-flashx "View flashx's Profile") Topic Author - [ Offline](/forum/user/8818-flashx) Less More - Posts: 20 - Thank you received: 4 - - 13 years 4 months ago [\#110215](#110215) by [flashx](/forum/user/8818-flashx "View flashx's Profile") Replied by *[flashx](/forum/user/8818-flashx "View flashx's Profile")* on topic *[Change Add To Cart Button to Image?](/forum/4-how-to/83718-change-add-to-cart-button-to-image#110215 "Hi guys, how can I change the default 'Add to Cart' grey button to an image button? thanks")* worked it out!! ![:D](/media/kunena/emoticons/1.png ":D") Code: div.hikashop_product_stock input{ background-image:url(/Joomla_3.1.1-Stable-Full_Package/templates/my-template/images/btn-add-to-cart.jpg); width:100px; height:50px; } thanks for all your help ![;)](/media/kunena/emoticons/24.png ";)") The following user(s) said Thank You: [markV](/forum/user/22055-markv "View markV's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzgzNzE4LWNoYW5nZS1hZGQtdG8tY2FydC1idXR0b24tdG8taW1hZ2U/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[flashx](/forum/user/8818-flashx "View flashx's Profile")** - [![flashx's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar_2013-06-21.jpg)](/forum/user/8818-flashx "View flashx's Profile") Topic Author - [ Offline](/forum/user/8818-flashx) Less More - Posts: 20 - Thank you received: 4 - - 13 years 4 months ago [\#110217](#110217) by [flashx](/forum/user/8818-flashx "View flashx's Profile") Replied by *[flashx](/forum/user/8818-flashx "View flashx's Profile")* on topic *[Change Add To Cart Button to Image?](/forum/4-how-to/83718-change-add-to-cart-button-to-image#110217 "Hi guys, how can I change the default 'Add to Cart' grey button to an image button? thanks")* ... have no Idea why that took me days to figgure out ![:/](/irritated.gif ":/") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzgzNzE4LWNoYW5nZS1hZGQtdG8tY2FydC1idXR0b24tdG8taW1hZ2U/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop Install & Update Product & Category Display Content Creation Sales and Orders Orders management Reports & Statistics Customers Checkout Payment Methods Shipping Methods Import & Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel & Slider Mass Actions Filters & Search Discount & Coupon Feature Request Integrations Showcase General Talk about HikaShop Development HikaShop 3.0 Beta Translation Commercial Jobs HikaShop Components HikaMarket Market: Feature requests Market: How to? Market: Bug Report HikaSerial General talk about HikaSerial Serial: Bug Report Serial: How to? Support en Français de HikaSerial (French Support) HikaSubscription HikaAuction Auction: Feature requests Auction: How to? Auction: Bug report Hikashop around the world Support en Français (French Support) Russian FAQ. Курс выживания с Hikashop. Частые вопросы и о Расширения Hikashop Наши сайты на Hikashop 日本語版サポート(Japanese Support) Thai German Archives Bug Report How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.105 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org) [](#top)