I really like the way the product page is laid out with individual single products: 40% width image on the left with 60% width description box on the right.
However, I’ve started using the WisdmLabs Custom Product Boxes plugin and the way this appears at the moment is wedged into the 40% image width space on the left. I could lose the single-product-summary container on the right, or better still, have it above the image so that the image container can span the whole width making the product boxes plugin work OK.
Naturally, I’d need to have this tweak only apply on products which are bundles and not normal single products where the default page layout is OK.
How can this be achieved?
Example page: https://www.xavelec.co.uk/product/compact-bundle-test-1/
For now, I guess I can do it on a post-by-post basis with CSS like
.post-xxxx .single-product-main-image{width: 100%;}
Ideally, I’d like to do have all the “custom product boxes” products grouped together so I can have a single capture-all line of CSS and not have to explicitly detail every page each time I add one. But I can’t find any identifier I can use, so maybe updating CSS every time is the only option?
Hi,
I think that this is the only solution as you suggest it.
I am not sure that it is something been asked before to be honest.
Maybe you can also do some JS to target based on number, example the first 3 or using a :nth selector.
Best regards,
Basilis