Product Grid Add to Card Button Style

[anti9nine]

Hey, Woodmart support!

I want to changed the Add to card button style. I chose the product style in the admin panel (screenshot:product-style. But, I noticed that the add to cart button is in the circle on the mobile version and is always visible, but on the desktop version the add to card button is not in the circle and only displays on hover. Is it possible to make the add to cart button the same as on mobile version?

Also, is it possible to change the add to cart button location? (screenshot: screen1)

Thank you and waiting for your reply!

• This topic was modified 1 year, 7 months ago by anti9nine.

Attachments:

You must be logged in to view attached files.

Hello,

You can achieve that with the help of the below code, paste it into the “Desktop CSS” area in Theme Settings -> Custom CSS.

Make buttons rounded:

.product-grid-item .wd-buttons {
        border-radius: 35px;
}

Make buttons always visible:

.product-grid-item .wd-buttons {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

Button at the bottom:

.product-grid-item .wd-buttons.wd-pos-r-t {
    right: unset;
    top: unset;
    
    left: 10px;
    bottom: 10px;
}

https://prnt.sc/q2VQQOBfljMI

Kind Regards

Thank you for your help, Luke!

I have a few more questions:

1. How can I remove the shadow from the add to cart button? (screen2 attached)

2. How can I change the color of the add to cart button? (screen2 attached)

3. How can I change the add to card buttons icon to another icon? (screen2 attached)

I appreciate your help and waiting for your reply!

Attachments:

You must be logged in to view attached files.

[anti9nine]

Also, I forgot to ask you, could you tell me please, how can I change the color of the add to cart icon? And remove the shadow from the add to cart button?

• This reply was modified 1 year, 7 months ago by anti9nine.

Hello,

1. Are you mean the black background?

2. The color for the “Add to cart” button comes from the settings of the “Accent buttons” area in Theme Settings -> Styles and colors -> Buttons.

https://monosnap.com/file/oEDihLf6IA90z29rZdMAg7QBeoIyIE

3. With the help of this code, you can change the cart icon, enter it in Theme Settings -> Custom CSS.

.product-grid-item .wd-add-cart-icon>a:before {
    content: "\f120";
    font-family: woodmart-font;
}

Kind Regards

[anti9nine]

Thank you, everything worked!

One more question, could you tell me please, how can I change the animation color (when i tap on the add to cart button it shows an animation of the loading circle)? it’s black now, but i want white color (screen attached). Thank you!

• This reply was modified 1 year, 7 months ago by anti9nine.

Attachments:

You must be logged in to view attached files.

Hello,

Please navigate to Theme Settings -> Styles and colors -> Buttons -> In the “Accent” area set the “Light” value for the “Accent hover buttons text color scheme” option.

https://monosnap.com/file/wn3Caoh7fL3DD6NEnNEIoooxumJdta

So the loader should be white after that.

Kind Regards

I’ve already done this, but unfortunately it doesn’t work. Theoretically, it works, but only on the product page, but on the product grid it’s still black. Do you have any other ideas how we can change this? Maybe through CSS code?

Hello,

Ok, in this case, try to use the code below for changing the color of the loader.

.product-grid-item .wd-add-btn-replace .add-to-cart-loop:after {
    color: #fff;
}

Thanks for your time and have a great day.

Kind Regards

Hey!

Thank you for your reply! But, unfortunately this code doesn’t work. (screenshots attached) Do you have maybe any other ideas how to solve this?

Thank you for your help and waiting for your reply!

Attachments:

You must be logged in to view attached files.

Replace the old code with the below one, and recheck the issue. This one should work well.

.product-grid-item .wd-action-btn.wd-style-icon>a:after {
   border-left-color: #fff;
}

Kind Regards

Very cool support service, thank you so much, Luke! Now it works correctly! Ticket closed and have a great day 🙂

Hello,

Great! Our customers are incredibly important to us here and your satisfaction remains our priority at all times.

Thanks for your time and have a great day.

Kind Regards

[Author]

Posts