Remove line break between attribute name and value

Hi, currently attributes and their values are shown with line breaks on cart widget, cart page and checkout page. This is not evident when checking you demo site because you’re not using products with two or more selectable attributes. But this is a real problem for shop owners who have products with several selectable attributes. They just take too much space, are difficult to read and look ugly. Please help me remove line breaks and show attribute name and value in one line.
Instead of this

Colour:
Red

I need this
Colour: Red

Here the examples of what I’m talking about:
1) cart widget https://prnt.sc/qbzyuw
2) cart page https://prnt.sc/qbzz1l
3) checkout page https://prnt.sc/qbzzcw

Hello,

Actually those attributes designed in this way to display with a line break so they shown more prominent. So in theme settings there is no such option to display them without line break.

You can use the below CSS code in global custom CSS area under theme settings >> custom CSS:

.woocommerce-cart-form__contents td.product-name p{
display:inline;
}

.cart-info .variation li span p{
display:inline;
}

.woocommerce-checkout-review-order-table td.product-name p{
display:inline;
}

I have test this CSS code at my test site and it works just fine you can check the result in below screenshots.

Result of Sidebar Cart: https://jmp.sh/EB388f9

Result of Cart Page: https://jmp.sh/UlfFC24

Result of Checkout Page: https://jmp.sh/ElZ0GVT

Best Regards.

Just what I needed. Thank you very much!

Most Welcome :)

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts