Skip Navigation

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

This thread is resolved. Here is a description of the problem and solution.

Problem: I have a group of checkboxes custom field that I'm using to display specific images. I placed an HTML image tag in the "Value to display" input field, but it's not working as expected.

Solution: It isn't recommended to use a full HTML tag in the checkbox "Value to display" field. Instead, use a simple text string value and conditional HTML in your template to display different images per checkbox. Example:

[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]
This support ticket is created 3 years, 3 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 6 replies, has 2 voices.

Last updated by DanielS9588 3 years, 3 months ago.

Assigned support staff: Christian Cox.

Author
Posts
#1371577
GV-how-it-should-look.jpg
GV-Code-not-staying-after-save.jpg

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

#1371705

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.

#1371763
GV-img-in-code-view.jpg

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.

#1373097

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".

#1373309

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

#1373315

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.

#1373361

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!