Change Add To Cart Button to Image?

  • Posts: 20
  • Thank you received: 4
11 years 4 months ago #109243

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

Please Log in or Create an account to join the conversation.

  • Posts: 12953
  • Thank you received: 1778
11 years 4 months ago #109258

Hi,

You'll just have to edit your CSS code and replace these lines :

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 :
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: 11 years 4 months ago by Mohamed Thelji.
The following user(s) said Thank You: brayden10, markV

Please Log in or Create an account to join the conversation.

  • Posts: 20
  • Thank you received: 4
11 years 4 months ago #109341

Thanks Mohamed.


I tried this by going to hikashop > display > CSS > front-end CSS file and edited it to:

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

Please Log in or Create an account to join the conversation.

  • Posts: 82758
  • Thank you received: 13346
  • MODERATOR
11 years 4 months ago #109400

We would need a link to that page to tell you exactly what CSS to use.

Please Log in or Create an account to join the conversation.

  • Posts: 20
  • Thank you received: 4
11 years 4 months ago #110160

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:

<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 :/

any help would be ace :)

thanks

Please Log in or Create an account to join the conversation.

  • Posts: 2334
  • Thank you received: 403
11 years 4 months ago #110181

Hello there,

According to your code, I think you just have to add something like this:

a.hikashop_cart_input_button{
  background-image:url(/templates/my-template/images/add-to-cart.jpg);
}

Please Log in or Create an account to join the conversation.

  • Posts: 20
  • Thank you received: 4
11 years 4 months ago #110184

Thanks Eliot,

Unfortunately, this doesn't work :( any other ideas?

Thanks

Please Log in or Create an account to join the conversation.

  • Posts: 2334
  • Thank you received: 403
11 years 4 months ago #110211

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 or Create an account to join the conversation.

  • Posts: 20
  • Thank you received: 4
11 years 4 months ago #110213

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 or Create an account to join the conversation.

  • Posts: 20
  • Thank you received: 4
11 years 4 months ago #110215

worked it out!! :D

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 ;)

The following user(s) said Thank You: markV

Please Log in or Create an account to join the conversation.

  • Posts: 20
  • Thank you received: 4
11 years 4 months ago #110217

... have no Idea why that took me days to figgure out :/

Please Log in or Create an account to join the conversation.

Time to create page: 0.094 seconds
Powered by Kunena Forum