Skip Navigation

[Resolved] Link Backend Image Field to button on frontend

This support ticket is created 5 years, 11 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
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 14:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Jamaica (GMT-05:00)

This topic contains 4 replies, has 2 voices.

Last updated by DanielS9588 5 years, 11 months ago.

Assigned support staff: Shane.

04-code for template page.JPG
03-button that is linked to image on frontend.JPG
02-add image to product.JPG

I am trying to: Add a field to a product that will be shown on the frontend via a button

I visited this URL: hidden link

I expected to see: The selected image for product to appear in a lightbox.

Instead, I got: No image appearing

Attached are images of what I have setup. I just



Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Daniel,

Thank you for contacting our support forum.

So what you are trying to achieve is to add the image to the product on the frontend and then users can click on this image?

What should happen when users click on this image?

Please let me know.

05-updated code for nutrition button.JPG

I trying to achieve the opposite. I want the Admin to add an image via field on the back-end (Add/Edit Product).
Then the Visitor can click on the button "NUTRITION" and the nutrition label will appear in a lightbox format.

In the images I had attached. You will see in image "02-add image to product" is where the Admin will add the Nutrition label image to the product.

In image "03-Button that is linked to image on front end" that button will be linked to the nutrition label image that the admin applied to the product.

Image "04-code for template" is what I had at the time of submitting this ticket.

I've since then been hacking at it and I've attached another showing what I've done. Still unsuccessful.

If you go to
hidden link
You can scroll to - PRE-SLICED BLACK FOREST BONELESS SEASONED HAM (3rd item down).
Click on the nutrition button and see that it gives an error, but in the address bar you'll see that it is trying to link to the image.

I hope this helps.
Thank you.



Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Daniel,

What you can do is to utilize a bootstrap modal.

<a class="btn btn-primary" data-toggle="modal" data-target="#[wpv-post-id]">Activate Modal</a></div>

<!-- Modal -->
<div class="modal fade" id="[wpv-post-id]" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">My Title</h4>
      <div class="modal-body">
Content goes here
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>


What you need to do is add this to the view or page that is displaying the button.

I could help with the setup of this if you like. The private fields will be enabled for your next response.




I apologize. The code you provided did the trick and all is in perfect working order. I thought I was responding to another support ticket.

Thanks again for the insight and help,