1

How do I remove hover on product on home and category page? When I hover on a product the styling messes up. I just want to remove the hover effect. (The add to cart button appears) And the whole layout just changes. Is there an easy way to remove the hover effect?

before hover and after hover

[before hover1 after hover

I also want the add to cart next to the price. Is there a way to do this?

1 Answer 1

0

It is a CSS issue and can be resolved using the following code:

& when (@media-common =true) {
 .products-grid {
    .product-item-info {
      &:not(:hover):not(.active) {
        .product-item-inner {
          position: relative;
          height: auto;
          width: auto;
          border: none;
          box-shadow: none !important;
          overflow: unset;
          z-index: 2;
        //   top: 5px;
        }
      }
    }
  }
}

.media-width(@extremum, @break)
  when
  (@extremum = "min")
  and
  (@break = @screen__s) {
  .block.widget .products-grid .product-item .product-item-inner,
  .page-layout-1column
    .block.widget
    .products-grid
    .product-item
    .product-item-inner,
  .page-layout-3columns
    .block.widget
    .products-grid
    .product-item
    .product-item-inner {
    box-shadow: none !important;
  }

  .products-grid .product-item-info:hover .product-item-inner,
  .products-grid .product-item-info.active .product-item-inner {
    display: block !important;
  }

  .products-grid .product-item-inner {
    box-shadow: none !important;
    left: 0px !important;
    right: 0px !important;
    padding: 0px !important;
    position: relative;
    border: none !important;
  }

  .products-grid .product-item-actions {
    margin: 0;
  }

  .products-grid .product-item-info:hover,
  .products-grid .product-item-info.active {
    box-shadow: none !important;
  }
}
1
  • 1
    thanks! This worked! Aug 25, 2022 at 19:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.