Success!

Note

Error

Session expiration Your session is going to expireClick here to extend

Budget (€) :

Small project <800

Posted on

1/8/21 12:30 PM

This project is in progress

Someone on twago has already accepted this project. Find a project of your own, sign up today!

Post similar project now

Description

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