This is the script on which I'd like to add some CSS :
// Download URLs
if ( $show_download_links && $_product->exists() && $_product->is_downloadable() ) {
$download_files = $order->get_item_downloads( $item );
$i = 0;
foreach ( $download_files as $download_id => $file ) {
$i++;
if ( count( $download_files ) > 1 ) {
$prefix = sprintf( __( 'Download %d', 'woocommerce' ), $i );
} elseif ( $i == 1 ) {
$prefix = __( 'Download', 'woocommerce' );
}
echo "\n" . $prefix . '(' . esc_html( $file['name'] ) . '): ' . esc_url( $file['download_url'] );
}
}
// allow other plugins to add additional product information here
do_action( 'woocommerce_order_item_meta_end', $item_id, $item, $order );
}
It is part of a Woocommerce email (completed order). I'd like to add some CSS there, how can I do this ?
According to Woocommerce documentation, a more powerful (and advanced) way to customize order emails is to override an email template file. WooCommerce uses a convenient templating system that allows you to customize parts of your site (or emails) by copying the relevant template file into your theme, and modifying the code there. Each of the email types has a template file for its content
Can you check woocommerce documentation here
Please check below code
First Solution
<?php
$css = file_get_contents('CSS/main.css');
echo $css;
?>
Second Solution
<style>
<?php include 'CSS/styles.css'; ?>
</style>
Third Solution
<link rel="stylesheet" href="CSS/styles.css" type="text/css">
If you want to add something on the download do it like this:
$prefix = sprintf( __( '<strong>Download</strong> <span style="padding-top:10px;>"%d</span>', 'woocommerce' ), $i );
Otherwise, as the others said here, file_get_contents(foo.css) or <? echo "<style>{something;}</style>";
It's very simple.
Just do like this:
<?php if($page=='page'): ?>
<style>.container{width:100%}</style>
<?php else: ?>
...
<?php endif;?>
Related
Does somebody know how to insert the first 3 images of an order into the WooCommerce my-orders table?
Additionally I would like to add an "and more"-button, linked to the specific order (same link as order-number) with an if condition.
Hint: To stay more flexible it would be nice to get a solution without hooks, if possible.
I'd like to edit even more and overwrite the my-orders.php via child-theme later.
Here is the solution I use at the moment.
<div class="order-status">
<span>Order Status</span>
<?php
elseif ( 'order-status' === $column_id ) :
$order_color_check = $order->get_status();
if($order_color_check=="completed") :
echo '<span class="order-status-value" style="color: green;">' . esc_html( wc_get_order_status_name( $order->get_status() ) ) . '</span>';
else :
echo '<span class="order-status-value" style="color: red;">' . esc_html( wc_get_order_status_name( $order->get_status() ) ) . '</span>';
endif; ?>
</div>
Know that myaccount/my-orders.php is #deprecated since WC 2.6.0
My answer is via hooks, but editing via the template file should be done via myaccount/orders.php
The output of the html will need some CSS for styling (theme dependent)
// Adds a new column to the "My Orders" table in the account.
function filter_woocommerce_account_orders_columns( $columns ) {
// Add a new column
$new_column['order-products'] = __( 'Products', 'woocommerce' );
// Return new column as first
return $new_column + $columns;
}
add_filter( 'woocommerce_account_orders_columns', 'filter_woocommerce_account_orders_columns', 10, 1 );
// Adds data to the custom "order-products" column in "My Account > Orders"
function filter_woocommerce_my_account_my_orders_column_order( $order ) {
$count = 0;
// Loop through order items
foreach ( $order->get_items() as $item_key => $item ) {
// Count + 1
$count++;
// First 3
if ( $count <= 3 ) {
// The WC_Product object
$product = wc_get_product( $item['product_id'] );
// Instanceof
if ( $product instanceof WC_Product ) {
// Get image - thumbnail
$thumbnail = $product->get_image( array(50, 50) );
// Output
echo '<div class="product-thumbnail" style="display:inline-block;padding:2px;">' . $thumbnail . '</div>';
}
} elseif ( $count == 4 ) {
// Output "read more" button
echo '<span>'. __( 'Read more', 'woocommerce') . '</span>';
break;
}
}
}
add_action( 'woocommerce_my_account_my_orders_column_order-products', 'filter_woocommerce_my_account_my_orders_column_order', 10, 1 );
Does somebody know how to insert the first 3 images of an order into the WooCommerce my-orders table?
Additionally I would like to add an "and more"-button, linked to the specific order (same link as order-number) with an if condition.
Hint: To stay more flexible it would be nice to get a solution without hooks, if possible.
I'd like to edit even more and overwrite the my-orders.php via child-theme later.
Here is the solution I use at the moment.
<div class="order-status">
<span>Order Status</span>
<?php
elseif ( 'order-status' === $column_id ) :
$order_color_check = $order->get_status();
if($order_color_check=="completed") :
echo '<span class="order-status-value" style="color: green;">' . esc_html( wc_get_order_status_name( $order->get_status() ) ) . '</span>';
else :
echo '<span class="order-status-value" style="color: red;">' . esc_html( wc_get_order_status_name( $order->get_status() ) ) . '</span>';
endif; ?>
</div>
Know that myaccount/my-orders.php is #deprecated since WC 2.6.0
My answer is via hooks, but editing via the template file should be done via myaccount/orders.php
The output of the html will need some CSS for styling (theme dependent)
// Adds a new column to the "My Orders" table in the account.
function filter_woocommerce_account_orders_columns( $columns ) {
// Add a new column
$new_column['order-products'] = __( 'Products', 'woocommerce' );
// Return new column as first
return $new_column + $columns;
}
add_filter( 'woocommerce_account_orders_columns', 'filter_woocommerce_account_orders_columns', 10, 1 );
// Adds data to the custom "order-products" column in "My Account > Orders"
function filter_woocommerce_my_account_my_orders_column_order( $order ) {
$count = 0;
// Loop through order items
foreach ( $order->get_items() as $item_key => $item ) {
// Count + 1
$count++;
// First 3
if ( $count <= 3 ) {
// The WC_Product object
$product = wc_get_product( $item['product_id'] );
// Instanceof
if ( $product instanceof WC_Product ) {
// Get image - thumbnail
$thumbnail = $product->get_image( array(50, 50) );
// Output
echo '<div class="product-thumbnail" style="display:inline-block;padding:2px;">' . $thumbnail . '</div>';
}
} elseif ( $count == 4 ) {
// Output "read more" button
echo '<span>'. __( 'Read more', 'woocommerce') . '</span>';
break;
}
}
}
add_action( 'woocommerce_my_account_my_orders_column_order-products', 'filter_woocommerce_my_account_my_orders_column_order', 10, 1 );
actions and filters. On my WooCommerce site I get the following message when I remove a product from the shopping cart:
"<product name>" removed. Undo?
Looking over WooCommerce source code I have found a conditional statement in class-wc-form-header.php as part of the function update_cart_action():
$removed_notice .= ' ' . __( 'Undo?', 'woocommerce' ) . '';
But I can't find the way to use it for eliminate this notice. I have try css solutions but it didn't work:
PS: that may not be the code snippet that is bothering me, but its the only one I have found that seems to make sense.
How can I remove this bothering notice?
Thanks.
You can do that in different ways:
1. Overriding the notices.php template:
You have first (if not done yet) to copy woocommerce templates folder inside your active child theme or theme, then rename it woocommerce. Then open/edit notices/notices.php and try to replace the code:
<?php
/**
* Show messages
* ... Blabla ... / ... blabla ...
* #version 1.6.4
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
if ( ! $messages ){
return;
}
?>
<?php foreach ( $messages as $message ) : // Change your template code from here
if ( strpos( $message, 'removed' ) === false ) : ?>
<div class="woocommerce-info"><?php echo wp_kses_post( $message ); ?></div>
<?php endif;
endforeach; ?>
2. Using hooks:
function remove_added_to_cart_notice()
{
$notices = WC()->session->get('wc_notices', array());
foreach( $notices['notices'] as $key => &$notice){
if( strpos( $notice, 'removed' ) !== false){
$added_to_cart_key = $key;
break;
}
}
unset( $notices['notices'][$added_to_cart_key] );
WC()->session->set('wc_notices', $notices);
}
add_action('woocommerce_before_single_product','remove_added_to_cart_notice',1);
add_action('woocommerce_shortcode_before_product_cat_loop','remove_added_to_cart_notice',1);
add_action('woocommerce_before_shop_loop','remove_added_to_cart_notice',1);
3. Using CSS (with something like):
.woocommerce-cart .woocommerce-message {
display: none !important;
}
References:
Wordpress - Woocommerece remove "Added to Cart" message
New wc-notice-functions.php on github
I had to change this to get it to work. Specifically, the array field is singular notice or at least it is now.
$notices = WC()->session->get('wc_notices', array());
foreach( $notices['notice'] as $key => &$notice){
if( strpos( $notice, 'whilst' ) !== false){
$BadNotice_key = $key;
unset( $notices['notice'][$BadNotice_key] );
WC()->session->set('wc_notices', $notices);
break;
}
}
Just an update regarding Overriding the notices.php template:
<?php foreach ( $notices as $notice ) :
if ( strpos( $notice['notice'], 'removed' ) === false ) : ?>
<div class="woocommerce-message"<?php echo wc_get_notice_data_attr( $notice ); ?> role="alert">
<?php echo wc_kses_notice( $notice['notice'] ); ?>
</div>
<?php endif;
endforeach; ?>
Had to have add the 'notice' array key to the strpos method or it wasn't finding the "removed" string within the notice message. Hope this helps others who were having issues attempting to use this template override method.
There is a very simple answer to this problem as there is a hook that you can plug onto.
// This line is to be added in the functions.php
add_filter('woocommerce_cart_item_removed_notice_type', '__return_null');
1. Easy way: in wp-content/plugins/woocommerce/includes/class-wc-form-handler.php
2. remove/disable this line: wc_add_notice( $removed_notice ); (line 523) like this
if ( $product && $product->is_in_stock() && $product->has_enough_stock( $cart_item['quantity'] ) ) {
$removed_notice = sprintf( __( '%s removed.', 'woocommerce' ), $item_removed_title );
$removed_notice .= ' ' . __( 'Undo?', 'woocommerce' ) . '';
} else {
$removed_notice = sprintf( __( '%s removed.', 'woocommerce' ), $item_removed_title );
}
// wc_add_notice( $removed_notice );
}
I am at my wits end here and have tried every solution I could find online for days and nothing works. The worst part is the problem should be solvable in about 4 lines of code but it just isn't working.
What I need:
When the order completed email goes out I want the order notes (not the customer notes, the actual Order Notes) added into the email. I can filter through them after but I cannot seem to get the notes to appear in the email at all. This is an example of an order note...on an order:
so far I have tried this code:
::PHP::
<?php
$comments = $order->get_customer_order_notes();
if($comments){
echo '<h2>' . _e( 'Order Notes', 'woocommerce' ) . '</h2>';
foreach($comments as $comment) {
echo $comment->comment_content . '<br />';
}
}
?>
which is basically what I need except its targeting the customer_order_notes, which are comments users add into the order when they place it. like: "my dog will pick up my package, his name is lucky"
I have also written a lugin to get the notes based off other peoples, the base is this:
::PHP::
add_action( 'woocommerce_email_order_meta', 'bl_add_order_notes_to_completed_email', 10 );
function bl_add_order_notes_to_completed_email() {
global $woocommerce, $post;
// If the order is not completed then don't continue.
// if ( get_post_status( $post->ID ) != 'wc-completed' ){
// return false;
// }
$args = array(
'post_id' => $post->ID,
'status' => 'approve',
'type' => 'order_note'
);
// Fetch comments
$notes = get_comments( $args );
echo '<h2>' . _e( 'Order Notes', 'woocommerce' ) . '</h2>';
echo '<ul class="order_notes" style="list-style:none; padding-left:0px;">';
// Check that there are order notes
if ( $notes ) {
// Display each order note
foreach( $notes as $note ) {
?>
<li style="padding:0px -10px;">
<div class="note_content" style="background:#d7cad2; padding:10px;">
<?php echo wpautop( wptexturize( $note->comment_content ) ); ?>
</div>
<p class="meta">
<abbr class="exact-date" title="<?php echo $note->comment_date; ?>"><?php printf( __( 'added on %1$s at %2$s', 'woocommerce-customer-order-notes-completed-order-emails' ), date_i18n( wc_date_format(), strtotime( $note->comment_date ) ), date_i18n( wc_time_format(), strtotime( $note->comment_date ) ) ); ?></abbr>
<?php if ( $note->comment_author !== __( 'WooCommerce', 'woocommerce-customer-order-notes-completed-order-emails' ) ) printf( ' ' . __( 'by %s', 'woocommerce-customer-order-notes-completed-order-emails' ), $note->comment_author ); ?>
</p>
</li>
<?php
}
}
echo '</ul>';
}
I don't really know why that isnt working. It looks like it should but it does nothing.
If anyne has a solution that will print those notes into my email...like seen in this image...I will love you forever.
Create a folder called woocommerce in your theme folder. In this folder, create a new folder called emails, and in this folder duplicate the customer-completed-order.php from wp-content/plugins/woocommerce/templates/emails. And add this snippet at line 51: Refer this article
<h2><?php _e( 'Order Notes', 'woocommerce' ); ?></h2>
<?php
$args = array(
'status' => 'approve',
'post_id' => $order->id
);
$comments = get_comments($args);
foreach($comments as $comment) :
echo $comment->comment_content . '<br />';
endforeach;
?>
Try adding this code to your functions.php:
add_action( 'woocommerce_email_before_order_table', 'wc_add_order_notes_to_completed_emails', 10, 1 );
function wc_add_order_notes_to_completed_emails($order) {
if ( $email->id == 'customer_completed_order' ) {
echo '<h2>' . __( 'Order Notes', 'woocommerce' ) . '</h2>';
$order_notes = $order->get_customer_order_notes();
foreach ( $order_notes as $order_note ) {
echo '<p>' . $order_note->comment_content . '<p>';
}
}
}
I have been trying to achieve the same thing as Ecolis and came across a solution which may help other users. I simply wanted to echo an Order Note into an email. In my email template in my child theme folder I wrote the following code:
<?php echo wpautop( wptexturize( make_clickable( $customer_note ) ) ); ?>
Source of code - https://github.com/woocommerce/woocommerce/blob/master/templates/emails/customer-note.php
Answering this much later; but better than never. The final code I ended up using that worked and is still functioning as of today is the following:
?>
<h2><?php _e( 'Tracking ID', 'woocommerce' ); ?></h2>
<?php
$comments = $order->get_customer_order_notes();
$customer_comments = $order->get_order_notes();
foreach( $comments as $comment ){
if ( strpos( $comment -> comment_content, "MyTracking" ) !== false ){
echo $comment -> comment_content . '<br />';
}
}
foreach( $customer_comments as $comment_2 ){
if ( strpos( $comment_2 -> comment_content, "filterText" ) !== false ){
echo $comment_2 -> comment_content . '<br />';
}
}
This was put inside the email template customer-completed-order.php, taken from the woocommerce plugin's templates/emails/ directory. I placed the code in at the desired location and put the customer-completed-order.php file in my child theme in it's root directory within the following folders: woocommerce/emails/customer-completed-order.php
It then added both the customer and admin notes. I also added a filter, because my main goal was to get the tracking data posted to the admin order notes sent to the customer in their completed order email.
I stumbled across this older thread looking for a way to include the note that the customer places in "Order notes" on the checkout page in the Woocommerce New Order email received by the admin.
The code that #Martyn Gray posted above worked perfectly:
echo wpautop( wptexturize( make_clickable( $customer_note ) ) );
I copied the Woocommerce admin-new-order.php email template into my child theme and added it inside the existing code "user-defined additional content".
This is the original code:
/**
* Show user-defined additional content - this is set in each email's settings.
*/
if ( $additional_content ) {
echo wp_kses_post( wpautop( wptexturize( $additional_content ) ) );
}
This is the updated code:
/**
* Show user-defined additional content - this is set in each email's settings.
*/
if ( $additional_content ) {
echo wp_kses_post( wpautop( wptexturize( $additional_content ) ) );
echo wpautop( wptexturize( make_clickable( $customer_note ) ) );
}
The customer's note now appears on all Woocommerce emails including new order, invoice, etc.
WP v5.6.2
WC v5.0.0
Hope that helps anyone that follows.
Currently I'm using the Woocommerce plugin for affiliate products. I would like to be able to click on the thumbnail on the main page and go directly to amazon, for example. Currently it's setup so that once clicked it goes to the product detail page on my site. From there you can get to the amazon page. However, fewer clicks the better.
So I found the hook in the content-product.php page. What I did was wrap the whole thing in a URL and used a custom field to add in the URL. Doesn't work as intended. What happens is that the URL goes to amazon only when using one of the sale flash options. When turned off, the URL does not go to amazon, but to the product page on my site. I don't know where else to place the URL wrapper.
So i tried looking for the <a href="<?php the_permalink(); ?>"> that is currently controlling where the thumbnail goes. I traced the function to the woocommerce-template.php file. That's where I hit a dead end. I'm not sure where it is for the thumbnail currently.
Here is my modified code that works partially in the content-product.php page:
<div class="thumbnail-wrapper">
<a href="<?php echo get_post_meta( $post->ID, 'URLThumb', true ); ?>">
<?php
/**
* woocommerce_before_shop_loop_item_title hook
*
* #hooked woocommerce_show_product_loop_sale_flash - 10
* #hooked woocommerce_template_loop_product_thumbnail - 10
*/
do_action( 'woocommerce_before_shop_loop_item_title' );
?>
</a>
</div>
Here is the thumbnail function that I can't seem to drill down further to find the existing <a href="<?php the_permalink(); ?>"> to change. This is on the woocommerce-template.php page.
if ( ! function_exists( 'woocommerce_template_loop_product_thumbnail' ) ) {
/**
* Get the product thumbnail for the loop.
*
* #access public
* #subpackage Loop
* #return void
*/
function woocommerce_template_loop_product_thumbnail() {
echo woocommerce_get_product_thumbnail();
}
}
File Name: woocommerce.php
File Location: wp-content/themes/'your-theme'/theme/woocommerce.php
Solution: Target external products via query of product type, looping in $product_url when external, and looping in get_permalink() when simple/variable. This code also accounts for opening external products in a new tab.
I'm going to post one version of what the code looked like before, and then another with my additions + modifications. In my theme, the first line of code I pasted exists on line 374 within woocommerce.php (this will differ depending on your theme, and some themes may not have a modified woocommerce.php file. If that is the case, just drag woocommerce.php into your theme directory from the plugin.
Code Before Addition/Modification:
function woocommerce_template_loop_product_thumbnail() {
global $product, $woocommerce_loop;
$i = 0;
$attachments = array();
$attachments[] = get_post_thumbnail_id();
$attachments = array_merge( $attachments, $product->get_gallery_attachment_ids() );
$original_size = wc_get_image_size( 'shop_catalog' );
if ( $woocommerce_loop['view'] == 'masonry_item' ) {
$size = $original_size;
$size['height'] = 0;
YIT_Registry::get_instance()->image->set_size('shop_catalog', $size );
}
switch ( $woocommerce_loop['products_layout'] ) {
case 'zoom':
if( isset( $attachments[1] ) ) {
echo '' . woocommerce_get_product_thumbnail() . '';
echo '<div class="attachments-thumbnail">';
while( $i < 3 ){
if( ! isset( $attachments[ $i ] ) ) break;
$src = wp_get_attachment_image_src( $attachments[ $i ], 'shop_catalog' );
$active = ( $i == 0 ) ? 'active' : '';
echo '<div class="single-attachment-thumbnail ' . $active . '" data-img="' . $src[0] . '">';
yit_image( "id=$attachments[$i]&size=shop_thumbnail&class=image-hover" );
echo '</div>';
$i++;
}
echo '</div>';
}
else {
echo '' . woocommerce_get_product_thumbnail() . '';
}
break;
case 'flip':
if( isset( $attachments[1] ) ) {
echo '<span class="face">' . woocommerce_get_product_thumbnail() . '</span>';
echo '<span class="face back">';
yit_image( "id=$attachments[1]&size=shop_catalog&class=image-hover" );
echo '</span></a>';
}
else {
echo '<span class="face">' . woocommerce_get_product_thumbnail() . '</span>';
}
break;
}
Code After Addition/Modification:
function woocommerce_template_loop_product_thumbnail() {
global $product, $woocommerce_loop;
if(!is_single() ) {
if( $product->is_type( 'external' ) ){
$product_url = $product->get_product_url() . '"target="_blank""';
} else( $producenter code heret_url = get_permalink());
} else ($product_url = get_permalink());
$i = 0;
$attachments = array();
$attachments[] = get_post_thumbnail_id();
$attachments = array_merge( $attachments, $product->get_gallery_attachment_ids() );
$original_size = wc_get_image_size( 'shop_catalog' );
if ( $woocommerce_loop['view'] == 'masonry_item' ) {
$size = $original_size;
$size['height'] = 0;
YIT_Registry::get_instance()->image->set_size('shop_catalog', $size );
}
switch ( $woocommerce_loop['products_layout'] ) {
case 'zoom':
if( isset( $attachments[1] ) ) {
echo '' . woocommerce_get_product_thumbnail() . '';
echo '<div class="attachments-thumbnail">';
while( $i < 3 ){
if( ! isset( $attachments[ $i ] ) ) break;
$src = wp_get_attachment_image_src( $attachments[ $i ], 'shop_catalog' );
$active = ( $i == 0 ) ? 'active' : '';
echo '<div class="single-attachment-thumbnail ' . $active . '" data-img="' . $src[0] . '">';
yit_image( "id=$attachments[$i]&size=shop_thumbnail&class=image-hover" );
echo '</div>';
$i++;
}
echo '</div>';
}
else {
echo '' . woocommerce_get_product_thumbnail() . '';
}
break;
case 'flip':
if( isset( $attachments[1] ) ) {
echo '<span class="face">' . woocommerce_get_product_thumbnail() . '</span>';
echo '<span class="face back">';
yit_image( "id=$attachments[1]&size=shop_catalog&class=image-hover" );
echo '</span></a>';
}
else {
echo '<span class="face">' . woocommerce_get_product_thumbnail() . '</span>';
}
break;
}
Code Added:
if( $product->is_type( 'external' ) ){
$product_url = $product->get_product_url() . '"target="_blank""';
} else( $product_url = get_permalink());
} else ($product_url = get_permalink());
Code Modified:
With the exception of the code that was added above, replace all instances of get_permalink() with $product_url.
Figured out a work around. Since the SalesFlash image was the one being triggered, I just used a blank PNG image to overlay ontop of the product image. Turned all my products into sale items and it works. Not perfect, but I don't need the sale icon anyway.
But if anyone does know of a proper programming solution, I would change it. Thanks.
this on worked for me in the content-product.php without asking the meta data
<div class="thumbnail-wrapper"><a href="<?php echo $product->product_url; ?>">
<?php
/**
* woocommerce_before_shop_loop_item_title hook
*
* #hooked woocommerce_show_product_loop_sale_flash - 10
* #hooked woocommerce_template_loop_product_thumbnail - 10
*/
do_action( 'woocommerce_before_shop_loop_item_title' );
?> </a>
</div
I did the same in thing in loop/add-to-cart.php for the "Add More"
and "Details" buttons in lines 21 get_permalink() and 57 $link by replacing them respectively like this:
LINE 27
$details = sprintf('%s', get_permalink(), apply_filters('yit_details_button', __( 'Details', 'yit' )), apply_filters('yit_details_button', __( 'Details', 'yit' )) );
REPLACE get_permalink() with $product->product_url
AND IN LINE 57
$add_to_cart = sprintf('%s', apply_filters( 'yit_external_add_to_cart_link_loop', $link, $product ), $label, $label);
REPLACE again $link with $product->product_url .
I had no problems untill now. I was wondering if you Finally found a clear solution so we could do the same thing for thumnails and product images ,without adding a blank image on top of them.Im not much of code so i would appreciate if someone Knows how to put an external link on the product images on the front page.Thank you