buttons in Hover on product section

Hi in Products styles -> button on hover if i need make buttons appear without hover how can i do this ?

buttons in Hover on product section if i chose “button on hover” style how can i make buttons and other object as compare … appear without hover as image in attachments

Attachments:

You must be logged in to view attached files.

Hello,

Navigate to Theme Settings > Product Archive > Product Styles > choose the standard button hover effects on product hover.

This style will ensure the Add to Cart button is always visible, even without hovering.

Best Regards,

Hi
yes i have do this but this style not good formated some button appear up and down
and other buttons compare … not appear till hover
i need style buttons on hover but without hover
could you please help to do this

even in code just let me know where can i do this and how it’s ok for me
thanks

Attachments:

You must be logged in to view attached files.

if there are no option please tell me how can i do it by css

Hello,

Your site is in maintenance mode, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this and give you a possible solution.

Best Regards,

info in Extra information

Hello,

Please try adding the following Custom CSS under Theme Settings >> Custom CSS.

.product-grid-item.wd-hover-buttons-on-hover .wd-product-footer,
.product-grid-item.wd-hover-buttons-on-hover .product-element-bottom,
.product-grid-item.wd-hover-buttons-on-hover .wd-buttons,
.product-grid-item.wd-hover-buttons-on-hover .wd-add-btn,
.product-grid-item.wd-hover-buttons-on-hover .add-to-cart-loop {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  display: flex !important;
  gap: .5rem !important;
  margin: 0 !important;
}

Best Regards,

Hi
how can i remove or hide this spaec between name of products and image when do hover

Attachments:

You must be logged in to view attached files.

Hello,

Please try adding the following Custom CSS under Theme Settings >> Custom CSS.

.product-grid-item.wd-hover-buttons-on-hover:hover .product-element-bottom {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.product-grid-item.wd-hover-buttons-on-hover:hover .wd-entities-title,
.product-grid-item.wd-hover-buttons-on-hover:hover .price {
    margin-top: -30px !important; 
    margin-bottom: 0px !important;
}

Best Regards,

i have use it space still in bottom name product as in image in attachment
is there a way to stop this animate on hover to make this space
it’s ok if still move little up on hove but without space up down product name

Attachments:

You must be logged in to view attached files.

and about last code you give me you can see in mobile version when press on product then product name disappear

Attachments:

You must be logged in to view attached files.

Hello,

The extra space you see under some product names it happens because different products have different elements.
For example, some products display swatches (colors, sizes, etc.), while others don’t. That difference in height makes the titles shift when items are aligned in the grid.

If you want to keep all product cards the same height and avoid that visible gap, you can make sure every product has the same type of elements (add swatches to all or none).

For the issue that is causing the issue on mobile, use the above css, which I provided, add only on Theme Settings > Custom > Custom CSS for desktop, and for the mobile use the same css in the mobile area and change the value according to the layout.

Best Regards,

[Author]

Posts