How to change product grid Product Style
I got some question about change product grid layout to old version. This post will guide you how to do it :
- Default new version product layout like this one

So, to change back to our old grid style. you can goto Admin / POS / Setting / Pos layout setting / Pos custom css Field

and

and enter this css code to that field :
Click update setting . And goto POS , REFRESH POS page again to see the effect:

That Done.
There are good custom CSS style from customer , I think it good for other customers:
Custom CSS code:

Let enjoy with OpenPOS
- Default new version product layout like this one
So, to change back to our old grid style. you can goto Admin / POS / Setting / Pos layout setting / Pos custom css Field
and
and enter this css code to that field :
.product-main-list .product-item-container .product-item-detail{
background-size: 100%!important;
background-position: center center!important;
}
.product-item-container .product-info{
background: rgba(0, 0, 0, 0.7215686274509804);
}
.product-info .product-price {
text-align: center!important;
color: #fff!important;
}
.product-info .product-sku,
.product-info .product-name {
text-align: center!important;
}
.product-info .product-name span {
color: #ff6d00!important;
}
Click update setting . And goto POS , REFRESH POS page again to see the effect:
That Done.
There are good custom CSS style from customer , I think it good for other customers:
Custom CSS code:
.product-main-list .product-item-container .product-item-detail{
background-size: 100%!important;
background-position: center center!important;
border-radius: 10px;
}
.product-item-container .product-info{
border-radius: 10px!important;
}
div.product-info .product-price {
text-align: center!important;
color: #fff!important;
}
.product-info .product-sku,
.product-info .product-name {
text-align: center!important;
}
.product-info .product-name span {
color: #fafafa!important;
}
div.product-info .product-sku span {
display: none!important;
}
span.product-qty.ng-star-inserted{
display: none!important;
}
.product-info{
text-shadow: 2px 2px 4px black;
}
And Result:Let enjoy with OpenPOS
