WooCommerce Update Variations In Cart not responsive on Mobile

Hi Support,

I am having problem with the plugin WooCommerce Update Variations In Cart. When I try to change the variation in cart on mobile, the product moves away from the screen and I can no longer choose the new variation. Will you please have a look at the below link on smaller screen and support.
Please note that the variation change works good on PC.

Thanks.

Attachments:

You must be logged in to view attached files.

Hi,

Try to add the following code snippet to the Mobile Custom CSS area in Theme Settings to fix this issue.

.woocommerce-cart-form__contents tr:not(.woocommerce-cart-form__cart-item) {
  padding-left: 0;
}
.woocommerce-cart-form__contents tr:not(.woocommerce-cart-form__cart-item) tr {
  border-bottom: none;
  min-height: auto;
}
.woocommerce-cart-form__contents tr:not(.woocommerce-cart-form__cart-item) td {
  display: table;
  width: 100% !important;
  text-align: left;
}
.woocommerce-cart-form__contents tr:not(.woocommerce-cart-form__cart-item) td td.label {
  border-bottom: 0;
}
.woocommerce-cart-form__contents tr:not(.woocommerce-cart-form__cart-item) td .variations {
  width: 100%;
  margin-bottom: 0;
}

Regards

Hi Bogdan,

Thank you very much for looking into this problem and sharing the code.

It worked very well on portrait screen, however, I see that the alignment is not good when we have the phone in landscape. Please see the attached picture, we can see that the variation drop down is aligned on the right side as well as the color attribute. Will you please check this as well and probably change it towards the middle? This will make this consistent.

Also, I am facing another problem with this plugin, when I have swatches to choose from, I am unable to change any swatch in the variation on the cart page. For swatch selection, I have a test product shown below in private content. Please note that the swatch change doesn’t work on Desktop or mobile phone.

Thanks.

Attachments:

You must be logged in to view attached files.

Hi,

1. Theme settings => Custom CSS Menu contains several forms. Please paste code in Custom CSS for mobile landscape.

2. Our theme coloured swatches work only on products single page and products archive. To make it work on cart try to use the following custom code.

.cart-table-section .swatches-select {
  display: none;
}

.cart-table-section .with-swatches select {
  display: block;
}

.cart-table-section .with-swatches .reset_variations {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
}

Regards

Hi Bogdan,

Thanks a lot for sharing the details.

I applied the code in section 2 to global CSS and now I can’t see the swatches in cart area. I will keep the code there for now in case if you want to have a look.

Thanks.

Attachments:

You must be logged in to view attached files.

Hi,

Try to replace previous code with the following:

.cart-table-section .swatches-select {
  display: none;
}

.cart-table-section .variations .with-swatches select {
  display: block;
}

.cart-table-section .with-swatches .reset_variations {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
}

Regards

Hi Bogdan,

Thank you very much for your prompt response.

I see the values now as a drop down and am able to select the new value as well. Is it possible to make it work with swatches? Its alright if it is not possible, just asking.

Thanks,

Attachments:

You must be logged in to view attached files.

As we mentioned before our theme coloured swatches work only on product single page and products archive.

Plugin cart variation select can be achieved only with default WooCommerce dropdown that was done by previous custom code.

Regards

Great. Thanks for your help Bogdan. We can close this topic.

You are welcome!

[Author]

Posts