When it comes to buying groceries or provisions, a lot of customers prefer doing so from their local market or store (either offline or through their online platform), over buying it from other places. This is due to various reasons, the most important one being that they are familiar with the quality of products offered there. They also trust the store owners to not cheat or indulge in malpractices. This is not just true when it comes to groceries and provisions, but also applies to salons or stylists.
Many of us experience discomfort or hesitation trying out a new salon or getting our hair cut by a new stylist, especially if we have become habituated to one place or stylist and trust them with their craft. Prices of groceries change almost everyday, and prices of grooming services too are not always the same. For instance, in case of haircuts, depending on various factors such as hair length, texture & type of desired cut, the price can differ. Thus, whether it is to buy groceries or to book an appointment at salons or various other use cases, we need a way to allow for flexible or in-store pricing where the customer may be able to book services, or get goods delivered to them, even if the exact price of the commodity or service is not known at the time of purchase.
Read on to know how to display “In-Store Price” in WooCommerce instead of displaying the price as zero.
To set the pricing to “In-store”, most customers enter the regular price of the product as 0, in this way:
It is however not clear by this that the price is flexible or that the In-store price should be assumed.
To make this clear to the customers, you would have to atleast take care of the first point out of the following two:
- Replace the price which says “0.00” with text that says “In-store Price”
- Add a sentence that explains what “In-store Price” means. (optional)
You would need to paste the following code snippet, which contains two functions for each of the above, in the functions.php file of your child theme:
add_filter( 'woocommerce_get_price_html', 'ts_custom_woocommerce_get_price_html', 10, 2 );
function ts_custom_woocommerce_get_price_html( $price, $product )
{
return $product->get_price() == 0 ? 'In-store Price' : $price;
}
add_action( 'woocommerce_single_product_summary', 'ts_custom_text', 15 );
function ts_custom_text() {
global $product;
if ($product->get_price()==0)
{
print '<p class="custom_text"><i>In Store Price refers to price of the product in the store.</i></p>';
}
}
We have added functions to two hooks namely the woocommerce_get_price_html and woocommerce_single_product_summary hooks. The woocommerce_get_price_html hook is used to edit the way the price is displayed. We are setting a condition which says that if the price is set as 0, then the text should be replaced to “In-store Price”. Hence, the price of all products which have the price set to “0” will be displayed as “In-store Price”. The woocommerce_single_product_summary hook is used to display text below the price and above the short description. Since we have set a class here called as “custom_text”, this text, which offers explanation on the In-store price, can also be styled in different ways using CSS.
In this way, with the help of a short code snippet and two WooCommerce hooks, you can display any text in place of the price (which is set to 0 in our example), and add some text underneath it.
