Change characters of checkout field in WooCommerce to UPPERCASE - woocommerce

How can I change the characters of the checkout field in WooCommerce to uppercase? I have changed it by CSS (text-transform) but it is changing letters to uppercase only in frontend. When customers write lowercase characters to a field, then it is sent to the system with lowercase. ID of field is "billing_company_wi_vat". I will be grateful for any suggestion.
I found on the internet something like this but I don't know how to use it.
var upper = text.toUpperCase();

function wc_checkout_alter_field_input() {
if (is_checkout()):
if (!wp_script_is('jquery', 'done')) {
wp_enqueue_script('jquery');
}
wp_add_inline_script('wc-checkout', 'jQuery(document).ready(function($){ $("#billing_company_wi_vat").keyup(function() { this.value = this.value.toUpperCase();});});');
endif;
}
add_action('wp_enqueue_scripts', 'wc_checkout_alter_field_input');
Add this to your active theme functions.php file. The function wp_add_inline_script allows to add extra code to a registered script. wc-checkout-js will be rendered in the checkout page by WooCommerce. so we can add some additional JS through that ID wc-checkout

Related

Woocommerce I am looking for billing address and order-received email hooks

I have to make two customization on my woocommerce site.
I need to know two main hooks. Someone out there please help me out!
Show custom field values to billing address on order-received page.(I added custom fields on checkout page.)
Need to include these values to customers' order-received email, too.
Thanks for stopping by.
To show custom field in order-received page you have to use
woocommerce_thankyou hook.
Here is the code:
// define the woocommerce_thankyou callback
function action_woocommerce_thankyou($order_id)
{
$my_custom_field = get_post_meta($order_id, '_billing_my_field', TRUE);
}
// add the action
add_action('woocommerce_thankyou', 'action_woocommerce_thankyou', 10, 1);
UPDARED This section after post author comment
To add custom billing fields in WooCommerce email you have to use
woocommerce_email_customer_details hook; this will be displayed just
before the customer details.
Here is the code:
add_filter('woocommerce_email_customer_details', 'custom_woocommerce_email_order_meta_fields', 10, 3);
function custom_woocommerce_email_order_meta_fields($order, $sent_to_admin, $plain_text)
{
$_billing_my_field = get_post_meta($order->id, '_billing_my_field', true);
if ($plain_text)
{
echo 'My field is ' . $_billing_my_field;
}
else
{
echo '<p>My field is ' . $_billing_my_field . '</p>';
}
}
All code goes in function.php file of your active child theme (or theme) or also in any plugin file.
Please Note:
I have assuming that you have added a custom billing fields as $fields['billing']['billing_my_field'] using woocommerce_checkout_fields hook.
All the codes are tested and fully functional.

Change Wordpress feed <link> for one specific tag

I have an external page that reads a RSS feed for a tag. I can't change anything on the external page, so the challenge is to change the RSS feed on my side to match the requirements.
On the external page the 3 latest posts for a tag are shown, and at the end of the section (note: not after each post but after all 3 posts) there is a "View all" link. This link receives its value from the element in the feed, which is by default set to my blog homepage, e.g. http://myblog.com). For this specific tag the link should be http://myblog.com/tag/myspecialtag.
The requirement is that the "View all" link links to the tag page instead of the homepage.
My idea was to add a condition to the element to change the URL for this specific category. I tried to change the feed template as recommended here: Customizing feeds, but for some reason it doesn't change the template at all. The code I tried is the following:
remove_all_actions( 'do_feed_rss2' );
add_action( 'do_feed_rss2', 'change_feed_rss2', 10, 1 );
function change_feed_rss2( $for_comments ) {
$rss_template = get_template_directory() . '/feeds/feed-custom_rss2.php';
if( file_exists( $rss_template ) )
load_template( $rss_template );
else
do_feed_rss2( $for_comments ); // Call default function
}
Of course I created the custom feed template and stored it in the feeds directory in my theme.
As this didn't work I tried looking into filters/hooks but I couldn't find anything helpful regarding my issue. Any ideas on how to best solve this issue?
I came up with the following solution:
I created a new custom page template custom_rss-feed.php and copied the code from wp-includes/feed-rss.php into it. I assigned this template to a new page. Additionally I added a filter to get_bloginfo_rss like the following:
function alter_bloginfo_rss($value, $key) {
if ( $key === "url" &&
is_page_template("custom_rss-feed.php")
) {
return $value . "/my/custom/url";
}
return $value;
}
add_filter("get_bloginfo_rss", "alter_bloginfo_rss", 10, 2);

How to add page URL to list of pages in WordPress admin panel?

Currently, by default, the following columns appear in the list of pages in the WordPress admin panel:
Title
Author
Comments
Date
and because I have AIO SEO installed:
SEO Title
SEO Description
SEO Keywords
Is there a way to have WordPress also display the URL to the page (at least the part of the URL that is created when the page itself is created)?
The page url is actually already there by default, it's just hiding. When you hover over a page title, several links appear below the title -- edit, quick edit, trash, view. View is the hyperlink to the page, which you can click to view the page, or right click and copy the link address to use elsewhere.
Otherwise, if you are using a custom/child theme, you could add the following to your functions.php file:
add_filter('manage_page_posts_columns', 'my_custom_column', 10);
add_action('manage_page_posts_custom_column', 'add_my_custom_column', 10, 2);
function my_custom_column($defaults) {
$defaults['url'] = 'URL';
return $defaults;
}
function add_my_custom_column($column_name, $post_id) {
if ($column_name == 'url') {
echo get_permalink( $post_id );
}
}
Note: This just creates a text url to your page.
Also note, you do not want to edit your functions.php file directly if you are using a theme you did not create, as it will be overwritten when you update. If you want to add this to an existing theme, I'd suggest looking into child themes.
This is helpful. I would only improve the output slightly by removing the site url and just showing the page. Takes up less space and less to weed through visually.
if ($column_name == 'url') {
$siteURL=get_site_url($post_id);
$link= get_permalink( $post_id );
echo str_replace($siteURL,"",$link);
}

Make Wordpress Pages's Titles readonly

I'm looking for a WP function that add the Read-only parameter to all Pages's Titles's input, that will make the Page's title unalterable.
Thanks a lot in advance.
This can be accomplished with some simple JavaScript/jQuery. Create a file called admin_title_disable.js, and queue it up within functions.php. For example:
functions.php:
wp_register_script('admin_title_disable', '/path/to/admin_title_disable.js');
function disableAdminTitle () {
wp_enqueue_script('admin_title_disable');
}
add_action('admin_enqueue_scripts', 'disableAdminTitle');
Now, in your js file:
jQuery(document).ready(function ($) {
$('#title').attr('disabled','disabled');
});
This will set both post and page title input fields with a disabled attribute. Hope this helps!
If you want to restrict this script to a particular admin page, wrap the add_action hook in a conditional that compares $_GET['page']. You can also take advantage of the $hook parameter that is available when using admin_enqueue_scripts to check for the page. See here.
Update::
WordPress makes it a little tricky to tell between post and page edit screens, but there is a hidden input that you can take advantage of. :) Here's an updated version of the jQuery that will only run on page edit screens:
jQuery(document).ready(function ($) {
//find the hidden post type input, and grab the value
if($('#post_type').val() === 'page'){
$('#title').attr('disabled','disabled');
}
});
No need to make a seperate js file. Adding this to your function.php will do the same that Matthew showed.
function admin_footer_hook(){
?>
<script type="text/javascript">
if(jQuery('#post_type').val() === 'post'){
jQuery('#title').prop('disabled', true);
}
</script>
<?php
}
add_action( 'admin_footer-post.php', 'admin_footer_hook' );
This Solution Will disable clicking on the post title and editing it using CSS. CSS targets post type "page" only. It has been tested on Gutenberg visual editor. Users Can still edit title from "Quick Edit".
Add this code to your functions.php file.
function disable_title_edit() {
if(!current_user_can('administrator')){
if( !current_user_can('administrator')){ ////Only allow Admin
echo '<style>.post-type-page .edit-post-visual-editor__post-title-wrapper{
pointer-events: none;
}</style>'; } }
}
add_action('admin_head', 'disable_title_edit', 100);

Override WordPress [gallery] shortcode insertion with different name

Say you created your own Gallery plugin that uses it's own shortcode (eg: [my_gallery] )
How would you go about modifying the default WordPress gallery shortcode insertion within the editor of [gallery] to [my_gallery] so that the client is not confused with having to remember the custom shortcode and accidentally making incorrect gallery insertions?
first remove the gallery shortcode , and then add your own ...
remove_shortcode('gallery', 'gallery_shortcode'); // removes the original shortcode
add_shortcode('gallery', 'my_awesome_gallery_shortcode'); // add your own shortcode
function my_awesome_gallery_shortcode($attr) {
$output = 'Codex is your friend' ;
return $output;
}
or as an alternative just rename your shortcode to something less confusing :-)

Resources