bpurrenhage
Member
I'm using Gravity Forms with Woocommerce Gravity Forms Add-on and would like to control the featured image (post thumbnail) on a single product page based on the option selected in the Gravity Form. I've been able to set it up so an image appears based on some conditional logic using the HTML Standard Field. How do I get this image to replace the post thumbnail?
Any help would be appreciated. Obvious newbee here.
Do you have an example of your form online where we can see this?
To be clear, your Gravity Form is embedded in a post (a product page) and you want to change the post thumbnail permanently, or just change what image is shown on the page when the Gravity Form is displayed, when an option is selected in the Gravity Form?
Can you explain more please, and share a URL to the page? Thanks.
bpurrenhage
Member
Here is the URL - http://ia-sports.com/products/anchor-2x/
I'm looking to change the image shown only when an option is selected in the Gravity Form. For example, when the color yellow option is selected the image changes to a yellow product. This would not be a permanent change but would be only be tied to the option that is selected.
That said, I am having other issues I need to deal with first. As you can see on the page my form is not loading properly. I can get it to load if I get rid of all the conditional logic. The forms were working perfectly until today. I'm not sure what happened. JS errors?
Again, any help is appreciated and please let me know if I can provide any additional information.
Thanks.
OK, first things first. Regarding the form not showing when you use conditional logic, it's because you have JavaScript errors on the page, which prevent Gravity Forms jQuery from running and revealing the form. Here is the first error I see:
Timestamp: 2/10/13 12:41:55 PM
Error: TypeError: jQuery(...).prettyPhoto is not a function
Source File: http://ia-sports.com/wp-content/themes/rhapsody/js/custom.js?ver=3.5.1
Line: 40That error is coming from custom JavaScript in your theme. If you change to a default theme temporarily (Twenty Twelve or Twenty Eleven) and there are no other JavaScript errors on the page, then I think your form will display properly.
If you need additional help finding out where the JavaScript errors are coming from, you can use the troubleshooting steps which are found here: http://rkt.gs/testing
Get the form working first then we'll work on the rest.
bpurrenhage
Member
Well I've got the issue with the JS/prettyPhoto fixed in my theme. Thanks for your help diagnosing the issue. Everything seems to be functioning as expected.
Minor set back, now on to the image issue. Again, here is the URL http://ia-sports.com/products/anchor-2x/
I'd like to have the product image change when a standard color is selected to show the product in each color. What's the easiest way to do this?
Thanks.
OK, good.
On this page now, when I select standard color, I get a choice of colors (radio buttons) and when I select one of those, you want the image on the left to change to reflect the chosen color?
Is that image to the left part of the form, or is that the post thumbnail (featured image) for the product page?
bpurrenhage
Member
Yes, I would like the image on the left to change to reflect the chosen color. The image is not part of the form but rather the post thumbnail (featured image) for the product page. I was able to get a second image to appear in the form using the HTML Standard Field with conditional logic set but this is not really what I'm looking for.
Is it possible to control the featured image?
Thanks again.
It would be possible to change the image which is displayed. You would not be permanently changing the featured image setting for the page (which would not make sense anyway: if the last visitor selected a yellow, then the featured image would be yellow.)
So, you need to just change the image which is shown when a choice in the form is made. It would be easy to do in the form. I did something similar here:
http://gravity.chrishajer.com/different-image-for-each-radio-button-selection/
You could probably use some jQuery to watch for that radio button selection and change the image on the page, or you could position the image which is normally in the form, over where the image on the page is. None of that would change the featured image setting for the product page, it would just show a different image based on a form selection.
Would either of those approaches work for you?
bpurrenhage
Member
Chris,
Thanks for your reply. I decided to go the easy route based on your suggestion and change the form around to place the image inside. That way I can use the HTML Standard Field to add conditional logic to an image based on the radio selected.
Thanks again for your help.
Great, glad you found a way to work around it for now.