Change Add To Cart Button to Image?

flashx
Topic Author
Offline

13 years 3 months ago #109243 by flashx

Change Add To Cart Button to Image? was created by flashx

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.

Mohamed Thelji
Offline

13 years 3 months ago - 13 years 3 months ago #109258 by Mohamed Thelji

Replied by Mohamed Thelji on topic Change Add To Cart Button to Image?

Hi,

You'll just have to edit your CSS 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 3 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.

flashx
Topic Author
Offline

13 years 3 months ago #109341 by flashx

Replied by flashx on topic Change Add To Cart Button to Image?

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

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

nicolas
Offline

13 years 3 months ago #109400 by nicolas

Replied by nicolas on topic Change Add To Cart Button to Image?

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.

flashx
Topic Author
Offline

13 years 3 months ago #110160 by flashx

Replied by flashx on topic Change Add To Cart Button to Image?

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

any help would be ace

thanks

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

Eliot
Offline

13 years 3 months ago #110181 by Eliot

Replied by Eliot on topic Change Add To Cart Button to Image?

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

flashx
Topic Author
Offline

13 years 3 months ago #110184 by flashx

Replied by flashx on topic Change Add To Cart Button to Image?

Thanks Eliot,

Unfortunately, this doesn't work

any other ideas?

Thanks

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

Eliot
Offline

13 years 3 months ago #110211 by Eliot

Replied by Eliot on topic Change Add To Cart Button to Image?

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.

flashx
Topic Author
Offline

13 years 3 months ago #110213 by flashx

Replied by flashx on topic Change Add To Cart Button to Image?

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.

flashx
Topic Author
Offline

13 years 3 months ago #110215 by flashx

Replied by flashx on topic Change Add To Cart Button to Image?

worked it out!!

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

The following user(s) said Thank You: markV

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

flashx
Topic Author
Offline

13 years 3 months ago #110217 by flashx

Replied by flashx on topic Change Add To Cart Button to Image?

... 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.221 seconds