I am trying to add my select2 js library and css in Woocommerce variable subscriptions.
Its adding if I do view:source but my select box or dropdown doesnt convert as select2 dropdown .. which is working for other pages with same js and css using class mindesk_select2 .. Here is my code / try.
<?php
// Showing fields for variable subscriptions
add_action('woocommerce_product_after_variable_attributes', 'show_WC_Product_Variable_Subscription_Variation_Custom_Fields', 10, 3);
// Saving fields for variable subscriptions
add_action('woocommerce_save_product_variation', 'save_WC_Product_Variable_Subscription_Variation_Custom_Fields', 10, 2);
function show_WC_Product_Variable_Subscription_Variation_Custom_Fields($loop, $variation_data, $variation) {
// Mindesk Licence
$mindesk_license = get_post_meta($variation->ID, 'mindesk_license', true);
woocommerce_wp_select([
'id' => "mindesk_license{$loop}",
'name' => "mindesk_license[{$loop}]",
'wrapper_class' => 'product_custom_field form-row ',
'class' => 'mindesk_select2',
'label' => __('Mindesk License', 'woocommerce'),
'value' => $mindesk_license,
'options' => [
'' => __('Select a value', 'woocommerce'),
'fixed' => __('Fixed', 'woocommerce'),
'floating' => __('Floating', 'woocommerce'),
'network' => __('Network', 'woocommerce')
]
]);
}
function add_admin_scripts($hook) {
global $post;
if ($hook == 'post-new.php' || $hook == 'post.php') {
if ('product' === $post->post_type) {
wp_register_style('mindeskselect2csss', MINDESK_PLUGIN_URL . 'assets/css/select2.min.css');
wp_enqueue_script('mindeskselect22', MINDESK_PLUGIN_URL . 'assets/js/select2.min.js', array('jquery'), null, true);
wp_enqueue_style('mindeskselect2csss');
//wp_enqueue_script('mindeskselect22');
wp_register_style('mindeskwcvariablesubscriptionstyle', MINDESK_PLUGIN_URL . 'assets/css/custom.css');
wp_enqueue_script('mindeskwcvariablesubscriptionscript', MINDESK_PLUGIN_URL . 'assets/js/custom.js', array('jquery'), null, true);
wp_enqueue_style('mindeskwcvariablesubscriptionstyle');
}
}
}
add_action('admin_enqueue_scripts', 'add_admin_scripts', 10, 1);
As you can see i have enqued css and js files and trying to use mindesk_select2 and here is my custom.js file.
custom.js
jQuery(document).ready(function ($) {
$(".mindesk_select2").select2({
allowClear: true,
placeholder: "",
});
});
I have checked all the css and js are called and executed but my dropdown box doesnt work as select2 ...
I have also checked if any js console error there but there are no errors there as well..
Can someone guide me how can I achieve this from here. ..
Any guidance will be so appreciated.
Thanks
Adding CSS class wc-enhanced-select in the element will enable the select2 for the filed. It's already handled in the WooCommerce core.
Related
WooCommerce on CheckOut-Page , the default of ['billing_state']shows in drop-down list which I want to change it to input[text]. The customer have to key-in the information by themselves.
please help, thanks a lot
this code doesn't work for me. (after the customer key-in the state, it shows the state-code. It should show the state name that the customer-key-in)
add_filter( 'woocommerce_checkout_fields' ,
'y_change_address_input_type', 10, 1 );
function y_change_address_input_type( $fields ) {
$fields['billing']['billing_state']['type'] = 'text';
return $fields;
}
thank you for your comment, currently, I found the solution. I can switch from selection[option] to input[text] on hook woocommerce_default_address_fields, and the code work as I expected. (I don't know why the code will not work on woocommerce_checkout_fields. The code should have work on both woocommerce_default_address_fields and woocommerce_checkout_fields)
This is the work:
add_filter( 'woocommerce_default_address_fields', 'y_edit_state', 40, 1 );
function y_edit_state( $state_fields ) {
$state_fields ['state'] = array(
'label' => 'stae', // Add custom field label
'placeholder' => 'stae', // Add custom field placeholder
'required' => true, // if field is required or not
'class' => array( 'form-row-wide', 'address-field' ), // add class name
'clear' => false, // add clear or not
'type' => 'text', // add field type
'priority' => 80, // Priority sorting option
);
return $state_fields;
}
In Woocommerce, I have added the following code to my theme's functions.php file to remove the zip/state fields in /my-account/edit-address/billing:
add_filter('woocommerce_address_to_edit', 'reorder_woocommerce_address_fields', 10, 2);
function reorder_woocommerce_address_fields( $address, $load_address) {
$new_address['billing_first_name'] = $address['billing_first_name'];
$new_address['billing_last_name'] = $address['billing_last_name'];
$new_address['billing_email'] = $address['billing_email'];
$new_address['billing_phone'] = $address['billing_phone'];
$new_address['billing_email'] = array(
'label' => __('Email', 'woocommerce'),
'required' => true,
'class' => array('form-row-first'),
);
$new_address['billing_phone'] = array(
'label' => __('Phone', 'woocommerce'),
'required' => true,
'class' => array('form-row-last'),
'clear' => true
);
$new_address['billing_company'] = $address['billing_company'];
$new_address['billing_country'] = $address['billing_country'];
$new_address['billing_city'] = $address['billing_city'];
$new_address['billing_address_1'] = $address['billing_address_1'];
return $new_address;
}
It is based on "Customizing my-account addresses fields in Woocommerce 3" answer code and it removes the fields…
But there is still an error message saying that the state and zip fields are required. So I added this:
add_filter( 'woocommerce_default_address_fields' , 'custom_override_default_address_fields' );
function custom_override_default_address_fields( $address_fields ) {
global $woocommerce;
$country = $woocommerce->customer->get_country();
if($country !== 'US'){
$address_fields['state']['required'] = false;
$address_fields['postcode']['required'] = false;
}
return $address_fields;
}
Now address is saved normally but when I am being redirected to /my-account/edit-address/, I see only this:
Where:
Konstantine - is billing_first_name
Berulava - is billing_last_name
Odelia Studio - is billing_company
Digomi - is billing_address_1
Tbilisi - is billing_city
I don't see labels and some fields also are missing.
Any suggestions on what to do?
I have created a new TinyMCE layout for Advanced Custom Fields called "Very Simple" that I want to use on specific WYSIWYG fields. I've managed to add the buttons I want and I'm now looking for a way to add a list of custom style formats as a dropdown, but I can't really figure out how to do this.
The code I have right now is the following:
// Customize ACF MCE
add_filter( 'acf/fields/wysiwyg/toolbars' , 'new_toolbars' );
function new_toolbars( $toolbars )
{
// - this toolbar has only 1 row of buttons
$toolbars['Very Simple' ] = array();
$toolbars['Very Simple' ][1] = array('bold' , 'italic' , 'underline', 'link', 'unlink' );
$style_formats = array(
// These are the custom styles
array(
'title' => 'Red Button',
'block' => 'span',
'classes' => 'red-button',
'wrapper' => true,
),
array(
'title' => 'Content Block',
'block' => 'span',
'classes' => 'content-block',
'wrapper' => true,
),
array(
'title' => 'Highlighter',
'block' => 'span',
'classes' => 'highlighter',
'wrapper' => true,
),
);
// Insert the array, JSON ENCODED, into 'style_formats'
$toolbars['Very Simple'][1]['styleselect'] = json_encode( $style_formats );
// return $toolbars - IMPORTANT!
return $toolbars;
}
The style format dropdown is not showing. Any ideas why?
The styleselect dropdown is hidden by default, so to get any registered formats/styles will show, you'll just need to activate the styleselect dropdown menu in the Visual editor.
The below function (from the WordPress Codex) filters the array of buttons loaded by TinyMCE, so just add this to your functions.php. I'm using the mce_buttons_2 filter to make it appear in the second row of my toolbar.
// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
// Register our callback to the appropriate filter
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );
I have a code below, it adds the field with label but does not add required field not sure why.
add_filter('woocommerce_checkout_fields',
'override_default_address_fields');
function override_default_address_fields($address_fields)
{
$address_fields['billing']['billing_address_2'] = array(
'label' => __('Mobile', 'woocommerce'),
'required' => true,
);
return $address_fields;
}
Any help is appreciated! thanks in advance
I think you're doing it wrong...
instead of ['billing_address_2'], use your own like ['billing_mobile'].
add_filter('woocommerce_checkout_fields', 'override_default_address_fields');
function override_default_address_fields( $address_fields ) {
$address_fields['billing']['billing_mobile'] = array(
'label' => __('Mobile', 'woocommerce'),
'required' => true,
);
return $address_fields;
}
with what you are doing you're overriding ['billing_address_2']. Which I think you are seeing it as a problem because you are only seeing the Mobile label.
add_filter('woocommerce_billing_fields', 'custom_woocommerce_billing_fields');
function custom_woocommerce_billing_fields( $fields )
{
$fields['billing_first_name']['required'] = false;
return $fields;
}
I want to make First and Last name should be alphabetic only. Right now it's accepting numbers also.
Help will be much appreciated. I also want to limit text of review in cart.
Regards
$('#billing_first_name').on('input',function(){
var node = $(this);
node.val(node.val().replace(/[^a-z]/g,'') ); }
);
Adding this jQuery will work.! You can add for others fields too.
You have to add fields by custom method then use follow script for alphabetic textbox:
add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');
function custom_override_checkout_fields($fields)
{
$fields['billing']['billing_first_name'] = array(
'label' => __('First name', 'woocommerce'),
'placeholder' => _x('First name', 'placeholder', 'woocommerce'),
'required' => false,
'clear' => false,
'type' => 'text',
'class' => array(
'alpha'
)
);
and same for billing_last_name,
use all of scripts in active theme functions.php
Actually woo-commerce does not give us this functionality. You have to use your custom jquery or javascript. This might help you
You should call this script under wp_head hook
add_action('wp_head', ' alphabet_only ');
function alphabet_only() {
?>
<script type="text/javascript">
$('.alpha').bind('keyup blur',function(){
var node = $(this);
node.val(node.val().replace(/[^a-z]/g,'') ); }
);
</script>
<?php
}
That's it.