Search code examples
csswordpresswoocommercecatalog

Woocommerce product catalog full width and title + price over image (overlay)

I'm trying to achieve a full width product catalog with little to no spacing between product images using Woocommerce. I managed to remove the spacing between product images but the rows aren't full width, leaving me with huge padding on both sides. Furthermore, how do I get the title and price on top of the image? I've been messing with css but found no luck.

the final result should look something like this:

acnestudios.com/de/de/man/new-arrivals/

I would really appreciate some help,

R

Solution

  • from what I read, just create or select the class with the price and add what I wrote bellow.

    .your-class {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}

    For the grid I can't help you since you haven't posted anything. If you're using bootstrap, just use container-fluid instead of container class.

    For full grid in WooCommerce add this CSS code:

    .woocommerce .content-area { width: 100% !important; margin: 0 !important;}

    I have checked If this code works on Storefront theme -> https://themes.woocommerce.com/storefront/product-category/clothing/