[arhyarion]

I tried some things, and I'm part of the way there - but I think the PHP output is such that I can't target the coupon code itself separate from the "Coupon:" label. Likewise for the shipping rate/label and the destination.

[arhyarion]

I got the answer from another forum. Sharing for the sake of others.

.woocommerce table.shop_table tfoot td {
text-align:right;
}

[arhyarion]

I received a reply from StudioPress that resolved these problems for me.

They sent me the following code to add to my Additional CSS:

.product-name {
    word-break: normal;
}

@media only screen and (max-width: 768px) {
.woocommerce-page table.cart td.actions .coupon .button {
width: 100%
   }
}

This resolved the issue with words breaking in the middle, and the Apply Coupon button. It did not fix the problem with the Subtotal column and the prices.

However, I modified one of the pieces of code they sent to the following:

.product-name {
    word-break: normal;
    width: 65%;
}

Making the product name a bit narrower fixed the formatting for the other column.

So that being the case, these specific issues are resolved. Sharing the solution so that hopefully others might benefit.

[arhyarion]

image links didn't work properly :-/

https://imgur.com/clT330b
https://imgur.com/8a2Zees
https://imgur.com/ROHo8j6

[arhyarion]

Thanks rawsta! The .site-header.dark modification is exactly what I was after!

[arhyarion]

Thanks for the reply Victor.

I found an alternative solution that works almost exactly the way I need.
I followed the Carrie Dils tutorial to add a utility bar.
On mobile it looks and behaves exactly the way I want it to. On desktop though, there is a strange looking gap at the top when I start to scroll down the page.

Is there anything I can do - either with CSS or javascript - to make it so the utility bar and navigation bar scroll up together at the same rate and have the black edge of navigation bar stop at the top of the screen?

[Author]

Posts