Mini shopping cart quantity specification always show active

Hello, Salmi,

Thank you for contacting us and for using XStore.

It is not a bug, because the same behavior is visible on our demos. Please post your request on this page – https://www.8theme.com/taskboard/ , so our dev team read it.

As a workaround, you can use the next custom CSS code (Global area):

.product_list_widget li:not(:hover) .quantity-wrapper {
    -webkit-transform: translateY(0px) !important;
    transform: translateY(0px);
    opacity: 1;
    visibility: visible;
    background-color: transparent !important;
}
.product_list_widget .quantity-wrapper .quantity > span, .product_list_widget .quantity-wrapper .quantity input[type="number"],
.header-wrapper .et-off-canvas .cart_list.product_list_widget .quantity-wrapper span {
    background-color: white !important;
}

and Theme Custom CSS > Mobile:

header .product_list_widget .quantity-wrapper.clearfix {flex-direction: column;}
header .product_list_widget .quantity-wrapper div.quantity>span {
    padding: 11px;
}
header .widget .product_list_widget li {
    height: 130px;
}

Kind Regards,
8theme team

Hello, Salmi,

.product_list_widget .quantity-wrapper {
    -webkit-transform: none;
    transform: none;
}

Kind Regards,
8theme team

Hello, Salmi,

Please try to change the previous code in Custom CSS code mobile to:

header .product_list_widget .quantity-wrapper.clearfix {flex-direction: row;background-color: white !important;}
header .product_list_widget .quantity-wrapper div.quantity span.minus,
header .product_list_widget .quantity-wrapper div.quantity span.plus {
    height: 50% !important;
    position: absolute;
    right: 0;
}
header .product_list_widget .quantity-wrapper div.quantity input[type=number] {
    border-left: 1px solid var(--et_border-color);
    min-width: 54px;
    padding-right: 24px;
}
header .product_list_widget .quantity-wrapper  span.plus {
    top: 0
}
header .product_list_widget .quantity-wrapper  span.minus {
    bottom: 0;
    border-top: none;
}
header  .product_list_widget .product-mini-image {
    margin-right: 15px;
}

Kind Regards,
8theme team

Hello, Salmi,

In this case, change 15px to 3px here https://prnt.sc/WgeEP_H0mq4n and 54px https://prnt.sc/hesa15yMr3Ug to 47px.

Kind Regards,
8theme team

Hello, Salmi,

Change right to left and left to right here – https://prnt.sc/Y8AePQW1Tw7i and change
header .product_list_widget .quantity-wrapper.clearfix {flex-direction: row;background-color: white !important;}
to

header .product_list_widget .quantity-wrapper.clearfix {
    flex-direction: row;
    background-color: white !important;
    display: flex;
}

You will get – https://prnt.sc/a-WpMwF2zOEC

Kind Regards,
8theme team

Hello, @salmi,

You’re very welcome! we are delighted to hear that everything is working as expected. If you need any further assistance or have any other questions, please don’t hesitate to contact us. We’re always here to help. Thank you for choosing our services!

Have a nice day!

This topic is now closed.

Best Regards,
8Theme’s Team.