WooCommerce Thumbnails not shown on mobile devices in cart

Hey Karin,

Thank you for the inquiry.

The product image in the cart dropdown is displaying correctly on our end. Please check the screenshot below (see private field). Is it only happening when adding a certain product?

Best regards,
Ismael

Hi,

Thank you for the clarification.

Looks like the cart item or cart row requires a bit of style adjustment. Please add this css code in the Quick CSS field or in the style.css file.

@media screen and (max-width: 767px) {
    .woocommerce .shop_table .woocommerce-cart-form__cart-item td::before {
      display: none;
    }
  
    .woocommerce-cart-form__cart-item {
      display: flex;
    }
  
    .woocommerce-cart-form__cart-item .remove {
      left: 50%;
      top: 50%;
      transform: translate(50%, 50%);
      text-indent: 9999px;
    }
  
    .responsive table.shop_table.cart .product-name {
      padding: 3px 10px 3px 3px;
      border-right: 1px solid;
    }
  }

The cart item should look like this after adding the css.

Screenshot: https://1drv.ms/u/s!AjjTfXSRbKTvwAQaC1FRsHpgeidM

Did you install a plugin to extend the functionality of the cart? It might have affected the default layout of the cart page.

Best regards,
Ismael

Hi Karin,

Could you please try copying the code from here – https://pastebin.com/JkarSiAb and check if that helps?

Regards,
Yigit

Hi,

Thank you for the update.

Did you enable the Enfold > Performance > File Compression settings? Please try to disable it temporarily, then purge the cache. Or post the login details in the private field so that we can test the modification.

Best regards,
Ismael

Hi,

Thank you for the info.

You can use the email address below for the new admin account, but please make sure to generate the username and password on your end because we don’t have access to that email address.

Did you add the code in the Quick CSS field? It is possible that there are invalid css code in that field which requires some adjustment.

Best regards,
Ismael

Hi,

Thank you for the access.

We adjusted the css code in the Quick CSS field and temporarily disable the file compression settings. The cart page should now look exactly the same as the screenshot above. Please make sure to purge the cache before checking the page on mobile view.

This is the updated code in the Quick CSS field.

/* Kreditkartenfeld responsive */
@media screen and (max-width: 767px) {
  .woocommerce table.shop_table thead {
    display: none;
  }

  .woocommerce table.shop_table td {
    display: block;
    text-align: right !important;
    border: 0px;
  }

  .woocommerce table.shop_table td::before {
    content: attr(data-title) ": ";
    font-weight: 700;
    float: left;
  }

  .woocommerce table.shop_table_responsive thead,
  .woocommerce-page table.shop_table_responsive thead {
    display: none;
  }

  .woocommerce table.shop_table_responsive tr td::before,
  .woocommerce-page table.shop_table_responsive tr td::before {
    content: attr(data-title) ": ";
    font-weight: 700;
    float: left;
  }

  .woocommerce table.shop_table_responsive tr td,
  .woocommerce-page table.shop_table_responsive tr td {
    display: block;
    text-align: right !important;
  }

  #top #payment div.form-row {
    padding-left: 0px !important;
  }

  /* Target the Credit Card */
  #stripe-card-element {
    width: 200px !important;
    margin-left: -20px;
  }

  /* Target the Expiry Date */
  .woocommerce-checkout-review-order #stripe-exp-element {
    background: #ffffff !important;
    margin: 5px 0px !important;
    padding: 10px 5px !important;
  }

  /* Target the CVC Code */
  .woocommerce-checkout-review-order #stripe-cvc-element {
    background: #ffffff !important;
    margin: 5px 0px !important;
    padding: 10px 5px !important;
    margin-left: -20px;
  }

  .responsive table.shop_table.cart .product-thumbnail {
    display: block !important;
  }

  .woocommerce .shop_table .woocommerce-cart-form__cart-item td::before {
    display: block;
  }

  .responsive #top table .product-name,
  .responsive #top table .product-price {
    border-color: #c4c4c4;
  }

  .woocommerce-cart-form__cart-item {
    border-bottom: 1px solid;
  }

  .woocommerce .shop_table .woocommerce-cart-form__cart-item .product-price::before,
  .woocommerce .shop_table .woocommerce-cart-form__cart-item .product-name::before {
    display: block;
  }

  .woocommerce .shop_table .woocommerce-cart-form__cart-item.actions::before {
    displaY: none;
  }
}

Best regards,
Ismael

Hi,

Glad to know that it is displaying correctly now. It might need a few adjustments but we are quite sure that you can handle it. Please feel free to open another thread if you need anything else.

Have a nice day.

Best regards,
Ismael