I am trying to add a custom icon after the product price in Woocommerce for a specific product category on shop page. So I would like to add an icon of a "fast delivery truck" after the price on all products from "FAST SHIPPING" product category.
I would like it to display that like in wish.com web site, like in this screenshot:
This is what I've tried:
add_filter( 'woocommerce_price_html', 'prepend_append_icon_to_price', 10, 2 );
function prepend_append_icon_to_price( $price, $instance ) {
if(is_product_category( 'fast-shipping')){
$icon = ' <i class="fas fa-shipping-fast"></i> ';
$price = $icon . $price . $icon;
}
return $price;
}
But It doesn't display anything after the price.
Any help would be much appreciated.
You are using the wrong hook since Woocommerce 3 and there are some errors in your code.
To display an icon after the price on the right for "fast-shipping" product category, two cases:
1) On all Woocommerce archive pages:
add_filter( 'woocommerce_get_price_html', 'prepend_append_icon_to_price', 10, 2 );
function prepend_append_icon_to_price( $price, $product ) {
if( has_term( 'fast-shipping', 'product_cat', $product->get_id() ) && ! is_product() ){
$price .= '<span style="float:right"><i class="fas fa-shipping-fast"></i></span> ';
}
return $price;
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
2) On a specific Woocommerce product category archive pages:
add_filter( 'woocommerce_get_price_html', 'append_icon_after_product_price', 10, 2 );
function append_icon_after_product_price( $price, $product ) {
if( is_product_category( 'fast-shipping' ) ){
$price .= '<span style="float:right"><i class="fas fa-shipping-fast"></i></span> ';
}
return $price;
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
Use css before or after belong to the price tag :
fa-shipping-fast:before{
content: url(.....);
width : ....;
height : ....;
....
}
Related
I have a WooCommerce store and am using the 'Advanced Dynamic Pricing for Woocommerce' plugin. I need to use this plugin because I have discount structures set up
Percentage discounts have been applied to all products in store. The original price is crossed out with the new price next to it.
enter image description here
I want to display a suffix next to the new price that says 'inc VAT' to indicate that the price is inclusive of VAT.
I have tried this code which seems to work on products that don't have discounts applied but not on discounted products.
add_filter( 'woocommerce_get_price_html', 'custom_price_suffix', 100, 2 );
function custom_price_suffix( $price, $product ){
$price = $price . 'inc VAT' ;
return apply_filters( 'woocommerce_get_price', $price );}
Anyone know how I can achieve this?
The generated HTML code looks like this:
<div class="woosg-price">
<div class="woosg-price-ori">
<del>
<span class="woocommerce-Price-amount amount">
<span class="woocommerce-Price-currencySymbol">£</span>262.00</span>
</del>
<ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-
currencySymbol">£</span>117.90</span></ins>
</div>
<div class="woosg-price-new"></div>
</div>
You can use woocommerce_get_price_suffix dedicated hook, targeting on sale products like:
add_filter( 'woocommerce_get_price_suffix', 'custom_price_suffix', 999, 4 );
function custom_price_suffix( $html, $product, $price, $qty ){
if ( $product->is_on_sale() ) {
return ' ' . __('inc VAT', 'woocommerce');
}
return $html;
}
or maybe this instead (because of Advanced Dynamic Pricing for Woocommerce plugin):
add_filter( 'woocommerce_get_price_html', 'custom_price_suffix', 999, 2 );
function custom_price_suffix( $price_html, $product ){
if ( $product->is_on_sale() ) {
$price_html .= ' ' . __('inc VAT', 'woocommerce');
}
return $price_html;
}
Code goes in functions.php file of the active child theme (or active theme). Tested and works.
Related:
Show Price Suffix only on all WooCommerce Product loops
Show a price suffix only on all WooCommerce single products
You Can add Suffix using the below filter.
add_filter( 'woocommerce_get_price_suffix', 'swt_add_price_suffix', 99, 4 );
function swt_add_price_suffix( $html, $product, $price, $qty ){
$html .= ' inc VAT';
return $html;
}
Or You can use below code as well.
add_filter( 'woocommerce_get_price_html', 'swt_add_price_suffix', 99, 2 );
function swt_add_price_suffix( $price, $product ){
$price = $price.' inc VAT';
return $price;
}
You can add suffix from the WooCommerce settings using the below steps.
Goto WooCommerce -> Settings -> General.
Mark checked "Enable tax rates and calculations" checkbox.
Open the Tax Tab.
Add the suffix text in "Price display suffix" text field.
Save the settings.
How to make the text with the name of the product in the woocommerce email be below the product image?
I want the letters to look good.
Updated: If the product image are displayed in your email notifications, you can try the following to display the product title under this image:
add_filter( 'woocommerce_order_item_name', 'product_title_under_thumbnail_emails', 10, 3 );
function product_title_under_thumbnail_emails( $item_name, $item, $is_visible ) {
// Targeting view order pages only
if( is_wc_endpoint_url() )
return $item_name;
// Get the WC_Product object (from order item)
$product = $item->get_product();
if( $product->get_image_id() > 0 && $is_visible )
$item_name = '<br>' . $item_name;
return $item_name;
}
Code goes in function.php file of your active child theme (or active theme). It should works.
In Woocommerce, I am customizing my view order in MyAccount. I already added the Product images with this answer code: Add the product image to Woocommerce my account order view
Now I would like to add the Product SKU to The View order pages but, I don't know how to get it.
Anyone have an Idea?
Replacing your code with the following to display the product SKU in order items:
// Display the product thumbnail in order view pages
add_filter( 'woocommerce_order_item_name', 'display_product_image_in_order_item', 20, 3 );
function display_product_image_in_order_item( $item_name, $item, $is_visible ) {
// Targeting view order pages only
if( is_wc_endpoint_url( 'view-order' ) ) {
$product = $item->get_product(); // Get the WC_Product object (from order item)
$thumbnail = $product->get_image(array( 36, 36)); // Get the product thumbnail (from product object)
// The thumbnail
if( $product->get_image_id() > 0 )
$item_name = '<div class="item-thumbnail">' . $thumbnail . '</div>' . $item_name;
// The SKU
if( $sku = $product->get_sku() )
$item_name .= '<br><div class="product-sku">' . $sku . '</div>';
}
return $item_name;
}
Code goes in function.php file of your active child theme (active theme). It should works.
I thought this would have been easy, but I am stuck. All I am trying to do is add the word each after the variation price on a product page. The solution I have found adds it on the category page and in two places on the product page.
The code is:
/* Adds a text Each - after price */
function change_product_price( $price ) {
$price .= ' each';
return $price;
}
add_filter( 'woocommerce_get_price_html', 'change_product_price' );
From the picture above, I only need the each added to the price above the add to cart button, but not the other pacles like the crossed out section in the photo above.
Thank you for any guidance you can provide.
The following code will add a suffix to the product variations price:
add_filter('woocommerce_available_variation', 'variation_price_custom_suffix', 10, 3 );
function variation_price_custom_suffix( $variation_data, $product, $variation ) {
$variation_data['price_html'] .= ' <span class="price-suffix">' . __("each", "woocommerce") . '</span>';
return $variation_data;
}
Code goes in function.php file of your active child theme (active theme). Tested and works.
I am working on woocommerce shop and here is the link of the website shop page
On this page the first product is out of stock. I would like to show Out of stock instead of "Sale!" badge on the image.
How can I do this?
If you look at the loop/sale-flash.php template you can see it has a filter for the sale flash. You can add this to your functions.php file to modify that output.
add_filter( 'woocommerce_sale_flash', 'sale_flash_stock_status' );
function sale_flash_stock_status( $output_html, $post, $product ){
if( $product->is_in_stock() ){
// Leave the sale flash unchanged if it's in stock.
return $output_html;
}
else {
// Change the html output custom stock status
$output_html = '<span class="stock-status">' . esc_html__( 'Out of stock', 'woocommerce' ) . '</span>'
return $output_html;
}
}
Add in the functions.php file of your theme:
add_filter('woocommerce_sale_flash', 'woocommerce_custom_sale_text', 10, 3);
function woocommerce_custom_sale_text($text, $post, $_product)
{
return '<span class="onsale">out of stock</span>';
}
The following code will add, on Woocommerce archives pages (as shop), a "Out of Stock" badge for out of stock products replacing the "Sale!" badge when products are on sale:
// Add badge "Out of stock" (and replace sale badge)
add_action('woocommerce_before_shop_loop_item_title','custom_before_shop_loop_item_title', 2 ); // Archives pages
function custom_before_shop_loop_item_title(){
remove_action('woocommerce_before_shop_loop_item_title','woocommerce_show_product_loop_sale_flash', 10 );
remove_action('woocommerce_after_shop_loop_item_title','woocommerce_show_product_loop_sale_flash', 6 ); // For storefront theme
add_action('woocommerce_before_shop_loop_item_title','show_product_loop_outofstock_badge', 10 );
}
function show_product_loop_outofstock_badge(){
global $post, $product;
if ( $product->get_stock_status() == 'outofstock' ) :
echo '<span class="onsale outofstock">'. esc_html__('Out of stock', 'woocommerce') .'</span>';
elseif ( $product->is_on_sale() ) :
echo '<span class="onsale">'. esc_html__( 'Sale!', 'woocommerce' ) .'</span>';
endif;
}
You might have to make some hook priority changes, depending on your theme. This code support also storefront theme.
Code goes in function.php file of your active child theme (or active theme). Tested and works.