Home › Forums › Air WordPress Theme › Woocommerce cart too wide on mobile

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • May 25, 2020 at 8:56 am #21380
    Carlo
    Participant
    Purchased
    Expired

    Dear support,

    The Woocommerce cart is too wide on mobile devices.

    This is my product page: https://afvalleniskut.nl/product/het-boek-afvallen-is-kut/. If you click on the “in winkelmand” button at the top, you will go the the shopping cart page and see that the subtotal table is to wide. It also misses the product icon.

    Can you help me fix this?

    Thank you in advance,

    Carlo

    Icon WordPress Customization Service from $49 Only! Save your expensive time!

    May 25, 2020 at 9:49 am #21381
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    Thank you for purchasing our theme.

    Please paste the custom CSS code to “Appearance > Customize: Additional CSS”:

    .woocommerce-page table.shop_table tbody td.product-name  {
    display: table-cell;
}

    Regards!

    SeaTheme – SeaTheme.net – Twitter – Facebook

    Icon WordPress Customization Service from $49 Only! Save your expensive time!

    May 25, 2020 at 10:00 am #21384
    Carlo
    Participant
    Purchased
    Expired

    Hi,

    The tabel now shows the product name, so that solves the missing product icon for me.

    The table is however still to wide to fit on the mobile screen.

    Is there an option to adjust the table so it fits the mobile screen?

    Thank you,

    Carlo

    Icon WordPress Customization Service from $49 Only! Save your expensive time!

    May 25, 2020 at 1:50 pm #21386
    SeaTheme
    Keymaster
    Purchased
    Expired

    Please paste the custom CSS code to “Appearance > Customize: Additional CSS”:

    @media (max-width: 767px){
 .woocommerce table.shop_table th, .woocommerce-page table.shop_table th, .woocommerce table.shop_table td, .woocommerce-page table.shop_table td {
    padding: 10px 5px;
 }
.woocommerce-page a.remove, .woocommerce a.remove {
    width: 16px;
    height: 16px;
    line-height: 18px;
   margin-right: 0;
 }
}

    Best

    Icon WordPress Customization Service from $49 Only! Save your expensive time!

    May 25, 2020 at 7:39 pm #21391
    Carlo
    Participant
    Purchased
    Expired

    That did not safe enough space to make the table fit the screen. I looked into other solutions that made the table responsive. However, it did not look too good. So I decided to go with a simple scroll implementation. I’m sharing it, so others can benefit from it too.

    It make the table scrollable on smaller screens and it give the hint after the table that you can scroll:

    @media screen and (max-width: 767px) {
	.woocommerce table.shop_table:first-child {
		width: 100%;
		-webkit-overflow-scrolling: touch;
		overflow-x: auto;
		display: block;
		margin-bottom: 30px;
		padding: 0px;
	}
	.woocommerce table.shop_table:first-child::after {
		content: "scroll to the right for more >>>";
		margin-left: 10px;
		font-style: italic;
		font-size: 12px;
	}
}

    Icon WordPress Customization Service from $49 Only! Save your expensive time!

    May 25, 2020 at 7:45 pm #21392
    Carlo
    Participant
    Purchased
    Expired

    PS if you have or find a solution where the table is redesigned to fit smaller screens (products listed below each other with features like remove and increase amount integrated), please let me know. I would still prefer such an implementation.

    Icon WordPress Customization Service from $49 Only! Save your expensive time!

    May 26, 2020 at 2:54 am #21395
    SeaTheme
    Keymaster
    Purchased
    Expired

    Thanks for sharing 🙂
    We will.

    Icon WordPress Customization Service from $49 Only! Save your expensive time!

    May 29, 2020 at 5:15 am #21445
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    I found a solution here, I modified a little place to fit our theme, the custom CSS for cart only:

    @media screen and (max-width: 767px) {

/* Force table to not be like tables anymore */
.woocommerce-page table.shop_table,
.woocommerce-page table.shop_table thead,
.woocommerce-page table.shop_table tbody,
.woocommerce-page table.shop_table th,
.woocommerce-page table.shop_table td,
.woocommerce-page table.shop_table tr {
    display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
.woocommerce-page table.shop_table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

.woocommerce-page table.shop_table tr {
    /*border: 1px solid #d2d3d3; */
}

.woocommerce-page table.shop_table td {
    /* Behave like a "row" */
        border: 1px solid #d2d3d3;
    position: relative;
    padding-top: 5px;
    text-align: left!important;
    padding-left: 40% !important;
}

.woocommerce-page table.shop_table {
    border: none;
}

.woocommerce-page table.shop_table td.product-spacer {
    border-color: #FFF;
    height: 10px;
}

.woocommerce-page table.shop_table td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 25%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
}

/*
Label the data
*/
.woocommerce-page table.shop_table td.product-remove:before {
    content: "DELETE";
}

.woocommerce-page table.shop_table td.product-thumbnail:before {
    content: "IMAGE";
}

.woocommerce-page table.shop_table td.product-name:before {
    content: "PRODUCT";
}

.woocommerce-page table.shop_table td.product-price:before {
    content: "PRICE";
}

.woocommerce-page table.shop_table td.product-quantity:before {
    content: "QUANTITY";
}

.woocommerce-page table.shop_table td.product-subtotal:before {
    content: "SUBTOTAL";
}

.woocommerce-page table.shop_table td.product-total:before {
    content: "TOTAL";
}

.woocommerce .quantity,
.woocommerce #content .quantity,
.woocommerce-page .quantity,
.woocommerce-page #content .quantity {
    margin: 0;
}

.woocommerce-page table.cart td.actions,
.woocommerce-page #content table.cart td.actions {
    text-align: left;
    border:0;
    padding-left: 6px !important;
}

.woocommerce-page table.cart td.actions .button.alt,
.woocommerce-page #content table.cart td.actions .button.alt {
    float: left;
    margin-top: 10px;
}

.woocommerce-page table.cart td.actions div,
.woocommerce-page #content table.cart td.actions div,
.woocommerce-page table.cart td.actions input,
.woocommerce-page #content table.cart td.actions input {
    margin-bottom: 10px;
}

.woocommerce-page .cart-collaterals .cart_totals {
    float: left;
    width: 100%;
    text-align: left;
}

.woocommerce-page .cart-collaterals .cart_totals th,
.woocommerce-page .cart-collaterals .cart_totals td {
    border:0 !important;
}

.woocommerce-page .cart-collaterals .cart_totals table tr.cart-subtotal td,
.woocommerce-page .cart-collaterals .cart_totals table tr.shipping td,
.woocommerce-page .cart-collaterals .cart_totals table tr.total td {
    padding-left: 6px !important;
}

.woocommerce-page table.shop_table tr.cart-subtotal td,
.woocommerce-page table.shop_table tr.shipping td,
.woocommerce-page table.shop_table tr.total td,
.woocommerce-page table.shop_table.order_details tfoot th,
.woocommerce-page table.shop_table.order_details tfoot td {
    padding-left: 6px !important;
    border:0 !important;
}

.woocommerce-page table.shop_table tbody {
    padding-top: 10px;
}
}

    For the language-translation question, we cannot put it in the theme for now. You could put it into (“Appearance > Customize: Additional CSS”)

    Best

    Icon WordPress Customization Service from $49 Only! Save your expensive time!

    May 29, 2020 at 1:13 pm #21450
    Carlo
    Participant
    Purchased
    Expired

    I like it even better than the scroll option. I’ll go with this one. Thank you ?

    Icon WordPress Customization Service from $49 Only! Save your expensive time!

    May 29, 2020 at 1:17 pm #21451
    Carlo
    Participant
    Purchased
    Expired

    PS it however breaks the table on the check-out page a little…

    Icon WordPress Customization Service from $49 Only! Save your expensive time!

    May 30, 2020 at 2:23 am #21454
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    Updated the CSS:

    @media screen and (max-width: 767px) {

/* Force table to not be like tables anymore */
.woocommerce-page table.shop_table.cart,
.woocommerce-page table.shop_table.cart thead,
.woocommerce-page table.shop_table.cart tbody,
.woocommerce-page table.shop_table.cart th,
.woocommerce-page table.shop_table.cart td,
.woocommerce-page table.shop_table.cart tr {
    display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
.woocommerce-page table.shop_table.cart thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

.woocommerce-page table.shop_table.cart tr {
    /*border: 1px solid #d2d3d3; */
}

.woocommerce-page table.shop_table.cart td {
    /* Behave like a "row" */
        border: 1px solid #d2d3d3;
    position: relative;
    padding-top: 5px;
    text-align: left!important;
    padding-left: 40% !important;
}

.woocommerce-page table.shop_table.cart {
    border: none;
}

.woocommerce-page table.shop_table.cart td.product-spacer {
    border-color: #FFF;
    height: 10px;
}

.woocommerce-page table.shop_table.cart td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 25%;
    padding-right: 10px;
    white-space: nowrap;
    text-align: left;
}

/*
Label the data
*/
.woocommerce-page table.shop_table.cart td.product-remove:before {
    content: "DELETE";
}

.woocommerce-page table.shop_table.cart td.product-thumbnail:before {
    content: "IMAGE";
}

.woocommerce-page table.shop_table.cart td.product-name:before {
    content: "PRODUCT";
}

.woocommerce-page table.shop_table.cart td.product-price:before {
    content: "PRICE";
}

.woocommerce-page table.shop_table.cart td.product-quantity:before {
    content: "QUANTITY";
}

.woocommerce-page table.shop_table.cart td.product-subtotal:before {
    content: "SUBTOTAL";
}

.woocommerce-page table.shop_table.cart td.product-total:before {
    content: "TOTAL";
}

.woocommerce .quantity,
.woocommerce #content .quantity,
.woocommerce-page .quantity,
.woocommerce-page #content .quantity {
    margin: 0;
}

.woocommerce-page table.cart td.actions,
.woocommerce-page #content table.cart td.actions {
    text-align: left;
    border:0;
    padding-left: 6px !important;
}

.woocommerce-page table.cart td.actions .button.alt,
.woocommerce-page #content table.cart td.actions .button.alt {
    float: left;
    margin-top: 10px;
}

.woocommerce-page table.cart td.actions div,
.woocommerce-page #content table.cart td.actions div,
.woocommerce-page table.cart td.actions input,
.woocommerce-page #content table.cart td.actions input {
    margin-bottom: 10px;
}

.woocommerce-page .cart-collaterals .cart_totals {
    float: left;
    width: 100%;
    text-align: left;
}

.woocommerce-page .cart-collaterals .cart_totals th,
.woocommerce-page .cart-collaterals .cart_totals td {
    border:0 !important;
}

.woocommerce-page .cart-collaterals .cart_totals table tr.cart-subtotal td,
.woocommerce-page .cart-collaterals .cart_totals table tr.shipping td,
.woocommerce-page .cart-collaterals .cart_totals table tr.total td {
    padding-left: 6px !important;
}

.woocommerce-page table.shop_table.cart tr.cart-subtotal td,
.woocommerce-page table.shop_table.cart tr.shipping td,
.woocommerce-page table.shop_table.cart tr.total td,
.woocommerce-page table.shop_table.order_details tfoot th,
.woocommerce-page table.shop_table.order_details tfoot td {
    padding-left: 6px !important;
    border:0 !important;
}

.woocommerce-page table.shop_table.cart tbody {
    padding-top: 10px;
}
	.woocommerce-cart table.shop_table.cart {
		border-bottom:2px solid;
	}
}

    Icon WordPress Customization Service from $49 Only! Save your expensive time!

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.