Woocommerce - send Customer Message with "New Order" E-Mail - wordpress

we use Woocommerce to sell car parts.
Very often a customer writes an (important) Message into the textfield during the order process.
We get the "New Order" E-Mail from the System, but the message is not inlcuded.
How do we have to change the E-Mail Template to recieve the message from the customer?
Thank you for help

You can configure some details of the confirmation email in the WooCommerce settings area in Wp-Admin section: WooCommerce -> Settings -> Emails.
Also you can edit template files here:
wp-content/plugins/woocommerce/templates/emails
Important: Do not edit files inside plugin directory, because then your changes will be lost with first plugin update. This template can be overridden by copying it to
yourtheme/woocommerce/emails/template_name.php
So you can edit template file and attach your textfield data to email.

For the future if someone else is looking for an answer. If you're looking to add the customer note to the new order email, you can just use one of the action hooks instead of overriding the email template:
// Hook this function into woocommerce_email_order_meta
add_action( 'woocommerce_email_order_meta', 'woo_add_customer_note_to_email', 10, 3 );
function woo_add_customer_note_to_email( $order, $is_admin, $plain_text = false ) {
// Retrieve the customer note as a variable from the $order array.
$customer_note = $order->get_customer_note();
// You want to send those only to the Admin, or only customers, modify here. Right now it's only sending to admin emails.
if ( !$is_admin || $is_admin && empty($customer_note) ) {
return;
}
// Setup our html markup for inclusion in the email. Note, you should inline your styles, which is best practice for HTML emails.
echo '<div style="font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; margin-top: 40px;"><h2 style=""color: #6a6057; display: block; font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-size: 18px; font-weight: bold; line-height: 130%; margin: 0 0 18px; text-align: left;">Customer Notes</h2>';
echo '<blockquote><span style="color: #505050; font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;">' . wpautop( wptexturize( $customer_note ) ) . '</span></blockquote>';
echo '</div>';
}

Related

Cannot Preload Font in WordPress

I spent a couple of hours and could not find any solution for this. I am trying to preload Elegant Icons font with .woff extension and I think i am doing everything correctly, however, Google Page Speed Insights still finding issues:
"We recommend that you use <link rel = preload> to specify earlier
retrieval of resources".
I can see that the icons from the font get loaded on the frontend, however, according to Google Page Speed Insights, the font is still not preloaded. Any help will be much appreaciated. Here is my code in functions.php:
function my_fonts() {
//Add Elegant Icons font
wp_enqueue_style( 'elegant-icons-font', get_template_directory_uri() . '/assets/font/ElegantIcons.woff' );
//Add Elegant Icons css
wp_enqueue_style( 'elegant-icons', get_template_directory_uri() . '/assets/css/elegantIcons.css' );
}
add_action( 'wp_head', 'my_fonts' );
/* Preload Icons font */
function my_font_loader_tag_filter($html, $handle) {
if($handle === 'elegant-icons-font' ) {
return str_replace("rel='stylesheet'", "rel='preload' as='font' type='font/woff2' crossorigin='anonymous'", $html);
}
return $html;
}
add_filter('style_loader_tag', 'my_font_loader_tag_filter',10, 2);
In Elegant Icons css i have
#font-face {
font-family: 'ElegantIcons';
src: url('../fonts/ElegantIcons.woff') format('woff'),
url('../fonts/ElegantIcons.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
If i remove the src property from the css file, the icons do not display on the frontend anymore. I even tried hardcoding the link with preload attribute in the site header but Google Page Speed insights is still not happy. I really ran out of any ideas.

Remove embedded stylesheet for Gutenberg editor on the back end

The Gutenberg editor comes with an embedded stylesheet. Here's a snippet from that stylesheet:
...
.editor-styles-wrapper {
font-family: "Noto Serif", serif;
font-size: 16px;
line-height: 1.8;
color: #191e23;
}
.editor-styles-wrapper p {
font-size: 16px;
line-height: 1.8;
}
...
I've enqueued my own editor stylesheet using the following:
add_action("enqueue_block_editor_assets", "enqueue_custom_block_editor_assets");
function enqueue_custom_block_editor_assets() {
wp_enqueue_style("editor-style", get_stylesheet_directory_uri()."/editor-style.css", null, null);
}
Since I have my own editor stylehseet, I'd like to get rid of the default one. A search on this topic yields lots of results for removing default block styling on the front end, but I'm referring to the editor styling on the back end. Thanks for your help!
I drilled down into how it was being injected and found a way to nuke it out via the block_editor_settings filter. There is a styles key with an array that contains the css. The only iffy thing about this for me is that I'm assuming the shape of the array will always be the same, I should be doing some type of check here.
add_filter( 'block_editor_settings' , 'remove_guten_wrapper_styles' );
public function remove_guten_wrapper_styles( $settings ) {
unset($settings['styles'][0]);
return $settings;
}
My solution was a workaround to automatically override any styles within the .editor-styles-wrapper. Using LESS:
editor-style.css
.editor-styles-wrapper {
#import "style.less";
}
I would still love to disable that embedded stylesheet though, if anyone knows how to do that.

Change 'Optional' Label In Woocommerce Checkout

I want to change 'Optional' label in Woocommerce Checkout. My site is in another language, however for some reason Woocommerce shows this word in English. I want to change it to 'Neprivaloma'
Didn't find 'code way' of doing this, but possible to do with CSS hack:
span.optional {
font-size: 0 !important;
}
span.optional:after {
content: 'YOUR TEXT';
font-size: 13px;
}
With that we hide default label by setting its font-size to 0 and show our own by giving it font-size back.

Different font weight for different fonts

I use Bold, Medium and Normal font weights on my website, that's 700, 500 and 400 respectively.
I use Helvetica Neue font and as a fallback for systems that doesn't have it installed I want to use Open Sans. The problem is Open Sans doesn't have Medium style.
I want my elements that I used to define as font-weight: 500 have font-weight: 600 if the browser uses Open Sans. Is it possible somehow?
There's a similar question at Stack Overflow: How to set different font-weight for fallback font? but I'cant get the result I need using techniqe described in an accepted answer.
I need something like
#font-face {
font-family: 'semibold';
src: 'Helvetica Neue':500, 'Open Sans':600;
}
Not sure how to do it though.
You can't really define weight in a font-face declaration. Instead, font-weight is used there as a gatekeeper to match the font and not to pass styles to the element.
It seems like overkill, but you could use this JavaScript function by Sam Clarke as a starting point to see if the font is available, and then conditionally modify the font-weight following the logic that works best for your specific requirements.
For a simplified example with just these two fonts, you might set up the CSS like this:
#font-face {
font-family: h-semibold;
src: local('Helvetica Neue');
}
#font-face {
font-family: os-semibold;
src: local('Open Sans');
}
.semibold {
font-family: h-semibold, os-semibold;
}
.w5 {
font-weight: 500;
}
.w6 {
font-weight: 600;
}
Then, using the function linked above, you put something like this in your JS to conditionally load the weight classes depending on font support:
var semibold = document.querySelectorAll('.semibold');
if (isFontAvailable('h-semibold')) {
semibold.forEach(result => {
result.className += ' ' + 'w5';
});
} else {
semibold.forEach(result => {
result.className += ' ' + 'w6';
});
}
You'll doubtless work out a more elegant solution if you really need to carry it through.

Google font not rendering in WordPress site

I'm working with in WordPress and Google Fonts isn't rendering aside from on my Macbook (Chrome and Firefox).
I'm using the #import method for Archivo Narrow. Sample code is below:
#import url('https://fonts.googleapis.com/css?family=Archivo+Narrow:400,400i,700');
h1 {font-family: 'Archivo Narrow', sans-serif; font-size:48px; color:#012233; font-weight:bold;}
Website in question is the following: eptestdev.us/northpage
Adding the font via your theme’s functions.php
function wpb_add_google_fonts() {
wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Archivo+Narrow:400,400i,700', false );
}
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );
wpbeginner.com how-add-google-web-fonts-wordpress-themes

Resources