I'd like to add a tooltip like this in order status, on mouse over:
I tried to use wc_help_tip as follows:
$help_tip = 'Ti do un suggerimento: studia!';
echo wc_help_tip(__($help_tip, 'mypluginname'));
As a result I get a similar behaviour: I display a question mark icon and on mouse over my custom text. I'd like to display my text in the same style as in WooCommerce order status column. Any suggestions?
I solved by myself using data-tip property as follows:
echo '<mark style="margin-bottom:2px;" class="order-status status-on-hold tips" data-tip="' . __('Document not created in MyPluginName', 'mypluginname') . '"><span>'. __('Not saved ', 'mypluginname') . '</span></mark><br />';
Related
The idea here is to include the price (example: $40) with the button text, making it like this: "Place Order & Pay $40".
That is the expected outcome but the code I'm using (with or without wc_price()) only generates a span tag on the button.
I know that I can just add the currency symbol myself into the button text, but the idea is to make it global.
My code so far:
add_filter('woocommerce_order_button_text', 'place_order_button_with_order_total');
function place_order_button_with_order_total(){
$order_value = wc_price(WC()->cart->total);
return __('Place Order & Pay '.$order_value., 'woocommerce');
}
How do I change the code to include the price in the button text?
You can remove the HTML markup that you get when using wc_price (or in my example get_total()) with the strip_tags() function.
Also you shouldn't add variables to translatable strings. If you want to make a combination of a translatable string and a variable value you can make use of the sprintf() function.
The following code should do the trick:
add_filter('woocommerce_order_button_text', 'place_order_button_with_order_total');
function place_order_button_with_order_total(){
return sprintf( '%s %s', __( 'Place Order & Pay', 'custom-order-button' ), strip_tags( WC()->cart->get_total() ) );
}
There is a line of code that I cannot change within the WooCommerce Template files. This line of code is displayed at the top of the view order page within my account / orders / view order
This is the code displayed in the inspector;
<p>Order #<mark class="order-number">58</mark> was placed on <mark class="order-date">3rd July 2018</mark> and is currently <mark class="order-status">Cancelled</mark>.</p>
And the only code I can find which is similar is in the tracking.php template file;
<p class="order-info"><?php
/* translators: 1: order number 2: order date 3: order status */
echo wp_kses_post( apply_filters( 'woocommerce_order_tracking_status', sprintf(
__( 'Order #%1$s was placed on %2$s and is currently %3$s.', 'woocommerce' ),
'<mark class="order-number">' . $order->get_order_number() . '</mark>',
'<mark class="order-date">' . wc_format_datetime( $order->get_date_created() ) . '</mark>',
'<mark class="order-status">' . wc_get_order_status_name( $order->get_status() ) . '</mark>'
) ) );
?></p>
The problem is that this code has a class on the p tag the one in the inspector doesn't. And if I edit this code there are no changes on the front end. But the code looks the same so I'm not sure if this is the correct template file for this code?
Where can I find this code in the template files or is this the correct file and something is going wrong?
There is another instance here: wp-content\plugins\woocommerce\templates\myaccount\view-order.php on line 30. Is that the what you are looking for?
If you completely comment this section on the WooCommerce plugin file, does it still echos? if yes, it might coming from a template file override, or it's not that file.
If this is the code, you should be able to add filter with the highest priority to change the content.
I'm using using the WooCommerce plugin for WordPress to display my products. The thing is, when you are viewing the product category (archive), you can see the product name, image and price, but that doesn't really say all that much about exactly what the product is.
What I would like is for some more information to become available when you hover the product images. Something a bit like this.
Would it be possible to retrieve some of the information about the image, that I can enter in the WordPress media libray: title, caption alt text or description?
You can check the webshop here.
EDIT:
I found that editing the content-product.php file in the WooCommerce plugin folder, if I put this:
?>
random text
<?php
somewhere inside the php tags in the <li> section of that file, I could get 'random text' to show either above or below the product image on the product archive page. So, if I could replace that with a function that would retreive for instance the product image caption or some custom field that I can fill out for each product, that would go a long way towards solving the issue.
So, if anyone knows of a function that does this, please share it here.
hello sir just use this plugin
https://wordpress.org/plugins/woocommerce-custom-product-data-fields/
for retrieving any costume fields do like this
Retrieving multiselect value
global $wc_cpdf;
$multiselect = $wc_cpdf->get_value($post->ID, '_mymultiselect');
foreach ($multiselect as $value) {
echo $value;
}
Retrieving image value
global $wc_cpdf;
$image_id = $wc_cpdf->get_value($post->ID, '_myimage');
$size = 'thumbnail';
$image_attachment = wp_get_attachment_image($image_id, $size);
echo $image_attachment;
}
I recently did this with a website for a client. I changed the hover text for each product from "Add to Cart" to the product short description. Here is my code:
add_filter( 'woocommerce_product_add_to_cart_text', 'woo_archive_custom_cart_button_text' ); // 2.1 +
function woo_archive_custom_cart_button_text() {
//get the product object
global $product;
$id = $product->get_id();
$descript = $product->get_short_description();
//take out html from description
$descript1 = strip_tags($descript);
//shorten description length to fit the product image box
if (strlen($descript1) > 100){
$descript1 = substr($descript1, 0, 99) . '...';
}
return __( $descript1, 'woocommerce' );
}
So I'm working on a Wordpress site with Bootstrap.
I'm using Bootstrap's navbar for the menu integrated with WP.
I have my homepage as a link in the navbar as "home".
Instead of "Home" as a text I want a glyphicon to appear and not text.
I think I could use CSS for that... something like this:
#menu-item-55 {
/* something that removes text and adds the icon */
}
But in bootstrap I have to use the icons like this
<span class="glyphicon glyphicon-search"></span>
Anyone?
Thanks
I figured that I can do it by adding a custom link and putting the inside the navigation label.
I still would like another way to do it. :D
Cheers
If you are using the wordpress 3+ wp_nav_menu with your theme adding this snippet to the functions.php will add a glyphicon-home link of bootstrap to your navigation.
function addHomeMenuLink($menuItems, $args)
{
if('header_menu' == $args->theme_location) // make sure to give the right theme location for the menu
{
if ( is_front_page() )
$class = 'class="current-menu-item active"';
else
$class = '';
$homeMenuItem = '<li ' . $class . '>' .
$args->before .
'<a class="glyphicon glyphicon-home" href="' . home_url( '/' ) . '" title="Home">' .
$args->link_before .
/* 'HOME' . //add home text if you want. */
$args->link_after .
'</a>' .
$args->after .
'</li>';
$menuItems = $homeMenuItem . $menuItems;
}
return $menuItems;
}
add_filter( 'wp_nav_menu_items', 'addHomeMenuLink', 10, 2 );
source
Navigate to Appearance > Menus
Find the menu item that you want to add an icon to
Expand the menu item
Inside the Navigation Item you will want to add your icon code either before or after or in place of your existing menu item label. For this example I’m going to use the home icon. Here’s what you would type:
< i class='icon-home icon-white'>< /i> Home
Note: Make sure to use single quotes!
5.Important: This is something you want to make sure to do, it could negatively impact your SEO if you ignore this step. You will want to make sure to put the plain text in the Title Attribute field.
6.Save the menu. (Also make sure you have selected one of the menus from the Theme Locations drop downs) That’s it!
http://jasonbradley.me/icons-in-the-wordpress-menu/
i am new to word press and trying to modify Buddy Press top bar.
my current top bar is
i want to make user area top bar like
the basic difference is to put the login user image/aviator on left side of bar.
and also if possible remove visit link from right side.
Thanks
I suggest you start by creating a custom theme (or plugin if you prefer) that is a child theme of the bp-default theme. Follow the instructions here or here.
From there you can remove the Visit menu like so:
remove_action( 'bp_adminbar_menus', 'bp_adminbar_random_menu', 100 );
When it comes to the avatar, the easiest solution is probably to unregister BuddyPress default admin bar logo bp_adminbar_logo, create a replacement function to output the avatar, and finally register that function instead.
remove_action( 'bp_adminbar_logo', 'bp_adminbar_logo' );
function my_adminbar_logo() {
echo '<a href="' . bp_core_get_userlink( bp_loggedin_user_id(), false, true ) . '">';
bp_loggedin_user_avatar( 'type=thumb&width=40&height=40' );
echo "</a>";
}
add_action( 'bp_adminbar_logo', 'my_adminbar_logo' );
There, just add some CSS and you're done :)