Quck view Add to Cart Related Product

Hi I need help

how can i add to cart button for quick view related products?
Also, in quick view it display only 4 products how can i display more?

Thanks in advance.

Hello,

The add to cart button is hidden with CSS. The reason is that if you click on the Add to cart button there will be two popup windows (QuickView and AjaxCart).

You can remove the CSS code that hides the buttons but please note that they are not styled for the theme.

In the related products, there are four items by design. The products are rendered in the markup but are hidden. Unfortunately, it is not possible to show them without modifying the CSS code.

thanks

If possible where can i change the css file for both?

Hello,

The best way to add your custom styles (css) is to fill them into Custom Head Styles field in the administration - here is a guide how to find it.

The css code you need to paste there is:

.quickViewWindow .related-products-grid .item-grid {
  height: auto;
}
.quickViewWindow .related-products-grid .item-box {
  width: 206px;
}
.quickViewWindow .related-products-grid .item-box:nth-of-type(3n+1) {
    clear: left !important;
}
.quickViewWindow .related-products-grid .item-box .details {
  height: auto;
}
.quickViewWindow .related-products-grid .add-info {
  display: inline-block;
  margin-top: 5px;
}
.quickViewWindow .related-products-grid .productQuantityDropdown,
.quickViewWindow .related-products-grid .productQuantityTextBox {
  display: none;
}

Notice that now all the related products will show up.
I have made three items in row because if there are four there is no enough space for the button and the item price.

I hope that will help you.