Home Forums Air WordPress Theme Woocommerce cart too wide on mobile

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #21380
    Carlo
    Participant
    Purchased

    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

    • This topic was modified 1 month, 3 weeks ago by SeaTheme.
    #21381
    SeaTheme
    Keymaster
    Purchased

    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.netTwitterFacebook

    #21384
    Carlo
    Participant
    Purchased

    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

    #21386
    SeaTheme
    Keymaster
    Purchased

    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

    #21391
    Carlo
    Participant
    Purchased

    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;
    	}
    }
    #21392
    Carlo
    Participant
    Purchased

    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.

    #21395
    SeaTheme
    Keymaster
    Purchased

    Thanks for sharing 🙂
    We will.

    #21445
    SeaTheme
    Keymaster
    Purchased

    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

    • This reply was modified 1 month, 2 weeks ago by SeaTheme.
    #21450
    Carlo
    Participant
    Purchased

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

    #21451
    Carlo
    Participant
    Purchased

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

    #21454
    SeaTheme
    Keymaster
    Purchased

    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;
    	}
    }
    • This reply was modified 1 month, 2 weeks ago by SeaTheme.
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!