Mobile Cart Page

  • Resolved floramaison

    (@floramaison)


    3 years ago

    Hi, on my computer version the cart out page is a table with price, quantity and Subtotal. However, on my mobile page, that table is gone and its left with just the price and the subtotal without even the words and the quantity box just in the middle. Here is a picture of what I mean.

    Mobile Cart Out Page

    If anyone could please assist me on this please. How am I suppose to add back the words of Price, Quantity, Subtotal or at least make sense of my mobile cart out page. Would really really appreciate the help.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • mrtom414

    (@mrtom414)

    it looks ok to me on the bliss doesn’t have any description so there is nothing to display except the name. The name is visible and that is what you have. All the items you have that contain a description display it.

    Thread Starter floramaison

    (@floramaison)

    There are 2 sudden price tags and an quantity box in the middle out of no where. So that would be rather confusing I guess. Not of the description. But more of the price + quantity box + subtotal. Believe they may actually be a table. But, not sure what to do about the alignment

    Vijay Hardaha

    (@vijayhardaha)

    You can either contact the theme devs to get this done. Or you can add this custom CSS that I optimized for your website

    @media only screen and (max-width: 768px) {
  .woocommerce-cart table.shop_table.cart thead {
    display: none;
  }

  .woocommerce-cart table.shop_table.cart tbody tr:first-child td:first-child {
    border-top: 0;
  }

  .woocommerce-cart table.shop_table.cart tbody th {
    display: none;
  }

  .woocommerce-cart table.shop_table.cart tr {
    display: block;
  }

  .woocommerce-cart table.shop_table.cart tr td {
    display: block;
    padding: 0 0 10px 0;
    text-align: right !important;
  }

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

  .woocommerce-cart table.shop_table.cart tr td.product-thumbnail,
  .woocommerce-cart table.shop_table.cart tr td.order-actions {
    text-align: left !important;
  }

  .woocommerce-cart table.shop_table.cart tr td.product-remove::before,
  .woocommerce-cart table.shop_table.cart tr td.product-thumbnail::before,
  .woocommerce-cart table.shop_table.cart tr td.actions::before {
    display: none;
  }

  .woocommerce-cart table.shop_table.cart tr td.product-price,
  .woocommerce-cart table.shop_table.cart tr td.product-quantity,
  .woocommerce-cart table.shop_table.cart tr td.product-subtotal {
    width: 100%;
    display: block;
    margin: 0;
  }

  .woocommerce-cart table.shop_table.cart tr td.product-remove {
    top: 32px;
  }

  .woocommerce-cart table.shop_table.cart tr td.product-remove a {
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    text-indent: 0 !important;
    color: #fff !important;
    background: #544e48 !important;
    font-size: 20px !important;
  }

  .woocommerce-cart table.shop_table.cart tr div.quantity {
    width: 3.625rem;
  }

  .woocommerce-cart table.shop_table.cart tr div.quantity input.qty {
    padding-right: 0 !important;
  }
}
    Vijay Hardaha

    (@vijayhardaha)

    Hers is SCSS code if you have to adjust changes in CSS

    .woocommerce-cart {
  @media only screen and (max-width: 768px) {
    table.shop_table.cart {
      thead {
        display: none;
      }

      tbody {
        tr {
          &:first-child {
            td {
              &:first-child {
                border-top: 0;
              }
            }
          }
        }

        th {
          display: none;
        }
      }

      tr {
        display: block;

        td {
          display: block;
          padding: 0 0 10px 0;
          text-align: right !important;
          &::before {
            float: left;
            content: attr(data-title) ": ";
            font-weight: 700;
          }
        }

        td.product-thumbnail,
        td.order-actions {
          text-align: left !important;
        }

        td.product-remove,
        td.product-thumbnail,
        td.actions {
          &::before {
            display: none;
          }
        }
        td.product-price,
        td.product-quantity,
        td.product-subtotal {
          width: 100%;
          display: block;
          margin: 0;
        }
        td.product-remove {
          top: 32px;
          a {
            width: 32px !important;
            height: 32px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            margin: 0 !important;
            text-indent: 0 !important;
            color: #fff !important;
            background: #544e48 !important;
            font-size: 20px !important;
          }
        }
        div.quantity {
          width: 3.625rem;
          input.qty {
            padding-right: 0 !important;
          }
        }
      }
    }
  }
}

    you can convert SCSS to CSS from here
    https://www.sassmeister.com/

    Note: don’t add SCSS code into additional CSS on your WordPress website.

    Thread Starter floramaison

    (@floramaison)

    oh man it works. Just left with a little of the alignment issues still which is minor issues. Thank you so much!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Mobile Cart Page’ is closed to new replies.