Looking to insert a WooCommerce product price into a layout, well you can add the WooCommerce Product Price as a shortcode using the product ID as an attribute for the correct product.
The code below goes into your functions.php file, the add the shortcode where you need to display the price.
add_shortcode( 'cl_product_price', 'cl_woo_product_price_shortcode' );
/**
* Shortcode WooCommerce Product Price.
*
*/
function cl_woo_product_price_shortcode( $atts ) {
$atts = shortcode_atts( array(
'id' => null
), $atts, 'cl_product_price' );
if ( empty( $atts[ 'id' ] ) ) {
return '';
}
$product = wc_get_product( $atts['id'] );
if ( ! $product ) {
return '';
}
return $product->get_price_html();
}
And use the shortcode in the layout/template with the Product ID number as an attribute.
[cl_product_price id="1011"]
15 comments
MR Tran
I inserted the functions.php file but got the whole site error. You can specify the location to insert into the functions file
Rafael
this doesnt work for me. instead i use this code:
function custom_price_shortcode_callback( $atts ) {
$atts = shortcode_atts( array(
‘id’ => null,
), $atts, ‘product_price’ );
$html = ”;
if( intval( $atts[‘id’] ) > 0 && function_exists( ‘wc_get_product’ ) ){
// Get an instance of the WC_Product object
$product = wc_get_product( intval( $atts[‘id’] ) );
// Get the product prices
$price = wc_get_price_to_display( $product, array( ‘price’ => $product->get_price() ) ); // Get the active price
$regular_price = wc_get_price_to_display( $product, array( ‘price’ => $product->get_regular_price() ) ); // Get the regular price
$sale_price = wc_get_price_to_display( $product, array( ‘price’ => $product->get_sale_price() ) ); // Get the sale price
// Your price CSS styles
$style1 = ‘style=”font-size:40px;color:#e79a99;font-weight:bold;”‘;
$style2 = ‘style=”font-size:25px;color:#e79a99″‘;
// Formatting price settings (for the wc_price() function)
$args = array(
‘ex_tax_label’ => false,
‘currency’ => ‘EUR’,
‘decimal_separator’ => ‘.’,
‘thousand_separator’ => ‘ ‘,
‘decimals’ => 2,
‘price_format’ => ‘%2$s %1$s’,
);
// Formatting html output
if( ! empty( $sale_price ) && $sale_price != 0 && $sale_price < $regular_price )
$html = "
” . wc_price( $regular_price, $args ) . “” . wc_price( $sale_price, $args ) . “”; // Sale price is setelse
$html = “” . wc_price( $price, $args ) . “”; // No sale price set
}
return $html;
}
add_shortcode( ‘product_price’, ‘custom_price_shortcode_callback’ );
Fabio
Can I apply a CSS style to this code?
I tried:
.woocommerce-Price-amount amount{
color: #FF0000 !important;
background: #FFFFFF !important;
}
but it didn’t work. Your help would be much appreciated.
Cheers,
Fabio
Neil Gowran
You missing a class prefix ‘.’ for ‘amount’ should be
.amounthamedshh
is there any shotcode that without needing to add id being the price amount
and is the a shortcode that bring the price amount and currency symbol separately
I want to use two title boxes, one for price amount and one for price currency symbol
Waleed
What about sale/original price? can I have those separate?
Rene
i am asking for too much. can someone pls tell me which functions.php file do i need to update to use the shortcode…there are too many files and i am a not a developer. Thanks in advance!
Neil Gowran
It is the functions file that is in the active theme of the site.
Clinton
The Code works Perfect, Thanks
How to change the font size and color?
Shaun Pan
Great contribution work fine using product ID.
–Dynamic price required instead of ID grab.
But I am using in blocks lightbox pop up and I have twenty products with different prices, when user click link button the module show the same price for every product, I want see the module display the current product page price on popup blocks.
Any help will be much appreciated.
Stuart
Is there a way to do this dynamically so instead of using an id it grabs it from the product page?
V
You already know that woocommerce has 2 prices, normal price and reduced price.
Could it be that only the discounted price is displayed?
Thank you!!
V
Worked perfectly!!!!
I´m so happy =) =) =)
Great thanks!!
Sónia Dias
Hi Lewis,
I’ve tried using elementor but it doen’t work. :(
lewis
Worked Perfectly! Thank you for this code.