Page 1 of 1
[SOLVED] Add To Cart Button Color?
Posted: Tue Mar 11, 2025 11:12 pm
by clubplug
Hi Folks
I searched the forum and wasn't able to find what I am trying to do, so I figured I would try posting instead.
I have Opencart version 3 Default template and theme.
Is there a way to change the color of the ADD TO CART button, on both the Product Page and the List of Products Page?
Examples:
-
https://www.clubplug.ca/NGK-Spark-Plugs ... R5EIX-5688
-
https://www.clubplug.ca/NGK-Spark-Plugs ... park-Plugs
Thank you all for your help.
Frank
Re: Add To Cart Button Color?
Posted: Wed Mar 12, 2025 12:47 am
by JNeuhoff
Yes, it can be done in the catalog/view/theme/*/stylesheet/stylesheet.css.
I suggest you create your own theme folder at /catalog/view/theme/my-theme and then copy the stylesheet folder from above into it, and then modify it as per your needs. Then, in the admin backend, set it to the new theme folder at
Extensions > Extensions > Theme > edit Default Store theme > Theme Directory.
In this new stylesheet.css , add and modifiy this:
Code: Select all
#button-cart {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #229ac8;
background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
background-repeat: repeat-x;
border-color: #1f90bb #1f90bb #145e7a;
}
#button-cart:hover, #button-cart:active, #button-cart.active, #button-cart.disabled, #button-cart[disabled] {
background-color: #1f90bb;
background-position: 0 -15px;
}
with your own color values.
Re: Add To Cart Button Color?
Posted: Wed Mar 12, 2025 1:22 am
by clubplug
JNeuhoff wrote: ↑Wed Mar 12, 2025 12:47 am
Yes, it can be done in the catalog/view/theme/*/stylesheet/stylesheet.css.
I suggest you create your own theme folder at /catalog/view/theme/my-theme and then copy the stylesheet folder from above into it, and then modify it as per your needs. Then, in the admin backend, set it to the new theme folder at
Extensions > Extensions > Theme > edit Default Store theme > Theme Directory.
In this new stylesheet.css , add and modifiy this:
Code: Select all
#button-cart {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #229ac8;
background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
background-repeat: repeat-x;
border-color: #1f90bb #1f90bb #145e7a;
}
#button-cart:hover, #button-cart:active, #button-cart.active, #button-cart.disabled, #button-cart[disabled] {
background-color: #1f90bb;
background-position: 0 -15px;
}
with your own color values.
Thank you JNeuhoff!!
Re: Add To Cart Button Color?
Posted: Wed Mar 12, 2025 1:31 am
by clubplug
JNeuhoff wrote: ↑Wed Mar 12, 2025 12:47 am
Yes, it can be done in the catalog/view/theme/*/stylesheet/stylesheet.css.
I suggest you create your own theme folder at /catalog/view/theme/my-theme and then copy the stylesheet folder from above into it, and then modify it as per your needs. Then, in the admin backend, set it to the new theme folder at
Extensions > Extensions > Theme > edit Default Store theme > Theme Directory.
In this new stylesheet.css , add and modifiy this:
Code: Select all
#button-cart {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #229ac8;
background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
background-repeat: repeat-x;
border-color: #1f90bb #1f90bb #145e7a;
}
#button-cart:hover, #button-cart:active, #button-cart.active, #button-cart.disabled, #button-cart[disabled] {
background-color: #1f90bb;
background-position: 0 -15px;
}
with your own color values.
Hi J
Sorry but in the file catalog/view/theme/default/stylesheet/stylesheet.css
The #button-cart does not exist. Maybe I'm missing something ?
Thanks again.
Frank
Re: Add To Cart Button Color?
Posted: Wed Mar 12, 2025 1:35 am
by JNeuhoff
It needs to be added, and modified as per your color needs.
Re: Add To Cart Button Color?
Posted: Wed Mar 12, 2025 1:42 am
by clubplug
JNeuhoff wrote: ↑Wed Mar 12, 2025 1:35 am
It needs to be added, and modified as per your color needs.
Oh, I see what you mean... Thanks!!
Re: Add To Cart Button Color?
Posted: Wed Mar 12, 2025 7:18 pm
by paulfeakins
clubplug wrote: ↑Wed Mar 12, 2025 1:42 am
Oh, I see what you mean... Thanks!!
Can I mark this as [SOLVED] now?