-
Hi, wondered if you could offer any help with a WooCommerce button issue on the product archive pages (as per the link attached). So, I’d like to display the 2 buttons ‘View’ and ‘Add’ on the same line next to eachother, with a 47.5% width each. I’ve tried to use display: inline-block with no luck, and cannot use flex as there’s no wrapping container around the buttons. Wondered if you could work your magic! Thanks, David
-
Hi there,
you could do something like this:
#wc-column-container .product { flex-direction: row; flex-wrap: wrap; gap: 1px; } #wc-column-container * { flex-basis: 100%; } #wc-column-container a:not(:first-of-type) { flex: 1 1 calc(50% - 1px); }Or this:
#wc-column-container .product { flex-direction: row; flex-wrap: wrap; gap: 1px; } #wc-column-container * { flex-basis: 100%; } #wc-column-container a:nth-of-type(2) { flex: 0 1 0; } #wc-column-container a:nth-of-type(3) { flex: 1 1 0; }The latter code will allow the but button to take up more space.
-
Great, thanks David…
-
Sorry David, just had to re-open this. Just one small snag – please see the buttons on column 2 “all day decaf” on the screen grab link. The button height seems to be extending to the bottom of the max column height in the row.
-
Hi there,
As the topic was marked as resolved, all your site info is gone, can you re-link us to the page in question?
Let me know 🙂
-
Hi Ying, the button issue can be seen on ‘all day decaf’ on the link attached. After implementing option 1 of David’s code, the button height seems to be extending to the bottom of the max column height in the row. Thanks!
-
Try adding this to the CSS:
#wc-column-container a:not(:first-of-type) { align-self: flex-end; } -
Thanks as always David, job done…
-
Glad to be of help
- You must be logged in to reply to this topic.