WooCommerce template customization

Problem: use specific terminology depending on product type.

A recent project offered this nice challenge: display two separate ‘product’ types, one, fulfillable, the other a treatment provided at a facility. With WooCommerce, one gets a cart, and a set of PHP templates. Each template is populated with standard e-commerce headings and phrases, e.g. “Proceed to checkout”, “Product”, “Cart totals”, and “Thank you for your purchase.” All this helps to manage customer details, cart totals, checkout forms, and many, many other details.

(See the  WooCommerce codex for theme structure details.)

Consider that when booking an appointment for treatment, and for which fees/payments aren’t discussed on the web page, default “Product” and “Total” may not be appropriate terms, yet, when buying a coffee mug, such words are exactly right.

Let’s edit a template using a set of if statements.

When displaying order details, WooCommerce helpfully utilizes a page called order-details.php, wherein a re-cap of either our appointment, or, coffee mug purchase is shown.

I decided to use the calculate_totals() function found in the WC_Order class to conditionally show a product type and total by checking to see if our calculated total is 0, or, greater than 0.

 <?php if ( $order->calculate_totals() == 0 ){?>

 <th class="woocommerce-table__product-name product-name">
<?php _e( 'Appointment', 'woocommerce' ); ?></th>

 <th class="woocommerce-table__product-table product-total">
<?php _e( '&nbsp;' ); ?></th>

 <?php } elseif ( $order->calculate_totals() >= 0 ){?>

 <th class="woocommerce-table__product-name product-name">
<?php _e( 'Product', 'woocommerce' ); ?></th>

 <th class="woocommerce-table__product-table product-total"><?php _e( 'Total', 'woocommerce' ); ?></th>

 <?php }?>

This takes care of our terminology switch, and the viewer sees it as the “Order details” section of the thankyou.php page.

This is just one tiny fragment of a myriad of customizations you’ll make when working with WordPress, and WooCommerce. Some changes are approached differently, for instance, when actions and filter hooks are available. An example – recall that we don’t wish to show the output of $price for an appointment type product, especially on the single product and archive product pages. So, we hook into the woocommerce_get_price_html function like this (in our functions.php file):

 *  Hide price of appointments 

function rbd_hide_price($price){
global $product;

if( $product->is_type('simple') ){
echo $price,''; 
} elseif ( $product->is_type('booking') ){
	remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
	remove_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );	 

Here, we ask “is this a simple, or, a booking product type?” If booking, let’s remove the actions woocommerce_template_single_price, and woocommerce_template_loop_price.

A useful list of hooks for WooCommerce is on their website. 

Maybe this is helpful to your project? Then, send me a “Howdy!”

By Beau

Painter, designer (print and digital) since the twentieth century.

Leave a comment

Your email address will not be published. Required fields are marked *