Home › Forums › WoodMart support forum › Product Grid Add to Card Button Style

Product Grid Add to Card Button Style

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • March 21, 2023 at 5:38 pm #453115

    anti9nine
    Participant

    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, 8 months ago by anti9nine.
    Attachments:
    You must be logged in to view attached files.
    March 22, 2023 at 11:07 am #453281

    Luke Nielsen
    Keymaster

    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

    March 22, 2023 at 2:20 pm #453335

    anti9nine
    Participant

    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.
    March 22, 2023 at 4:02 pm #453374

    anti9nine
    Participant

    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, 8 months ago by anti9nine.
    March 22, 2023 at 4:59 pm #453409

    Luke Nielsen
    Keymaster

    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

    March 22, 2023 at 5:59 pm #453427

    anti9nine
    Participant

    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, 8 months ago by anti9nine.
    Attachments:
    You must be logged in to view attached files.
    March 22, 2023 at 6:34 pm #453444

    Luke Nielsen
    Keymaster

    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

    March 22, 2023 at 6:49 pm #453447

    anti9nine
    Participant

    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?

    March 23, 2023 at 10:24 am #453571

    Luke Nielsen
    Keymaster

    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

    March 23, 2023 at 12:51 pm #453620

    anti9nine
    Participant

    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.
    March 23, 2023 at 1:42 pm #453636

    Luke Nielsen
    Keymaster

    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

    March 23, 2023 at 1:59 pm #453637

    anti9nine
    Participant

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

    March 23, 2023 at 3:05 pm #453646

    Luke Nielsen
    Keymaster

    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

Tagged: 

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Product Grid Add to Card Button Style’ is closed to new replies.