how do I go about reloading payment methods in WooCommerce based on delivery method selection? Basically any click on input within the below:
<ul id="shipping_method">
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate5" value="flat_rate:5" class="shipping_method" checked="checked" data-dashlane-rid="9252c594914515b8" data-form-type="other">
<label for="shipping_method_0_flat_rate5">Wysyłka krajowa pobraniowa: <span class="woocommerce-Price-amount amount"><bdi>25,00 <span class="woocommerce-Price-currencySymbol">zł</span></bdi></span></label> </li>
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate1" value="flat_rate:1" class="shipping_method" data-dashlane-rid="26d51c47f4584e4a" data-form-type="other">
<label for="shipping_method_0_flat_rate1">Wysyłka krajowa przelew zwykły - przedpłata: <span class="woocommerce-Price-amount amount"><bdi>20,00 <span class="woocommerce-Price-currencySymbol">zł</span></bdi></span></label> </li>
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate4" value="flat_rate:4" class="shipping_method" data-dashlane-rid="b174295006b8ee5e" data-form-type="other">
<label for="shipping_method_0_flat_rate4">Szybkie płatności - przedpłata: <span class="woocommerce-Price-amount amount"><bdi>20,00 <span class="woocommerce-Price-currencySymbol">zł</span></bdi></span></label> </li>
</ul>
should reload <ul class="wc_payment_methods payment_methods methods">
Thanks!
Related
I have created custom checkbox in contactform7. It looks great, you can check checkbox, but doesn`t send information to ant email after submition. Any ideas how to pass it?
Code for the checkbox:
<span class="wpcf7-form-control-wrap your-services">
<span class="wpcf7-form-control wpcf7-checkbox">
<span class="wpcf7-list-item">
<label class="custom-control custom-checkbox">
<input type="checkbox"class="custom-control-input"> Checkbox text
<span class="custom-control-indicator"></span>
<span class="wpcf7-list-item-label custom-control-description"></span>
</span>
</span>
The input is missing the name="" parameter.
<span class="wpcf7-form-control-wrap your-services">
<span class="wpcf7-form-control wpcf7-checkbox">
<span class="wpcf7-list-item">
<label class="custom-control custom-checkbox">
<input type="checkbox" name="test_checkbox" class="custom-control-input"> Checkbox text
<span class="custom-control-indicator"></span>
<span class="wpcf7-list-item-label custom-control-description"></span>
</span>
</span>
Now you can get the checkbox value in the mail editor with [text_checkbox]
I'm composing a stringbuilder on serverside (HTML code) and by ajax sending a response to jquery function that puts this HTML in place. On serverside is decided which checkbox will be checked. So far so good.
I would like to select labels for checked checkboxes and change colour so checked countries would be differently coloured. My trouble is that I can't select desired labels and change color property. I tried with this what you see and of course using classes and + and > and :before and other weird things...
So, how to select them and change any property on the label?
I would like to do it using CSS, I know how to do it using jquery but it seems so wrong.
label + input.chkCountry[type="checkbox"]:checked {color:green;}
<ul class="chkbox">
<li><label class="lblCountry" for="chkCC_AF"><input type="checkbox" class="chkCountry" id="chkCC_AF" name="chk_AF" value="AF" checked="checked">Afghanistan</label></li>
<li><label class="lblCountry" for="chkCC_AL"><input type="checkbox" class="chkCountry" id="chkCC_AL" name="chk_AL" value="AL">Albania</label></li>
<li><label class="lblCountry" for="chkCC_DZ"><input type="checkbox" class="chkCountry" id="chkCC_DZ" name="chk_DZ" value="DZ">Algeria</label></li>
<li><label class="lblCountry" for="chkCC_AS"><input type="checkbox" class="chkCountry" id="chkCC_AS" name="chk_AS" value="AS">American Samoa</label></li>
</ul>
You only need to change the HTML and selector. In CSS the label doesn't know if the checkbox is checked so you have to turn it around.
input.chkCountry[type="checkbox"]:checked + label {color:green;}
/*input:checked + label {color:green;} /* Short selector */
<ul class="chkbox">
<li>
<input type="checkbox" class="chkCountry" id="chkCC_AF" name="chk_AF" value="AF" checked="checked">
<label class="lblCountry" for="chkCC_AF">Afghanistan</label>
</li>
<li>
<input type="checkbox" class="chkCountry" id="chkCC_AL" name="chk_AL" value="AL">
<label class="lblCountry" for="chkCC_AL">Albania</label>
</li>
<li>
<input type="checkbox" class="chkCountry" id="chkCC_DZ" name="chk_DZ" value="DZ">
<label class="lblCountry" for="chkCC_DZ">Algeria</label>
</li>
<li><input type="checkbox" class="chkCountry" id="chkCC_AS" name="chk_AS" value="AS">
<label class="lblCountry" for="chkCC_AS">American Samoa</label>
</li>
</ul>
Follow below code example
input[type="checkbox"]:checked ~ label {
color: green;
}
<ul class="chkbox">
<li>
<input type="checkbox" id="chkCC_AF" name="chk_AF" value="AF" checked="checked">
<label class="lblCountry" for="chkCC_AF">Afghanistan</label>
</li>
<li>
<input type="checkbox" id="chkCC_AL" name="chk_AL" value="AL">
<label class="lblCountry" for="chkCC_AL">Albania</label>
</li>
</ul>
You will need to move label after checkbox in your HTML.
Try This way:
.chkCountry:checked + .lblCountry {
color: green;
}
<ul class="chkbox">
<li>
<input type="checkbox" class="chkCountry" id="chkCC_AF" name="chk_AF" value="AF" checked="checked">
<label class="lblCountry" for="chkCC_AF">Afghanistan</label>
</li>
<li>
<input type="checkbox" class="chkCountry" id="chkCC_AL" name="chk_AL" value="AL">
<label class="lblCountry" for="chkCC_AL">Albania</label></li>
<li>
<input type="checkbox" class="chkCountry" id="chkCC_DZ" name="chk_DZ" value="DZ">
<label class="lblCountry" for="chkCC_DZ">Algeria</label></li>
<li>
<input type="checkbox" class="chkCountry" id="chkCC_AS" name="chk_AS" value="AS">
<label class="lblCountry" for="chkCC_AS">AAmerican Samoa</label></li>
</ul>
Hey in Woocommerce im trying to convert the shipping methods radio buttons to a dropdown list. this is the list html
<ul id="shipping_method">
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate1" value="flat_rate:1" class="shipping_method">
<label for="shipping_method_0_flat_rate1">רעננה: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">₪</span>16</span></label> </li>
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate7" value="flat_rate:7" class="shipping_method" checked="checked">
<label for="shipping_method_0_flat_rate7">נתניה: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">₪</span>30</span></label> </li>
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate8" value="flat_rate:8" class="shipping_method">
<label for="shipping_method_0_flat_rate8">חדרה: <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">₪</span>45</span></label> </li>
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_free_shipping3" value="free_shipping:3" class="shipping_method">
<label for="shipping_method_0_free_shipping3">איסוף עצמי חינם</label> </li>
</ul>
is there any hook i can use?
any quick trick ?
Try the WooCommerce Shipping Method Display Style plug-in (tested on WordPress v4.9.8 + WooCommerce v3.4.7):
https://wordpress.org/plugins/woo-shipping-display-mode/
As an amateur who has never created/designed any kind of "form actions", I need help to use this form for a website I am currently designing. I feel okay with "CSS" and structure of the form itself. Just want to know which part of this contact form should be changed. Where to put my Email address?
<div class="segment contact-form">
<div class="center-wrap">
<div class='gf_browser_unknown gform_wrapper holla-form_wrapper' id='gform_wrapper_1'>
<form method='post' enctype='multipart/form-data' id='gform_1' class='holla-form' action='http://mammothmedia.tv/contact/'>
<div class='gform_body'>
<ul id='gform_fields_1' class='gform_fields top_label form_sublabel_below description_below'>
<li id='field_1_1' class='gfield gfield_contains_required field_sublabel_below field_description_below'>
<label class='gfield_label' for='input_1_1'>First Name<span class='gfield_required'>*</span>
</label>
<div class='ginput_container'>
<input name='input_1' id='input_1_1' type='text' value='' class='medium' tabindex='1' />
</div>
</li>
<li id='field_1_8' class='gfield gfield_contains_required field_sublabel_below field_description_below'>
<label class='gfield_label' for='input_1_8'>Last Name<span class='gfield_required'>*</span>
</label>
<div class='ginput_container'>
<input name='input_8' id='input_1_8' type='text' value='' class='medium' tabindex='2' />
</div>
</li>
<li id='field_1_2' class='gfield gfield_contains_required field_sublabel_below field_description_below'>
<label class='gfield_label' for='input_1_2'>Email<span class='gfield_required'>*</span>
</label>
<div class='ginput_container'>
<input name='input_2' id='input_1_2' type='text' value='' class='medium' tabindex='3' />
</div>
</li>
<li id='field_1_3' class='gfield field_sublabel_below field_description_below'>
<label class='gfield_label' for='input_1_3'>Phone</label>
<div class='ginput_container'>
<input name='input_3' id='input_1_3' type='text' value='' class='medium' tabindex='4' />
</div>
</li>
<li id='field_1_6' class='gfield field_sublabel_below field_description_below'>
<label class='gfield_label' for='input_1_6'>Budget Range</label>
<div class='ginput_container'>
<input name='input_6' id='input_1_6' type='text' value='' class='medium' tabindex='5' />
</div>
</li>
<li id='field_1_5' class='gfield ginput_textarea field_sublabel_below field_description_below'>
<label class='gfield_label' for='input_1_5'>Comments</label>
<div class='ginput_container'>
<textarea name='input_5' id='input_1_5' class='textarea medium' tabindex='6' rows='10' cols='50'></textarea>
</div>
</li>
<li id='field_1_7' class='gfield ginput_subscribe field_sublabel_below field_description_below'>
<label class='gfield_label'></label>
<div class='ginput_container'>
<ul class='gfield_checkbox' id='input_1_7'>
<li class='gchoice_1_7_1'>
<input name='input_7.1' type='checkbox' value='Subscribe to our newsletter' id='choice_1_7_1' tabindex='7' />
<label for='choice_1_7_1' id='label_1_7_1'>Subscribe to our newsletter</label>
</li>
</ul>
</div>
</li>
<li id='field_1_9' class='gfield gform_validation_container field_sublabel_below field_description_below'>
<label class='gfield_label' for='input_1_9'>Comments</label>
<div class='ginput_container'>
<input name='input_9' id='input_1_9' type='text' value='' />
</div>
<div class='gfield_description'>This field is for validation purposes and should be left unchanged.</div>
</li>
</ul>
</div>
<div class='gform_footer top_label'>
<input type='submit' id='gform_submit_button_1' class='gform_button button' value='Submit' tabindex='8' onclick='if(window["gf_submitting_1"]){return false;} window["gf_submitting_1"]=true; ' />
<input type='hidden' class='gform_hidden' name='is_submit_1' value='1' />
<input type='hidden' class='gform_hidden' name='gform_submit' value='1' />
<input type='hidden' class='gform_hidden' name='gform_unique_id' value='' />
<input type='hidden' class='gform_hidden' name='state_1' value='WyJbXSIsIjA0OGE5MTQyNDdhM2NhZjFiMTc5Nzk5ZjM1ZTIzZjYzIl0=' />
<input type='hidden' class='gform_hidden' name='gform_target_page_number_1' id='gform_target_page_number_1' value='0' />
<input type='hidden' class='gform_hidden' name='gform_source_page_number_1' id='gform_source_page_number_1' value='1' />
<input type='hidden' name='gform_field_values' value='' />
</div>
</form>
</div>
<script type='text/javascript'>
jQuery(document).bind('gform_post_render', function(event, formId, currentPage) {
if (formId == 1) {
jQuery('#input_1_3').mask('(999) 999-9999').bind('keypress', function(e) {
if (e.which == 13) {
jQuery(this).blur();
}
});
}
});
jQuery(document).bind('gform_post_conditional_logic', function(event, formId, fields, isInit) {});
</script>
<script type='text/javascript'>
jQuery(document).ready(function({
jQuery(document).trigger('gform_post_render', [1, 1])
});
</script>
</div>
</div>
You will not be able to use this because this form uses a WordPress Plugin called Gravity Form's
Also most form's use PHP and you wont be able to grab PHP from client side.
Which server side language are you using? PHP, ASP.NET, etc? If you're trying to make a form that will send an email to an email address you'll have to set up some server side code. Right now it looks like it sends the form data to http://mammothmedia.tv/contact/ but configuring smtp for emailing is going to depend on the server side language you're using. On another note, your site looks really nice ;)
EDIT:
Check out: http://www.freecontactform.com/email_form.php , that oughta get you started.
Hey I have a very simply question but I am not quite sure how to achieve this without using HTML tables. Basically what I want is the label to to be on the left with 3 radio button to its right. The thing is, I want each individual radio button to be aligned vertically.
For example:
Label - choice 1
..........- choice 2
..........- choice 3
The HTML structure I am using is as follows:
<label for="radio1">Label</label>
<input type="radio" name="radio1"> <span class="form-span">Option 1</span>
<input type="radio" name="radio1"> <span class="form-span">Option 2</span>
<input type="radio" name="radio1"> <span class="form-span">Option 3</span>
Can anyone help me to align the form properly?
Thanks :)
EDIT
I found a very simply solution and was wondering whether is it an acceptable one: could you please tell me if it acceptable according to HTML standards?
<label for="radio1">Label</label>
<span class="form-span"><input type="radio" name="radio1"> <span class="form-label">Option 1</span></span>
<span class="form-span"><input type="radio" name="radio1"> <span class="form-label">Option 2</span></span>
and CSS:
.form-span {display:block}
The easiest way is to wrap everything in a div:
<div class="container">
<label for="radio1">Label</label>
<input type="radio" name="radio1"> <span class="form-span">Option 1</span>
<input type="radio" name="radio1"> <span class="form-span">Option 2</span>
<input type="radio" name="radio1"> <span class="form-span">Option 3</span>
</div>
and then add the following CSS:
.container{height:200px;}
label{float:left; height:100%;}
input{float:left;}
.form-span{display:block;}
Check out this jsFiddle to see a live example.
HTML
<label for="radio1">Label</label>
<div id="parentDiv">
<input type="radio" name="radio1"> <span class="form-span">Option 1</span>
<input type="radio" name="radio1"> <span class="form-span">Option 2</span>
<input type="radio" name="radio1"> <span class="form-span">Option 3</span>
</div>
CSS
#parentDiv, label, input, span {
float:left;
}
input {
clear:both;
margin-left:5px;
}
span {
margin-left:5px;
}
Check it out : http://jsfiddle.net/gNHB7/