[Support request] Woocommerce Cart Enhancements (Second Version)

[Roberto Enrique]

While waiting until woocommerce’s new cart block gets 100% finished, I’ve updated the approach to display what’s in my opinion a nicer cart as shown in this thread:
https://generatepress.com/forums/topic/my-mods-for-woocommerce/

The design is a bit different but it suits perfectly my current needs even if it is not exactly like the Flatsome cart.

here’s the before:

and here’s the After:

And the css to get there:

@media(max-width:768px) {

    /*Let's FlexBox it*/
    .woocommerce table.shop_table_responsive tr,
    .woocommerce-page table.shop_table_responsive tr {
        display: flex;
        max-width: 100%;
        flex-wrap: wrap;
        box-sizing: border-box;
        border-bottom: 1px solid #d6d6d6;
        position: relative;
        margin-bottom: 20px;
        background: #f9f9f9;
        box-shadow: 0px 0px 5px #d7d7d7;
        border-radius: 10px;
    }

    /*Removing Borders*/
    .woocommerce table.shop_table td {
        border-bottom: 0;
    }

    /*Tweaking Padding*/
    .woocommerce table.shop_table td,
    .woocommerce table.shop_table th {
        padding: 10px;
    }

    /*Reset alignment*/
    .woocommerce table.shop_table_responsive tr td,
    .woocommerce-page table.shop_table_responsive tr td {
        text-align: left !important;
    }

    /*Remove Alternate Shading*/
    .woocommerce table.shop_table_responsive tr:nth-child(2n) td,
    .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td {
        background-color: transparent;
    }

    /*Display the images*/
    .woocommerce #content table.cart .product-thumbnail,
    .woocommerce table.cart .product-thumbnail,
    .woocommerce-page #content table.cart .product-thumbnail,
    .woocommerce-page table.cart .product-thumbnail {
        display: block !important;
    }

    /*Tweaking the image width*/
    #add_payment_method table.cart img,
    .woocommerce-cart table.cart img,
    .woocommerce-checkout table.cart img {
        width: 70px;
    }

    /*Removing the "::befores" when needed*/
    .woocommerce #content table.cart .product-thumbnail::before,
    .woocommerce table.cart .product-thumbnail::before,
    .woocommerce-page #content table.cart .product-thumbnail::before,
    .woocommerce-page table.cart .product-thumbnail::before,
    td.product-name::before,
    td.product-quantity:before {
        display: none;
        display: none;
    }
    /*When ::before is on, smaller text*/
    .woocommerce table.shop_table_responsive tr td::before,
    .woocommerce-page table.shop_table_responsive tr td::before {
        font-size: 15px;
        margin-right: 5px;
    }

    /*Add some info text to remove button*/
    td.product-remove a::before {
        content: 'Rimuovi' !important;
        display: block !important;
        color: #7f6e6e;
        position: absolute;
        left: -50px;
        font-weight: normal !important;
        font-size: 12px;
    }

    /*Absolute positioning of the remove icon*/
    td.product-remove {
        padding: 0 !important;
        position: absolute;
        top: 5px;
        right: 5px;
    }

    /*Change color of remove icon*/
    .woocommerce a.remove {
        color: #7f6e6e !important;
        border: 1px solid #7f6e6e !important;
    }

    /*Need to work on this*/
    td.product-name {
        display: block;
        width: 100%;
    }

    /*Less space between product picture and Product Title*/
    .woocommerce table.shop_table_responsive tr td.product-thumbnail,
    .woocommerce-page table.shop_table_responsive tr td.product-thumbnail {
        padding-bottom: 0;
    }

    .woocommerce table.shop_table_responsive tr td.product-name,
    .woocommerce-page table.shop_table_responsive tr td.product-name {
        padding-top: 5px;
    }
    /*Centering the Price with the Quantity Buttons*/
    .woocommerce table.shop_table_responsive tr td.product-price,
    .woocommerce-page table.shop_table_responsive tr td.product-price {
        padding-top: 24px;
    }

    /*Making the Subtotal allways 100% so it stays at the bottom part*/
    .woocommerce table.shop_table_responsive tr td.product-subtotal,
    .woocommerce-page table.shop_table_responsive tr td.product-subtotal {
        min-width: 100%;
    }

    /*Reset the quantity buttons alignment*/
    .woocommerce-cart table.cart .do-quantity-buttons div.quantity {
        justify-content: flex-start;
    }

}

I hope you find it useful.

And as always, big thanks to the GP team for providing such a wonderful theme.

[Ying]

Hi Roberto,

Nice design, thank you very much for sharing, I’m sure Woocommerce users will find it’s helpful 🙂

[Author]

Posts