Hello,

I am looking for an expert in term of WooCommerce and Wordpress. The current project contains a customization of the Product Add-Ons plugin developed by WooCommerce.

The goal of the project is making the Add Ons Customizable via CSS using similar methods like in W3 schools:

https://www.w3schools.com/howto/howto_custom_select.asp

At the moment the Product Add Ons, especially the dropdowns, do work on a selectoption foundation and looks similar like the following code:

div class="custom-select" style="width:200px;"

  select

    option value="0"Select car:/option

    option value="1"Audi/option

    option value="12"Volvo/option

  /select

/div

This kind of code is limited in terms of styling, especially if you want to use css and hover effects.

So the goal is writing a Script for the Product Add-Ons Plug In which gives the Dropdowns menus a code in the frontend which is similar like this:

div class="select-items"

  divAudi/div

  divBMW/div

  divCitroen/div

  divFord/div

  divHonda/div

  divJaguar/div

  divLand Rover/div

/div

Basically the options need to be set into div containers instead of the optionselect solution.

But since the Product Add-Ons Plugin is more complex than the example above, you have to write a script which is compatible with the logics from the plugin.

At the moment, the code does look like this:

select class="wc-pao-addon-field wc-pao-addon-select" name="addon-310-breite-1" id="addon-310-breite-1"

   option data-raw-price="" data-price="" data-price-type="quantity_based" value="400mm-1" data-label="400mm"400mm /option

   option data-raw-price="" data-price="" data-price-type="quantity_based" value="450mm-2" data-label="450mm"450mm /option

   option data-raw-price="" data-price="" data-price-type="quantity_based" value="500mm-3" data-label="500mm"500mm /option

   option data-raw-price="" data-price="" data-price-type="quantity_based" value="550mm-4" data-label="550mm"550mm /option

   option data-raw-price="" data-price="" data-price-type="quantity_based" value="600mm-5" data-label="600mm"600mm /option

   option data-raw-price="" data-price="" data-price-type="quantity_based" value="650mm-6" data-label="650mm"650mm /option

   option data-raw-price="" data-price="" data-price-type="quantity_based" value="700mm-7" data-label="700mm"700mm /option

   option data-raw-price="" data-price="" data-price-type="quantity_based" value="750mm-8" data-label="750mm"750mm /option

/select

If there are further questions, please let me know. 

Kindest regards

Abidin