[Support request] Woocommerce grid border

[Leon]

Hello! I was wondering If it’s possible to have the products showed with a border.
I made a simple picture, to show what I want.

Example

Thanks Leon

[Leo]

Hi Leon,

Definitely possible. Able to provide a link to your site?

[Leon]

Hi Leo,

Def. this is the link: Ballon bedrukken.

Thanks

[Leo]

Try this CSS:

.woocommerce ul.products li.product {
    border: 2px solid #000000;
    box-sizing: border-box;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know.

[Leon]

Yes looking better. Can I also add a little padding at all sides? I hope I don’t have too many question.

[Leo]

What about like this?

.woocommerce ul.products {
    text-align: center;
}

Never too many questions – it helps me to learn 🙂

Let me know.

[Leo]

Could leave some space between the button and the border with this if you like:

.woocommerce ul.products li.product .button {
    margin-bottom: 1em;
}

[Leon]

Works perfect. Very happy with the result.
Last question, can I make the product title smaller? Only the product smaller.

Very good work!!

[Leo]

This should work:

.woocommerce ul.products li.product h3 {
    font-size: 15px;
}

Let me know.

[Author]

Posts