Thank you – I used the above documentation already and it works really well if you are happy for all of your product boxes to be exactly the same height. But what I would like to do is have some big ones and some small ones.
eg using this CSS
.small {height: 300px}
.big {height: 600px}
If that worked, I’d then ideally have a group of the big ones and then a group of the small ones.. so the alignment and stacking would still work perfectly
My problem is I don’t know how to apply to class to a shortcode (or even if that is possible)
e.g [wp_cart_display_product class=”small” ]
Hi, have you tried adding the same size products in one page. Then using the above instructions to display them side by side?
Regards
Thanks – I want them all to be on the same page, so couldn’t do this. However, thank you very much because that made me realise how to do it. Will put the solution here just in case anyone else follows this thread.
My products are split into categories, with text between each category .. so I have put the shortcodes for each category inside a div with a class and then set up different heights for each category class. For each category, I made the height big enough for the longest description in that category and that way they are still stacked up nicely within each category.
.wp_cart_product_display_box { height: 600px; }
.skincare .wp_cart_product_display_box { height: 800px; }
.vouchers .wp_cart_product_display_box { height: 300px; }
<div class=”skincare”>
[wp_cart_product_display name=”moisturiser” descrip=” Blah blah…” price=”10.00″][wp_cart_product_display name=”facial serum” descrip=” Blah blah…” price=”10.00″][wp_cart_product_display name=”facial oil” descrip=” Blah blah…” price=”10.00″]</div>
