I have a query loop where I display the color of products using a Term query, the details of which are mentioned in the video below. I have applied a border to the white color using [style*=“background-color:#ffffff”] to make it stand out from the white background. The problem is that this border is applied fine in the frontend, but not in the builder and the first loop item.
Please watch the video below. I will also share the component below.
I’m not sure what the difference is, but in the first loop item, some of the colors are set as rgb. While in the other loop items in the builder and frontend they are as HEX! Since I’m targeting white with the selector [style*=“background-color:#ffffff”], it’s natural that the style isn’t applied. I even set the white color again in WooCommerce attributes, but it’s still loading as rgb in the first loop item. Please see the screenshot below.