Only show PPOM Fields for X variation

Hi,

Yes, you can do this pretty easily with PPOM select or radio options with prices.

When I use the conditional options, it seems I can only check fields which are also set up in PPOM. I can’t check the variation (using the default woocommerce variations). Is that right?

I’ve found a way around it, though!

Hi,

Yes, that’s correct.

Ok thanks – that’s what my original question was, can I use the PPOM conditional logic with the default woocommerce product variations (the answer is no). Sorry if that wasn’t clear.

For anyone interested, I created a PPOM select field which I set to always have the same value as the variation with js. Then I set the PPOM select field to disabled and hid it with css.

Thanks @johnfotios for this trick ??

Hi @johnfotios, How did you do it with the js code? I do not get the way to do it, if you can help me I would appreciate it very much

Thanks

Hey @calcurianluis, you need to add a PPOM field which has the same options/values as your variations dropdown first, then use:

    // match variable product variations to PPOM field (for conditional logic)

    var $VariationSelectID = jQuery("#your_variation_select_ID");
    var $PPOMSelectID = jQuery("#your_PPOM_select_ID");

    $VariationSelectID.on("change", function() {
        var VariationSelect = $VariationSelectID.val();

        var dataOptionId = VariationSelect.replace(/-/g, "_");
        var $PPOMSelectOption = $PPOMSelectID.find("[data-optionid='" + dataOptionId + "']");
        $PPOMSelectOption.prop("selected", true);
        $PPOMSelectID.trigger("change");
    });
	
	// if you want to disable the PPOM field
    $('#your_PPOM_select_ID').prop('disabled', 'disabled');

Replace #your_variation_select_ID and #your_PPOM_select_ID with the IDs from the select fields. I hope this helps.

Thanks for the sharing ??

I am a somewhat newbie and so glad I found this! This is exactly what I have been trying to figure out.

I added this to the js box of the PPOM I am trying to isolate to variation #21225 I have successfully added the code (I’m assuming b/c thee colors are no longer all going to one line in green) What else do I need to do?

Scenario:
A product page with 2 variations (#21224 & #21225)
I want the PPOM hidden until variation #21225 is selected. Thus if no variation is selected OR if the variation #21224 is selected I want the PPOM hidden. If the #21225 Variation is selected I want the PPOM to display.

What do I need to do in order to make this happen? (What are the steps prior to and after adding the JS code that I need to make sure are in effect?)

I have created a PPOM for this page but need to know the settings in the PPOM and what CSS needs to be added to ensure it is hidden until the woo variation #21225 is selected.

REALLY appreciate you guys and your willingness to help people!

Hi,

can you please any script you wrote under the help with the above script?

//
var $VariationSelectID = jQuery(“21224”);
var $PPOMSelectID = jQuery(“15”);

$VariationSelectID.on(“change”, function() {
var VariationSelect = $VariationSelectID.val();

var dataOptionId = VariationSelect.replace(/-/g, “_”);
var $PPOMSelectOption = $PPOMSelectID.find(“[data-optionid='” + dataOptionId + “‘]”);
$PPOMSelectOption.prop(“selected”, true);
$PPOMSelectID.trigger(“change”);
});
//

I have the above code in the JS styles and the following is in the css style box
//
.ppom-wrapper select { -moz-appearance:auto !important; -webkit-appearance:auto !important; appearance:auto !important; }
//

Upon taking a second look, another solution would be applying a different PPOM to each USER role for a particular product.

For example: is it possible to apply one PPOM to regular pricing and a different PPOM to a wholesale customer price on the same product page? Without the PPOMs showing for both pricing?

Is it possible to apply exclusive PPOM to different user roles on the same product page?

Thanks for sharing code, but also share the product page where you have added this JS?

Sorry I didn’t reply to this. After doing a lot of setting up with PPOM, the client’s spec changed and it ended up being a standard woocommerce variable product… lol