[Resolved] How do I add custom dividers in between products

[Evan]

I was wondering if there is any way to add dividers separating the products I have on my product pages? I’m new to GP and to WP, I appreciate all the help from the developers and everyone in the forums.

[Leo]

Hi there,

Try this CSS:

.woocommerce .wc-columns-1 ul.products li.product, .woocommerce-page .wc-columns-1 ul.products li.product {
    border-bottom: 2px solid #000000;
}

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

[Evan]

Nice! Is it possible for the line to be right below the “Add to Cart” button?

[Leo]

It’s currently right below the button already no?

Or you are looking for a little bit of space?

If so try this:

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

[Evan]

That’s perfect, and one more thing. Can I add small text in between the divider and the ‘add to cart’ button?

[Leo]

Hmm not really. What are you trying to add?

[Evan]

Instead of the line of text, is it possible to condense the short description (I have three lines) for the products and to add color?

[Leo]

Sorry I still can’t picture what you are trying to achieve.

Can you provide an example or a mock up?

Might be good to check in with WooCommerce as well as it sounds like you need a hook in there.

[Evan]

I’m sorry, I decided not to go with that idea. Instead I have another question about the size of the single product image. https://aircasket.com/product-category/wood/ when you click on the product and when it takes you to the single product page is there any way that the image size can be bigger instead of the hover zoom option?

[Leo]

This thread might help: https://generatepress.com/forums/topic/product-image-size-in-woocommerce-product-page/

Can you open a new topic if you need additional assistance? Easier for us to track 🙂

Thanks!

[Evan]

Thank you Leo, I appreciate all the help you’ve given me 🙂

[Leo]

No problem 🙂

[Author]

Posts