[Resolved] WEIRD DISPLAY OF CHECKBOXES TEXT AND VALUES IN BACKEND

[Author]

Posts

[Silvia]

Hello,
I have successfully been using toolset plugins to first create and then maintain a t-shirt production company website for a couple of years now. The website is in two languages (english and italian) and I use WPML as translation plugin.
Since every product is available in a number of colours (that could change every year) I solved the problem by using a CHECKBOXES field (as one or MORE can be selected per article) with the color names as labels and IMG tags as values.

The value of each color would be:

 <img src="www.zeus-rs.com/wp-content/uploads/2017/03/WH.png" style="padding:5px;" width="40px" height="40px" alt="WH" /> 

where the alt attribute specifies the color (white in this case).

I had never had problems until, updating their 2017 catalogue, the field in the T-SHIRT post type is displayed as the image in the attachment (image 1). It works OK on fronted, but it makes a bit difficult to read the field from the backend. It’s even worse on the 2nd language page, after it has been saved (image 2).


Is there a way to have it displayed as the size field (TAGLIA in italian) in image 3? Can u help?

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Silvia,

Thank you for contacting our support forum.

Does this issue only happen on the translated posts ? Also could you let me see the field information from the Post Field group screen. This means that you will go to Toolset -> Post Fields and expand the checkbox group.

Thanks,
Shane

[Silvia]

Hi Shane, thanks for answering me.
No, it happens on both posts, in english and italian. Image1 shows you how it appears when I click on "new t-shirt" on the english version of the article. Image2 shows the italian version of the article AFTER I have saved it.
I am attaching image4 as a display of the setting of the checkboxes field. As you cannot see what's written in the value to be stored, here it is, for each color:

<img src="<em><u>hidden link</u></em>" style="padding:5px;" width="40px" height="40px" alt="be" />

If you want I can give you access to the website, so you can see for yourself. All I need is an email to create your user.
Thank you!

[Silvia]

Pardon me,
I also noticed that it doesn't store the "checked" value for the selected colors if, after I have updated it, make changes to other fields and re-save it.

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Silvia,

The problem is that you are using HTML tags for the label.

HTML tags don't work here. You need to use plain text items.

Thanks,
Shane

[Silvia]

Thanks for your answer, but I need a little help on how to display all the checked values as images on the front end

On my Tshirt content model I have

 <div id="cartellacolori">
  [types field="color-chart" separator=" "][/types]
  </div>

If I have to turn

<img src="<em><u>hidden link</u></em>" alt="BK" width="30px" height="30px">  

into

 src="<em><u>hidden link</u></em>" alt="BK" width="30px" height="30px" 

how do I specify to render that text as an image in the [types field="color-chart"] tag?

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Silvia,

Can a shirt only have 1 color associated with it or is it for the available colors?

Also is this done using woocommerce?

Please let me know.
Thanks,
Shane

[Silvia]

A t-shirt can have multiple colors associated and they may vary from year to year. The solution I had chosen worked fine up until the release of a recent version of wp-types but I cannot tell which one. Proof of that is that without changing the code the t-shirt page displays the color chart associated to every product.
I would rather NOT use woocommerce for this.
Awaiting instructions.

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Silvia,

Well the option here is to use woocommerce or have some custom field that is built for this.

The HTML won't work in a field like this.

I would recommend using woocommerce if you are going to market products.

Thanks,
Shane

[Silvia]

I am sorry but what I don't understand is that CLEARLY at some point, it was possible to use HTML in CHECKBOXES. So why dismiss this feature if it was perfectly functioning?
I do not want to use woocommerce for a website that is NOT selling online. It is a huge plugin with thousands of features that I do not need.
I'd rather you'd make possible again using html in checkboxes, is there a requested feature list that I can add this to, or at least have someone explain why it was taken away?

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Silvia,

Thanks for the clarity.

I took another look at this and it seems that the issue is being caused by the double quotations being used in the image tag.

Try adding it like this.

<img src='<em><u>hidden link</u></em>' alt='BK' width='30px' height='30px'>

Please let me know if this helps.
Thanks,
Shane

[Silvia]

Shane, your suggestion was on the right path but not quite right.

I tried switching the double quotations with a single quotation, and everything now is working beautifully. Therefore, for future reference in case anyone needs, the resulting code is:

<img src='PATH_TO_IMAGE' style='padding:5px;' width='40px' height='40px' alt='COLOR_NAME>

As you can see from the screenshot I attached, not only it works on the front end, but the same code can be used to display the color swatches on the back-end, so that it's easier for the user to pick the right colors when the product is available in many colors.

Hope this helps someone else. Thanks