I've been looking around for the possibility of changing displayed product images based on the user's customer group, but have not found any real solution yet. Our business sells clothing with custom decals, and we'd like to be able to show specific customer groups images with decals related to them, such as their logo. Previously, we've been doing this by copying a product in Woocommerce, setting just that user group to be able to see it, and then having the images be the relevant ones I mentioned. While this does work, it also adds significant workload when we have to update our prices, as we have a bunch of duplicate products.
There isn't a built-in feature for that, but I think you might be able to achieve it with some group-specific CSS.
B2BKing adds a body class for each group, so you can target it and override images with a CSS rule (this way you can apply CSS or styling for that group only). For example:
This approach is quite flexible: you could override all product images for a group with a single CSS rule, or just overlay something like a small corner badge with the customer's logo while keeping the original image underneath.
The exact CSS will depend on your setup: how many images need overriding, whether each product has its own custom image, etc.
In my opinion it's the cleanest way to handle it because you are not working with PHP, there is no risk of errors, and you can affect many images at once with a single rule.
I've been looking around for the possibility of changing displayed product images based on the user's customer group, but have not found any real solution yet. Our business sells clothing with custom decals, and we'd like to be able to show specific customer groups images with decals related to them, such as their logo. Previously, we've been doing this by copying a product in Woocommerce, setting just that user group to be able to see it, and then having the images be the relevant ones I mentioned. While this does work, it also adds significant workload when we have to update our prices, as we have a bunch of duplicate products.
Is this at all possible?
Hi Benjamin,
There isn't a built-in feature for that, but I think you might be able to achieve it with some group-specific CSS.
B2BKing adds a body class for each group, so you can target it and override images with a CSS rule (this way you can apply CSS or styling for that group only). For example:
Or if it's a background image:
You can read more about the group-specific CSS approach here: https://woocommerce-b2b-plugin.com/docs/shortcode-to-restrict-content-to-b2b-b2c-user-groups-specific-users/
This approach is quite flexible: you could override all product images for a group with a single CSS rule, or just overlay something like a small corner badge with the customer's logo while keeping the original image underneath.
The exact CSS will depend on your setup: how many images need overriding, whether each product has its own custom image, etc.
In my opinion it's the cleanest way to handle it because you are not working with PHP, there is no risk of errors, and you can affect many images at once with a single rule.
Kind regards,
Stefan