Checkout page table deformed! (using onepage checkout plugin)

Support
#1

Hi! I’m trying to do it with css by I’m having a lot of difficulties with the css of this page in particular: https://www.edinventa.com/checkout/

My first approach has been resizing the texts of the table to font-size:1rem; (I did with Chrome inspector, but I wasn’t able to make it work when adding it to the global css section).

But the table is still deformed. Do you know why? :confused:

#2

Hi,

You can try adjusting the width as well.

Add the code below in Theme Options > CSS

.shop_table.woocommerce-checkout-review-order-table .product-name {
		width:70%;
                min-width:200px;
	}

	.shop_table.woocommerce-checkout-review-order-table .product-quantity {
		width: 30%;
		min-width:100px;
	}

        .shop_table.woocommerce-checkout-review-order-table th {
		font-size:20px;
        }

	.shop_table.woocommerce-checkout-review-order-table td {
		font-size:18px;
        }

You may change the values to adjust.

Hope that helps.

#3

Hi. Thanks for your help!

The first row seems perfect, but the value of the quantity (second row) is at a very weird place yet (see image below). Any other idea?? :slight_smile:

Thanks very much!!!

Carlos

#4

Hello @educainventions,

Thanks for updating the thread. :slight_smile:

Please add following CSS under Pro > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    #order_review .opc_cart_item td.product-name {
    padding: 0 !important;
}
.shop_table.woocommerce-checkout-review-order-table .product-quantity {
    width: auto !important;
    min-width: 50px !important;
}


.shop_table.woocommerce-checkout-review-order-table td {
    font-size: 16px !important;
}
}

Thanks.

#5

I changed the previous code with the new one. The head of the table is broken.

The box to enter the quantity is also broken. This table is a disaster! :smiley:

Thanks for your help. Here you can see a screenshot:

#6

Hello There,

Please update the css and use this:

@media only screen and (max-width: 600px) {
  #order_review .opc_cart_item td.product-name {
    padding: 0 !important;
  }

  .shop_table.woocommerce-checkout-review-order-table .product-quantity {
    width: auto !important;
    min-width: 50px !important;
  }


  .shop_table.woocommerce-checkout-review-order-table td {
    font-size: 16px !important;
  }

  .shop_table.woocommerce-checkout-review-order-table th{
    font-size: 18px;
  }
}

Hope this helps.

#7

This is almost perfect. I’m so happy!! :smiley: :smiley: :smiley:

Thank uuuu

There is only one little thing to fix (I hope it’s little thing xD). The products overflow the quantity. Is there any way to break it if the width of the text is wider than a given value?

Here an screenshot about how it looks now:

#8

Hi There,

Please update the previous CSS to this:

@media only screen and (max-width: 600px) {
  #order_review .opc_cart_item td.product-name {
    padding: 0 !important;
  }

  .shop_table.woocommerce-checkout-review-order-table .product-quantity {
    width: auto !important;
    min-width: 50px !important;
    display: block;
    float: none;
  }


  .shop_table.woocommerce-checkout-review-order-table td {
    font-size: 16px !important;
  }

  .shop_table.woocommerce-checkout-review-order-table th{
    font-size: 18px;
  }
}

Let us know how it goes!

#9

Very creative solution. Just removing the Quantity label in mobile. Perfect!!!

Thanks very much :slight_smile:

Here how it looks now:

#10

Hey There,

If you want to remove the quantity, you can add this code:

.woocommerce .cart_item .quantity .input-text {
    display: none;
}

So the final code would be this:

@media only screen and (max-width: 600px) {
  #order_review .opc_cart_item td.product-name {
    padding: 0 !important;
  }

  .shop_table.woocommerce-checkout-review-order-table .product-quantity {
    width: auto !important;
    min-width: 50px !important;
    display: block;
    float: none;
  }


  .shop_table.woocommerce-checkout-review-order-table td {
    font-size: 16px !important;
  }

  .shop_table.woocommerce-checkout-review-order-table th{
    font-size: 18px;
  }

  .woocommerce .cart_item .quantity .input-text {
    display: none;
  }
}

Hope this helps. Kindly let us know.

#11

No, no. Your previous solution was perfect for me. But thank you one more time for all your help you provide!!! :slight_smile:

#12

You’re welcome!
We’re glad we were able to help you out.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.