Home › Forums › WoodMart support forum › Customize box/button

Customize box/button

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • August 17, 2023 at 9:57 pm #489432

    Josh_9sy6
    Participant

    How can I modify the add to cart button? So it doesn’t does that animation when hover? (or change/add another icon, etc..)

    And, how it’s possible to customize the product box when hover? For example, if you hover it, just customize it’s border color, don’t expand it’s height (like it does as default, etc..)

    Attachments:
    You must be logged in to view attached files.
    August 18, 2023 at 10:04 am #489514

    Luke Nielsen
    Keymaster

    Hello,

    In general, the style of the hover/button can be changed by changing the product style via Theme Settings -> Product archive -> Products styles -> Hover on the product.

    https://prnt.sc/If75kwoKuPNw

    Don’t hesitate to let me know if you need any further help or any other info.

    Kind Regards

    August 18, 2023 at 10:46 am #489535

    Josh_9sy6
    Participant

    Thanks for your answer, but there I’m only able to select those styles, but I cannot customize the icon/hover animations etc.. on this section.

    Please can you check my other post as well? Thank you

    August 18, 2023 at 10:59 am #489538

    Luke Nielsen
    Keymaster

    Hello,

    Please let me know which icons you want to change.

    As for the animations, unfortunately, there is no option in Theme Settings available for changing that. It requires Customization and this is beyond our limitations and support policy scope.

    My colleague picked up your other thread, so I hope he will do his best to help you with that issue.

    Kind Regards

    August 18, 2023 at 12:15 pm #489567

    Josh_9sy6
    Participant

    I see.. well I just wanted to display an Cart icon, instead of text.

    August 18, 2023 at 12:19 pm #489568

    Luke Nielsen
    Keymaster

    Hello,

    Please send me the URL link to your website so I will look closer at it.

    Thank you in advance.

    Kind Regards

    August 18, 2023 at 12:50 pm #489583

    Josh_9sy6
    Participant

    My website is still on my local environment, but once I put it online (at maintenance) I will share.

    But, maybe on the meanwhile, can do you guide me how to? so at the end, I would like to customize the content of the product boxes/add this add to cart icon.

    Btw, I see your colleague didn’t checked yet my another post, or is he still checking it?

    Thanks for your response.

    Attachments:
    You must be logged in to view attached files.
    August 18, 2023 at 2:36 pm #489624

    Luke Nielsen
    Keymaster

    Hello,

    Try to use the below code for changing the icon, please define it in Theme Settings -> Custom CSS.

    .product-grid-item .wd-add-btn-replace .add-to-cart-loop:before {
    transform: translateY(0) translateZ(0);
}

.product-grid-item .wd-add-btn-replace .add-to-cart-loop span {
    transform: translateY(-100%) translateZ(0);
}

    https://gyazo.com/00c857d14891f4f7c3870c6b1a0db777

    Kind Regards

    August 18, 2023 at 2:56 pm #489629

    Josh_9sy6
    Participant

    Hello Luke, thanks for you answer,

    What about for the hover animation at the product box? Let’s say I don’t want animations on the product box, only when hover a shadow animation at the border (for example) then keep the card like you see on the pic:

    Attachments:
    You must be logged in to view attached files.
    August 21, 2023 at 9:18 am #490002

    Luke Nielsen
    Keymaster

    Hello,

    Sorry, but customize animation could cause other problems so I suggest you leave it as it is.

    If you have any more questions or come across any other issues, let me know, I’ll be happy to help.

    Kind Regards

    August 21, 2023 at 10:03 am #490028

    Josh_9sy6
    Participant

    Hello,

    Yes but there’s no point on having one animation to display an empty space, that’s not good for the site. How can we fix this?

    Attachments:
    You must be logged in to view attached files.
    August 21, 2023 at 11:43 am #490064

    Luke Nielsen
    Keymaster

    Hello,

    Try to use the below code for hiding that space. Define it in Theme Settings -> Custom CSS.

    .product-grid-item .hover-content-wrap,
.product-grid-item .wd-product-sku {
    display: none;
}

    https://gyazo.com/7f796e584000fa073329863cebc4e05e

    Kind Regards

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)