First Option & Selected Option issue

BUMP, +1, #metoo

I’ve noticed this as well. Ever since ThemeIsle took over the PPOM plugin the “pre-selection” field in the PPOM meta groups don’t work as expected for HTML select elements. And of course it won’t show the updated price on page load because the pre-selection function clearly isn’t being done before theppom_update_option_prices() call.

The only solution I have found is to create custom scripts to pre-select the proper option in each select field after the DOM has finished loading and then run the PPOM price calculation script again. A fix for this would be appreciated since it is an available option for select elements in PPOM meta.

Also, @galbaras, what you are trying to do with the “Choose an option” can’t be done with the PPOM plugin. There is no way to disable an option within a select element within a PPOM meta group. You would have to do it programmatically with JavaScript / jQuery. It would be a nice feature to have though, hint hint @themeisle.

Thank you, @brozra . Would you mind sharing a sample script?

• This reply was modified 1 year, 8 months ago by Gal Baras.

Off the top of my head & untested…

jQuery(function ($) {
    $("select > option").each(function(i,v){
        if ($(v).text() === "Choose an option") {
            $(v).prop('disabled',true);
        }
    });
});

This is what I’ve ended up with, and tested:

$('.ppom-field-wrapper select > option:first-child').each(function() {
	if ($(this).text() === 'Choose an option') {
		$(this).prop('disabled',true);
	}
});

But for some reason, this causes the “Choose an option” to also be selected, although there’s another option with selected="selected". Could be a Chrome bug?

Either way, it will be good for the plugin to handle this correctly without any custom code.

That should work for the disabling of the options that contain that specific text. You might have a JS conflict / error somewhere on your website.

You could also try wrapping it with $(document).ready to wait until the DOM has finished loading.

$(document).ready(function(){
$('.ppom-field-wrapper select > option:first-child').each(function() {
	if ($(this).text() === 'Choose an option') {
		$(this).prop('disabled',true);
	}
});
});

This works, at least in a test dev environment with just WooCommerce, PPOM and a code snippet plugin.

jQuery(function($) {
	$(document).ready(function(){
		$('.ppom-option-choose_an_option').each(function() {
			$(this).prop('disabled',true); 
		});
	});
});

And don’t forget to purge your cache!

• This reply was modified 1 year, 8 months ago by brozra. Reason: didn't need the if statement due to PPOM code naming convention
• This reply was modified 1 year, 8 months ago by brozra. Reason: additional suggestion

This looks better, but I’m not sure how this worked for you. To have this option class, “Choose an option” needs to be defined as a valid option, not the first option. What’s your field setup for this?

Either way, my code works and I think the plugin should be fixed.

I installed the latest version of PPOM v32.0.8 (free plugin only – no Pro plugin installation) on a WordPress v6.2.2 install with WooCommerce v7.8.1 and an unmodified Storefront theme (v4.3.0) on my local development server. I’m not sure when the custom class “ppom-option_{data_name}” was added to each standard select element option but it’s there now with the latest version of PPOM.

This is what I see when I inspect the option element on my dev site with the “Choose an option” option:

<option value="Choose an option" class="ppom-option-choose_an_option ppom-simple-option " data-price="" data-optionid="choose_an_option" data-percent="" data-label="Choose an option" data-title="Style" data-onetime="" data-taxable="" data-without_tax="" data-data_name="style" data-option_weight="" selected="selected" disabled="">Choose an option</option>

Your website clearly doesn’t show that so you must be on an older version of PPOM.

Go with your other solution but wrap it with $(document).ready and that should fix you up.

jQuery(function($) {
	$(document).ready(function(){
		$('.ppom-field-wrapper select > option').each(function() {
			if ($(this).text() === 'Choose an option') { $(this).prop('disabled',true); }
		});
	});
});

Hi @galbaras and @brozra!

I tested this on my instance, and I can’t see the issue. If I create a Select field and just add some options in it, without filling in the First Option or Selected Option fields, the first option will be automatically pre-selected and the price will appear next to it, as expected – screenshot. Also, if I add an option in the First Option field and then delete it, no blank space remains in the dropdown on my end and the following option will be pre-selected.

Thank you!

@luciamarinescu I think @galbaras originally wanted the 4,6,8,10,12 options along with a non-selectable blank or “filler” option above those options. At least that’s how I eventually interpreted his original question. As far as what what you proposed, absolutely it works, but it’s not what he wanted.

In the heydays of the Internet ( back in the 1990’s ) it was necessary to add further options / instructions on just about everything to make it easier for non-technical people to understand what an element on a website page was for. So a disabled “Choose an option” option at the top of a select element is a throwback from the past to help people identify what is clickable and what is not. Some people just prefer to have those there.

Let me clarify the situation. Field A has the options “Yes, please” and “No, thanks”. Field B is only visible when Field A is set to “Yes, please”.

If there is no First Option set for Field A, “Yes, please” is pre-selected, and Field B shows the correct option (“4”). But if I switch to “No, thanks” and back to “Yes, please”, it now has an extra option at the top – “”, “Choose an option” or “4”, depending on the setting.

Also, when Field A’s First Option is set to “Choose an option”, and the visitor chooses “Yes, please” for Field A, Field B has that extra option at the top.

So there seems to be an issue with the hiding and showing of conditional fields.

• This reply was modified 1 year, 8 months ago by Gal Baras.

Hi @galbaras,

Thanks for the details!

I was able to replicate this behaviour on my test instance and I forwarded the issue to our developers to see what could be done about it. Thank you for pointing this out!

Have a great day ahead!