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/
Related
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!
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>
I have create a future in my application that will allow me to create dynamic field on a page. What I need to do here is to display the those field the same way every time.
I want to be able to display up to 2 field next to each other "if any"
I have attached a screenshot on what I need the final display to look like
from the image below the field "No Longer an Employee" is a label and to the right of it there is a value in this case "NULL." And to the far right of it there is another field called "Outside Sales Primary Contact" with a value of "NULL."
So I want to display the field into 2 column if there is enough fields other wise put one on the left and nothing on the right.
not I don't need help with how to generate the field. I need help with CSS and bootstrap on how to display the column next to each other.
I may need some more details to clarify your question but I made you a demo codepen of what I think you're looking for.
DEMO - http://codepen.io/BooststrapBay/pen/DGzIu
<div class="container">
<div class="row">
<div class="col-md-6 example-form">
<ul>
<li>
<span>No longer an employee</span>
<input class="form-control" type="text">
</li>
<li>
<span>Support level</span>
<input class="form-control" type="text">
</li>
<li>
<span>Previous role</span>
<input class="form-control" type="text">
</li>
<li>
<span>Attitude</span>
<input class="form-control" type="text">
</li>
<li>
<span>Attitude detail</span>
<input class="form-control" type="text">
</li>
</ul>
</div>
<div class="col-md-6 example-form">
<ul>
<li>
<span>Outside sales primary contact</span>
<input class="form-control" type="text">
</li>
<li>
<span>Training primary contact</span>
<input class="form-control" type="text">
</li>
<li>
<span>Primary enrollment contact</span>
<input class="form-control" type="text">
</li>
<li>
<span>Birth month</span>
<input class="form-control" type="text">
</li>
<li>
<span>Birth day</span>
<input class="form-control" type="text">
</li>
</ul>
</div>
</div>
</div>
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/