Hi I need to display the custom field that I added via plugin (woocommerce edit checkout fields) I need to display the field data which is a date on the email that would be sent to the customer. here is my code on the email.php (which is found on the event-tickets-plus plugin)
<!--Date-->
<td class="ticket-details new-row new-left-row" valign="top" align="left"
width="120" style="background-color: #e1e9f6; padding: 0; width:120px;
margin:0 !important; text-align:center; border: 1px solid #fff;">
<h6 style="background-color:#3b89c9; color:#fff !important; margin:0 0
10px 0; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
text-transform:uppercase; font-size:14px; font-weight:700 !important;">
Ticket Date
</h6>
<span style="background-color: #e1e9f6; color:#0a0a0e !important; font-
family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font
size:15px;">
<?php do_action('show_date_here');?></span>
</td>
and here is my code on functions.php
<?php
add_action('show_date_here','get_date', 10,1);
function get_date($order){
$order = wc_get_order( $order_id );
$order_data = $order->get_data(); // The Order data
$order_id = $order->get_id();
$order_date_use = $order_data['ticket_date'];
echo $order_date_use;
}
?>
I hope you could help me with this.
Related
I'm creating an HTML newsletter. I'm using nested array. I have two question : how do I import font? Because #import and #font-face are not working on my newsletter (but works on simple html)
And the second is this :
How can I " vertical align middle " 2 span with different font-size ? It's working on simple html but not on the newsletter...
<table width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding:10px;">
<div>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:60px;v-text-anchor:middle;width:180px;" arcsize="17%" stroke="f" fillcolor="#00436f">
<w:anchorlock/>
<center>
<![endif]-->
<a href="#"
style="background-color:#00436f;font-weight:bold;border-radius:10px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;text-align:center;text-decoration:none;width:180px;-webkit-text-size-adjust:none;padding-top: 25px; padding-bottom: 25px;"> <span style="font-size:2em;font-weight:bold;vertical-align:middle">15</span>
<span style="font-size:1.2em;font-weight:bold;text-transform:uppercase;vertical-align:middle">Février</span>
</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</div>
<!--<p style="Margin: 0;font-size: 14px;line-height: 17px;width: 100%;padding: 25px 0;text-align: center;border-radius: 10px;background: #00436f;-->
<!-- color: white;">-->
<!--</p>-->
<p style="padding-top:10px;Margin: 0;line-height:1;font-size: 1em;font-weight:bold;color:#797979">Réunion d'information Loiret Numérique</p>
<p style="Margin: 0;font-size: 12px;line-height: 14px">
Mairie de Montargis - Salle Montdignan
</p>
</td>
</tr>
</tbody>
</table>
What I get:
What I need:
My fonts :
#media screen{
#import url("https://use.typekit.net/jqe0zpu.css");
#import url("https://www.site.fr/.../GT-Walsheim-Regular.ttf");
#font-face {
font-family: 'Walsheim';
font-weight: normal;
font-style: normal;
src: local("Walsheim"),url('https://www.site.fr/.../GT-Walsheim-Regular.eot');
}
#font-face {
font-family: 'Walsheim';
src: local("Walsheim"),url('https://www.site.fr/.../GT-Walsheim-Bold.eot');
src: url('https://www.site.fr/.../GT-Walsheim-Bold.ttf') format('truetype'),
url('https://www.site.fr/.../GT-Walsheim-Bold.woff') format('woff'),
url('https://www.site.fr/.../GT-Walsheim-Bold.woff2') format('woff2'),
url('https://www.site.fr/.../GT-Walsheim-Bold.eot?#iefix') format('embedded-opentype');
font-weight: 800;
font-style: normal;
}
}
As I mentioned in my comment, Outlook does not work with all web-fonts like Google fonts. You don't include full paths to resources so there is no way for us to test what you are doing and look for a solution.
My first suggestion is to open your email in a web browser and test to see if it works at all. If it does, then I suggest testing what you are doing in an Apple or IOS email client, since they seem to work well with web fonts. If it works, you know you have things coded correctly.
Generally an HTML document wih a web font needs a link to that font and applied in a class for use in the document.
You should have a link like this:
<style>
#import url("https://www.site.fr/.../GT-Walsheim-Regular.ttf");
</style>
Or this:
<link href="https://use.typekit.net/jqe0zpu.css" rel="stylesheet">
Next, you need to find some way to get the font out into the document.
<style>
.classname {
font-family: GT-Walsheim, Arial, sans-serif;
}
</style>
In the last example, I added Arial as a fallback font that is pretty web-safe because Walsheim is not going to work with Gmail and most likely not work with Outlook 2007, 2010, 2013-2019.
Finally, apply the classname:
<p class="classname">Hello</p>
You could go fancy and add in inline styles as well:
<p class="classname" style="font-family: GT-Walsheim, Arial, sans-serif;">Hello</p>
This is a very basic plan on how to work with web fonts in email.
Good luck.
Here is a simpler method of using div tags:
<style>
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
#fevrier {
background: #00436f;
border-radius: 10px;
font-weight: bold;
color: #ffffff;
display: inline-block;
font-family: sans-serif;
text-align: center;
text-decoration: none;
width: 180px;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
vertical-align: middle -webkit-text-size-adjust:none;
padding-top: 25px;
padding-bottom: 25px;
}
#fevrier .text {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
</style>
<div id="fevrier">
15 <span class="text">FÉVRIER </span>
</div>
I tried using to style WP Hooks on a mini theme am building but "color" attribute didn't work.
<span style="color: #C40000; font-family: 'Roboto', sans-serif; font-size:26px; padding: 5px; line-height: 1; text-decoration: underline; -moz-text-decoration-color: #C40000; text-decoration-color: #C40000;">
<?php echo the_category(''); ?>
</span>
Add to your css file class with your category styles
.category-style{
color: #C40000;
font-family: 'Roboto', sans-serif;
font-size:26px;
padding: 5px;
line-height: 1;
text-decoration: underline;
-moz-text-decoration-color: #C40000;
text-decoration-color: #C40000;
}
next create filter, you can place it in functions.php
<?php
add_filter( 'the_category','category_style', 10, 3 );
function category_style( $thelist, $separator, $parents ){
$class_to_add = 'category-style';
return str_replace( '<a href="', '<a class="' . $class_to_add . '" href="', $thelist );
}
?>
and last one display category in your file.
<?php echo the_category(''); ?>
I currently have this code:
<div class="box" style="margin-bottom: 10px; max-width: 100%;">
<div class="clearfix"style="padding: 10px 10px 0 10px; background: #f3f3f3; text-align: center;"> <span style="font-size: 1.17em; color: #000000;">LINGERIE</span><br/>
<p style="color: #000000;"> </p>
<span style="color: #000000;">♦Lingerie Sets ♦Hosiery ♦Plus Size </span><span style="font-size: 12px;"> </span></div>
</div>
Im unsure where to add my font? I would like to use Montserrat, which is the current font of my menu, ect. Thanks in advance
You can do this with CSS:
font-family: Montserrat;
for example:
<span style="color: #000000;font-family: Montserrat;">♦Lingerie Sets ...</span>
Source: http://www.w3schools.com/cssref/pr_font_font-family.asp
In this link you have a full explanation about how to use the Montserrat font:
1) Add this code to your website (add it into your <head> section of your html page):
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
2) Create a new file i.e. styles.css and add it also yo your <head> section (or reuse an old one). Then integrate your fonts into your CSS:
font-family: 'Montserrat', sans-serif;
Example:
h1 {
font-family: ‘Metrophobic’, Arial, serif;
font-weight: 400;
}
I am using the WordPress plugin for newsletter subscription. I want to change the format for the mail its sending to user but don't want to edit core cause when anyone upgrade plugin all changes will flushed away so anyone knows how to rightly edit the plugin files without making changes in its core files thanks for the help in advance.
<body style="background-color: #ddd; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #666; margin: 0 auto; padding: 0;">
<br>
<table align="center">
<tr>
<td style="font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #666;">
<div style="text-align: left; max-width: 500px; border-top: 10px solid #43A4D0; border-bottom: 3px solid #43A4D0;">
<div style="padding: 10px 20px; color: #000; font-size: 20px; background-color: #EFEFEF; border-bottom: 1px solid #ddd">
<?php echo get_option('blogname'); ?>
</div>
<div style="padding: 20px; background-color: #fff; line-height: 18px">
<?php echo $message; ?>
</div>
</div>
</td>
</tr>
</table>
</body>
This the code in which i don't want blog name but want the logo of the blog and also want to change that style which is given on the html tags directly.
function mail($to, $subject, $message) {
ob_start();
include NEWSLETTER_DIR . '/subscription/email.php';
$message = ob_get_clean();
Newsletter::instance()->mail($to, $subject, $message);
}
This might be a function to include the email template file.
You want to use filters and actions, which can be specified by a plugin to give other scripts/plugins the opportunity to work with your plugin.
More specifically, hopefully you can find something like this:
$email_body = apply_filters( 'amazingnewsletter_email_body', $email_body );
This means that you can filter (aka, make changes to) the variable $email_body within your own plugin/theme. If you just want this for your current website, it's easiest to place these directly in functions.php.
However, the actual hook you are going to use depends entirely on the plugin. And even then, the plugin may not offer the ability to edit the body with actions or filters.
I suggest reading the WordPress.org codex about actions and filters to get a better understanding of how they work. They are very powerful.
I'm still trying to finish this theme I'm working on. Atm I'm trying to implement header support, and it's not going to well with my layout. Everything was fine until I added this line:
<img src="<?php header_image(); ?>" />
So, header currently looks like this:
<hgroup class="blog-header">
<img src="<?php header_image(); ?>" alt="" />
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php the_breadcrumb(); ?>
</hgroup>
Here's the thing, this works fine when there's no header image, however when adding one, it messes up my styling for the site description - which bumps up a few pixels from where it was. The title and the description is supposed to be inline with each other, and I'm not sure how to fix this without one of the scenarios making it wrong..
Here's my style for these:
.site-title {
font-family: 'Bree Serif', Georgia, serif;
font-weight: 700;
font-style: uppercase;
font-size: 30px;
color: #fff;
margin: 0 0 0 90px;
padding: 60px 25px 60px 0;
float: left;
}
.site-description {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
font-weight: 400;
color: #c9c9c9;
padding: 68px 25px 60px 0;
}
Ok this is going to be bizarre but if you go into your body class in your reset.css, and change line-height=1 to line-height=4px; it shifts it upwards. Or even just changing from 1 to 1px; it works.
Let me know if this works.