Can I change the apperance of only grouped products?

Support
#1

https://rodburn.com.au/warehouse/cleaning-supplies/refillable-bottles/ I would like to increase the width of grouped products only so that they are double width is there an easy way of doing that ?

#2 
.product-type-grouped {
  width: 48% !important;
}
.entry-featured{
  max-height:180px;
   
}

.product-type-grouped p.stock {
  display: block !important;
}

this is what I have come up with but I can not work out how to get the image to max out at 180px width but the container to stay the full width of the element

also the in stock and price I am not sure how to make them go under eachother

#3

Hi @wicara,

  1. To fix the overlapping, please change this code
.custom table td {
    line-height: 0;
}

to this

.custom table td {
    line-height: 1.4;
}
  1. To fix the image, add this in Theme Options > CSS 
.woocommerce li.product.product-type-grouped .entry-featured {
    background: #fff;
    max-width: 100%;
    width: 100%;
    text-align:center;
}

.woocommerce li.product.product-type-grouped .entry-featured img {
    max-width: 180px !important;
    width: 100%;
    min-width: 0;
}

Hope this helps

1 Like
#4

ok I had to add that code that must have been the x them file. can I center the image ?

#5

Hi @wicara,

I couldn’t find this custom CSS. It will center the product images. Did you remove it?

.woocommerce li.product.product-type-grouped .entry-featured {
    background: #fff;
    max-width: 100%;
    width: 100%;
    text-align:center;
}

Regards!

1 Like
#6

also why do the other products now position strangely?

#7

Also using

.product-type-grouped {
  width: 48% !important;
}

makes the single product page reduce how do I only target the views outside the single product page only

#8

Hi @wicara,

Please replace your code with this

.archive.woocommerce .product-type-grouped {
    width: 48% !important;
    max-height: 520px;
    overflow-y: scroll;
}

Then add this code as well

.woocommerce li.product.first {
    clear: none;
}

.archive.woocommerce li.product {
    min-height: 520px;
}
.archive.woocommerce li.product.last {
    margin-right: 1%;
}

Hope this helps

1 Like
#9

thank you for your help

#10

You’re more than welcome, glad we could help.

Cheers!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.