[Resolved] Product Profile not showing (Custom Field Checkboxes not showing image)

[Author]

Posts

[DanielS9588]

I am trying to: Have images appear when selected via checkbox selection from custom field.

Link to a page where the issue can be seen: Any Product Category page.

I expected to see:
hidden link
The images on the above page are shown on their respective pages when selected when adding/editing a product via a checkbox.

Instead, I got: No image appearing. When I add the code to have the image appear. the code does not stay after saving.
The images were appearing on the site, but when I added a new option/checkbox they all disappeared.

The code that I placed in the field:
<img class="aligncenter size-full wp-image-12782" src="hidden link" alt="" width="103" height="137" />
or
<img src="hidden link" alt="" width="103" height="137" />
Neither worked.
I hope the attached images help.
All plugins and theme are updated.
Wordpress is running 5.2.2

[Christian Cox]

Hi, I don't recommend putting a full HTML tag in the display value like this, because it won't usually be displayed correctly. Instead, I would place an image file name here, or a CSS class. Then use that plain text as the basis for an image tag or a CSS sprite class.

Let me know if you have additional questions about either approach.

[DanielS9588]

You'll have to give me a little more direction here.

Whatever text I place in the 'selected' field shows as the text that is there. Class, file name . . . whatever. It only shows the text.

I did have '<img src="/wp-content/uploads/2019/03/pork-back.png" width="" height="auto" />' and all worked perfectly until I added a new option.

What do I have to place in the SELECTED field to show an image on the front end of the site.

Attached is an image of the images in code view showing the class.

[Christian Cox]

Here's how I would set it up. Use a simple unique text value in the "Selected" input field. For example, use "brisket" for the Brisket checkbox "Selected" value. Then in the template, I would use conditionals to test the value of each possible checkbox, and output the corresponding image, like this:

[wpv-conditional if="( '[types field='product-profile' option='0'][/types]' eq 'brisket' )"]
    <img src="/wp-content/uploads/2019/04/brisket-picture.jpg" />
[/wpv-conditional]
[wpv-conditional if="( '[types field='product-profile' option='1'][/types]' eq 'asada' )"]
    <img src="/wp-content/uploads/2019/04/asada-picture.jpg" />
[/wpv-conditional]
[wpv-conditional if="( '[types field='product-profile' option='2'][/types]' eq 'chicken' )"]
    <img src="/wp-content/uploads/2019/04/chicken-picture.jpg" />
[/wpv-conditional]

Repeat the wpv-conditional block for each possible checkbox. The "option" value is a simple numeric index, so you would increase that value by one in each wpv-conditional block. I've started a few for you here so you can see how it would work for product profiles like "brisket", "asada", and "chicken".

[DanielS9588]

hidden link
Thank you for the input. I never would've figured that out

All appears to be working but the titles are appearing when we don't want them to.

As you can see with the link above the images are showing but the name/word in the "SELECTED" field is showing.
I looked to see about removing this via CSS, but not 100% sure how without ruining anything.

Thanks again for the help

[Christian Cox]

Could you copy + paste the entire code you have used here? The text shouldn't appear like this, maybe I can offer some additional guidance if I see the code.

[DanielS9588]

I figured it out.
I needed to replace the shortcode that was there:
[types field='product-profile' separator=', '][/types]
With the direction, you had sent.

All is looking great.

Thank you again for your help.

Great support.

My issue is resolved now. Thank you!