Add to cart button change design

[dani555]

Hello
I found on a site with button add to cart.
http://prntscr.com/l081td

Does anyone know how to do it for the theme
http://www.spearthemes.com/oc-light/
Opencart 3.0.2.0

The site is here
https://vegis.ro/

Thank you

[Beverleyh]

Does anyone know how to do it …

Do what?

[wanderval]

Hello dani555,

You should have put a codepen example to speed up the evaluation process. Please, next time, put the example.

But as I woke up well today, I did this example.
see if that’s it: https://codepen.io/wanderval/pen/rqaRNB

[dani555]

Hello
I would put the html code and css but I do not know exactly how to identify it.
Thank you wanderval for the code
So I want to look
I have to put all the code or just a part

If you could tell me how you identified the Html code
Thanks

[dani555]

For Beverleyh I want to make the add to cart button that is in red
Thank you

[dani555]

Hello
I put this code in the stylesheet
.btn-default {
transition: 0.4s;
color: #fff;
background-color: # 303030;
text-transform: uppercase;
position: relative;
padding-right: 52px
}
And this
.fa-shopping-cart {
position: absolute;
right: 0px;
top: 0px;
padding: 9px 12px 7px 10px;
background: red;
height: 100%;
font-size: 130%;
}
Now it does
I want to show you how you did
Just below and the sides to be full

http://prntscr.com/l0hbmv

There was another problem after I introduced it
.fa-shopping-cart {

It came out like this
http://prntscr.com/l0hea1

I got the following explanation
And for header you need to use another font awensome icon, or you can leave same fa-shopping cart icon, and change only for product….with fa-shopping-bag or another..

The css code you gave me did not work

Thank you

[wanderval]

Hello dani,

1-For you inspect the structure html do you can use the “Inspect Element”, the chrome tool is better.
Devtools: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/

2-you don’t need to use all my css code, just use what you need, I created the html just for example.

3-Don’t modify the .fa-shopping-bag or .fa-shopping-card class, because do you use this icon in other parts of website, put a class on element container of button then modify just this class. If you see my css code, do you go see some classes that I created, but do you could do of other ways.

This part of code I created the “container-card-button” and “icon-card” class, the same I applied a specific css.

CSS:

container-card-button {
  flex: 1;
  display: flex;
  align-items: center;
  background: #0090e3;
  color: #fff;
}

.container-card-button .icon-card {
  font-size: 22px;
  padding: 5px 8px;
}

I apply on ‘.btn-default’ class the porperty:

.btn-default {
  flex: 1;
}

I commented a property in ‘.product-thumb’ class, but do you can set this property to 0;

.product-thumb {
  padding-bottom: 0;
}

Thats is it.

[dani555]

Hello
Thanks for your information
But still does not work I added the css code I deleted from it but it does not appear.
When I put this code
container-card-button {
flex: 1;
display: flex;
align-items: center;
background: #0090e3;
color: #fff;
}

.container-card-button .icon-card {
font-size: 22px;
padding: 5px 8px;
}
.btn-default {
flex: 1;
}
.product-thumb {
padding-bottom: 0;
}

it looks like this
http://prntscr.com/l0yhk2

When I put all the css code
body {
font-family: ‘Open Sans’, sans-serif;
font-weight: 400;
background-color: #fff;
color: #666;
font-size: 12px;
line-height: 20px;
width: 100%;
}

.product-thumb {
border: 1px solid #ddd;
/padding-bottom: 10px;/
margin-bottom: 20px;
overflow: auto;
transition: all 0.4s;
}

.product-thumb .image {
text-align: center;
}

.product-thumb .image a {
display: block;
}

.product-thumb .image img {
margin-left: auto;
margin-right: auto;
}

.product-thumb h4 {
text-align: center;
}

.product-thumb h4 a {
color: #666;
}

h4 {
font-size: 15px;
}

a {
color: #0090e3;
}

p {
margin: 0 0 10px;
}

.product-thumb .price {
color: #444;
padding-bottom: 5px;
}

.container-card-button {
flex: 1;
display: flex;
align-items: center;
background: #0090e3;
color: #fff;
}

.container-card-button .icon-card {
font-size: 22px;
padding: 5px 8px;
}

.product-thumb .caption {
padding: 0 20px;
height: 51px;
}

.btn-default {
flex: 1;
transition: 0.4s;
color: #fff;
background-color: #303030;
text-transform: uppercase;
}
appears as here
http://prntscr.com/l0yivs

I deleted the .fa-shopping-cart code did not work properlti

Thank you

[wanderval]

Hello,

So copy your HTML file and create a exemple on codepen, is very hard help you without see the code, for me you don’t made the changes on HTML so the css is not applied. Sorry, help me so I can help you!

[dani555]

Hello
I put all the css code in the theme
As it was before
https://codepen.io/dani888/pen/ReWEZB
I added the Html code so I could add.
Maybe you can figure it out
Thank you

[wanderval]

Hi dani,

I looked the your code on codepen, but I think that you will stay more confuse if I make a modified, because I believe you have on code a loop logic for generate html, am I right? the modified is simple, but you will need take a attention to this possibility.

1- first you need get the element <i> that is the icon and put for out of element <button>, so will handler the position the elements.
2- The element parent of button it is a div they have a class called text-center, do you need put other class, because is need to leave more simple to apply a specific css commands.

this will be your structure: <div class="wrapper-card-button"><button></button><i></i>

modified css

.product-thumb {
  padding-bottom: 0;
}

.product-thumb .wrapper-card-button {
  display: flex;
}

.product-thumb .wrapper-card-button button {
  flex: 1;
}

.product-thumb .wrapper-card-button i {
  padding: 0 15px;
  background: red;
  color: #fff;
  align-items: center;
  display: flex;
  font-size: 18px;
}

https://codepen.io/wanderval/pen/KGzMqQ?editors=1100

[dani555]

Hello
Css code does not work
I found a theme model from the same developer that made the button
http://www.spearthemes.com/op-blueblack/
This code may work for the theme but I do not know how to identify it.
Thank you for your information and sorry for trouble

[dani555]

Hello
I found how to do it
thanks for helping

1. Replace you css code with :
   .btn-default {
   transition: 0.4s;
   color: #fff;
   background-color: #303030;
   text-transform: uppercase;
   position:relative;
   padding-right:52px;
   width:100%
   }
   .fa-shopping-cart {
   position:absolute;
   right:0px;
   top:0px;
   padding:9px 12px 7px 10px;
   background:red;
   height:100%;
   font-size:130%;
   }
   .product-thumb {
   padding-bottom: 0px;
   }

2. Navigate to catalog/view/theme/oc-light/template/common/header.twig
   Search for and replace it with

[Yasirhenson]

How one can embed card generator their site?

[LearnTheNew]

Find the code:

button type=”button” class=”btn btn-default”
i class=”fa fa-shopping-cart”
::before
/i
“Add to Cart”

Replace it:

button type=”button” class=”btn btn-default”
“Add to Cart”
i class=”fa fa-shopping-cart”
::after
/i
/button

finally change the color to bakground-color: #D85CE4;

[Author]

Posts