Border On Cart

Hi @birthma

I understand that you want to add a border around the cart and the details of the items. You will need to add some custom CSS to your theme.

Here is a simple example of the custom CSS you can use which you can add to Appearance → Additional CSS:

/* Add a border around the cart table */
.woocommerce-cart table.cart {
    border: 1px solid #ccc; /* You can adjust the border style and color */
    border-collapse: collapse;
    width: 100%;
}

/* Optional: Add some padding to the table cells for spacing */
.woocommerce-cart table.cart td {
    padding: 10px;
}


/* Add a border around the cart totals section */
.woocommerce-cart .cart_totals {
    border: 1px solid #ccc; /* You can adjust the border style and color */
    padding: 20px; /* Add padding for spacing */
}

/* Add a border around the breakdown of items section */
.woocommerce-cart .cart-collaterals .cart_totals table {
    border: 1px solid #ccc; /* You can adjust the border style and color */
    padding: 0; /* Reset padding */
}

Please note that we can’t provide support for advanced code customization as per our support policy. Still, if you need customization, we do our best to offer advice and direct you to appropriate resources. Based on the feedback we get from our customers, we highly recommend contacting one of the services on our Customization page. On the other hand, I’ll keep this thread open, allowing other members of the community to contribute their expertise.

I hope it helps!

Thanks, that looks much better! Just one thing – the boarder is right up against the ‘subtotal’, ‘coupon code’, and ‘update cart’ sections which looks a bit funny. Is there a way to put a gap between them and the border? To visualise the above please add something to your cart and view the cart page. Thanks!

Hi @birthma

You want to have a little bit of margin or space from its sides, right? You can adjust the padding to 20px, 30px, 40px, or any size you prefer.

For example:

/* Optional: Add some padding to the table cells for spacing */
.woocommerce-cart table.cart td {
    padding: 20px;
}

From 10px, I changed it to 20px. You can also play around with the sizes from the provided code to match your preference.

I hope it helps!

Kind of but there are still some issues. I have added a screenshot below but to describe the issues:

1. The ‘subtotal’ heading is right against the border so that needs to be moved in etc.

2. The ‘Update cart’ button is right against the border so that needs to be moved in etc.

3. The ‘Coupon code’ box is right against the border so that needs to be moved in etc.

Hi @birthma

I believe I understand your concerns about your cart page’s layout, even though you didn’t attach a screenshot. To make the changes, could you please add this custom CSS to your site?

woocommerce-cart-form__contents:not(.elementor-menu-cart__products) .product-subtotal, .cart.wishlist_table:not(.elementor-menu-cart__products) .product-subtotal {
    padding-right: 17px;
  }
}

woocommerce-cart-form__contents:not(.elementor-menu-cart__products) .actions, .cart.wishlist_table:not(.elementor-menu-cart__products) .actions {
    padding: 17px;
  }
}

Once you’ve added the CSS mentioned above, here’s how it should look:

Click to see the screenshot if the image above doesn’t load: https://ibb.co/q7BV082

If this doesn’t quite match what you’re searching for, could you please share a screenshot? This will help us get a clearer understanding of what you need.

For screenshots, you may want to use https://snipboard.io – please follow the instructions on that page, then paste the URL in this thread.

Let us know how that goes. If you need further assistance, feel free to ask.

Hi Shameem!

Sorry about the screenshot, I thought I did.

Anyhow, the screenshot that you uploaded is exactly what I want it to look like! When I tried to put the above code into customising>additional CSS nothing changed. Not too sure why that is, do you have any ideas?

The full customising>Additional CSS code is:

.woocommerce-product-gallery__wrapper,
.woocommerce-placeholder.wp-post-image{
display: none !important;
}
{float: center}
/* Center align the form 4746094-zd / .product-page-container .product-summary { float: none !important; margin: 0 auto !important; } .woocommerce-product-gallery__wrapper, .woocommerce-placeholder.wp-post-image{ display: none !important; } .page-id-2142 .entry-title{ display:none; } @media ( min-width: 992px ) { .main-navigation ul.primary-navigation{ text-align: center; } } / Hide additional information tab */
li.additional_information_tab {
display: none !important;
}
.woocommerce-cart.cart-page-layout-1 .cart-collaterals {
float: none !important;
margin: 0 auto !important;
text-align: center;
}

/* Add a border around the cart table / .woocommerce-cart table.cart { border: 1px solid #ccc; / You can adjust the border style and color */
border-collapse: collapse;
width: 100%;
}

/* Optional: Add some padding to the table cells for spacing */
.woocommerce-cart table.cart td {
padding: 10px;
}

/* Add a border around the cart totals section / .woocommerce-cart .cart_totals { border: 1px solid #ccc; / You can adjust the border style and color / padding: 20px; / Add padding for spacing */
}

/* Add a border around the breakdown of items section / .woocommerce-cart .cart-collaterals .cart_totals table { border: 1px solid #ccc; / You can adjust the border style and color / padding: 0; / Reset padding */
}

Hello @birthma,

There are some commenting syntax errors in your current code, which explains why everything below the last line might not work.

Please remove all existing code, and add the one below. I didn’t include the snippets discussed in this thread, so please ensure you add those after the last line.

/* Hide product gallery and placeholder images */
.woocommerce-product-gallery__wrapper,
.woocommerce-placeholder.wp-post-image {
    display: none !important;
}

/* Center align the form with ID 4746094-zd */
.product-page-container .product-summary {
    float: none !important;
    margin: 0 auto !important;
}

/* Hide entry title on page with ID 2142 */
.page-id-2142 .entry-title {
    display: none;
}

/* Center align primary navigation on screens wider than 992px */
@media (min-width: 992px) {
    .main-navigation ul.primary-navigation {
        text-align: center;
    }
}

/* Hide additional information tab */
li.additional_information_tab {
    display: none !important;
}

/* Center align cart collaterals */
.woocommerce-cart.cart-page-layout-1 .cart-collaterals {
    float: none !important;
    margin: 0 auto !important;
    text-align: center;
}

/* Add a border around the cart table */
.woocommerce-cart table.cart {
    border: 1px solid #ccc; /* You can adjust the border style and color */
    border-collapse: collapse;
    width: 100%;
}

/* Optional: Add some padding to the table cells for spacing */
.woocommerce-cart table.cart td {
    padding: 10px;
}

/* Add a border around the cart totals section */
.woocommerce-cart .cart_totals {
    border: 1px solid #ccc; /* You can adjust the border style and color */
    /* padding: 20px; */ /* Optional: Add padding for spacing */
}

/* Add a border around the breakdown of items section */
.woocommerce-cart .cart-collaterals .cart_totals table {
    border: 1px solid #ccc; /* You can adjust the border style and color */
    /* padding: 0; */ /* Reset padding */
}

Let us know how it goes!

Hello, the above code did not work ?? The first table’s text (product, price, quantity, subtotal) is not rescaling to fit inside the box with any of the above codes. I’m sure the above is correct and I’m doing something wrong so I’ll close this thread. Thanks anyway!