Custom Add to Cart button

mashdun
Topic Author
Offline

14 years 5 months ago #47121 by mashdun

Custom Add to Cart button was created by mashdun

I am helping the owner of a site that has Hikashop. They want to add a custom Add To Cart button. I have successfully accomplished this by editting the CSS in the backend, but when I do that ALL the other buttons relating to the shop also change.

I'd like to leave all the normal buttons (proceed to checkout, login, registration, continue shopping, etc) as they are and just change the Add To Cart button (beside the product image) to the image attached.

Basically I want to just add this to the CSS and make the change in the code to change the class to hikashop_cart_button2... leaving the normal button as is. Is this possible? Where would I change the Add To Cart button class?

Code:

a.hikashop_cart_button2, a.hikashop_cart_button2:hover{
	background-image:url(../images/add_to_cart_custom.jpg);
	text-decoration:none;
	cursor:pointer;
	float:left;
	white-space:nowrap;
	width:354px;
	height:140px;
}

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

nicolas
Away

14 years 5 months ago #47122 by nicolas

Replied by nicolas on topic Re: Custom Add to Cart button

You need such css:

.hikashop_product_page a.hikashop_cart_button{
}

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

mashdun
Topic Author
Offline

14 years 5 months ago #47124 by mashdun

Replied by mashdun on topic Re: Custom Add to Cart button

Don't understand what you mean. I tried adding that with no attributes and it still changes all the other buttons. Where do I add that CSS?

Initially i changed the "a.hikashop_cart_button, a.hikashop_cart_button:hover" class to how I wanted the button to be displayed but when I did... ALL Hikashop buttons changed on the that as well... in the modules.

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

mashdun
Topic Author
Offline

14 years 5 months ago - 14 years 5 months ago #47126 by mashdun

Replied by mashdun on topic Re: Custom Add to Cart button

Ok figured it out...

Basically changed this...

Code:

/* cart buttons */

a.hikashop_cart_button, a.hikashop_cart_button:hover{
	background-image:url(../images/button.jpg);
	border:1px solid #356AA0;
	color:#000000;
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:11px;
	padding:5px 8px;
	text-decoration:none;
	cursor:pointer;
	float:left;
	white-space:nowrap;
}
a.hikashop_cart_button:hover{
	outline: 2px solid #92C1FF;
}

To this... (basically added the first class, leaving the rest alone)

Code:

/* cart buttons */
.hikashop_product_page a.hikashop_cart_button, .hikashop_product_page a.hikashop_cart_button:hover{
	background-image:url(../images/add_to_cart_custom.jpg);
	background-repeat:no-repeat;
	margin-right:-20px;
	cursor:pointer;
	float:left;
	border: none;
	width:354px;
	height:140px;
}

a.hikashop_cart_button, a.hikashop_cart_button:hover{
	background-image:url(../images/button.jpg);
	border:1px solid #356AA0;
	color:#000000;
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:11px;
	padding:5px 8px;
	text-decoration:none;
	cursor:pointer;
	float:left;
	white-space:nowrap;
}
a.hikashop_cart_button:hover{
	outline: 2px solid #92C1FF;
}

To remove the "Add to Cart" text... go to the /language/en-GB/en-GB.com_hikashop.ini

Change...

ADD_TO_CART="Add to cart"

To...

ADD_TO_CART=""

Also in the CSS, I had to adjust the width of my left side.

Thanks! Maybe this will help someone else down the road.

Last edit: 14 years 5 months ago by mashdun.

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

mashdun
Topic Author
Offline

14 years 5 months ago #47128 by mashdun

Replied by mashdun on topic Re: Custom Add to Cart button

Update... I had to remove this CSS... it was creating an outline when hovering over the new Add To Cart button...

Code:

a.hikashop_cart_button:hover{
	outline: 2px solid #92C1FF;
}

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

keithstanley
Offline

12 years 8 months ago #140103 by keithstanley

Replied by keithstanley on topic Re: Custom Add to Cart button

Where would I find that? I know it is a css but as you know there hundreds of folders to search through and it would help a lot if you could tell where to find it.
Thanks :-)

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

keithstanley
Offline

12 years 8 months ago #140104 by keithstanley

Replied by keithstanley on topic Re: Custom Add to Cart button

nicolas wrote: You need such css:

.hikashop_product_page a.hikashop_cart_button{
}

Where would I find that?
I know it is a css but as you know there hundreds of folders to search through and it would help a lot if you could tell where to find it.
Thanks :-)

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

nicolas
Away

12 years 8 months ago #140138 by nicolas

Replied by nicolas on topic Re: Custom Add to Cart button

You can add such CS on the frontend CSS file of HikaShop: www.hikashop.com/support/support/documen...ize-the-display.html

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

Time to create page: 0.194 seconds