WooCommerce is the most popular ecommerce platform in the world and there is a reason for this – it is highly customizable, easy to use and completely free. While it gives you an awesome standardized solution, which you may use to build a complete online store, sometimes you may want to expand your Wordpress website functionalities and further customize it according to your clients’ needs. In this way, you can make your website stand out from the rest. There are many plugins out there, which you can use to change WooCommerce standard behavior. However, plugins may not always be the best solution, since they are not specifically made for your website and may be bloated with additional or unnecessary functionalities. It is always better to write custom code. In this tutorial, I have prepared a list of the top 12 ready-to-use custom WooCommerce functions that you can use to significantly increase the functionality of your web store to make your website stand out and give you a competitive advantage over the others.

To make use of these functions, you first need to create a child theme. Here is a nice tutorial how to do that in Wordpress: How to Create a WordPress Child Theme (Video). After you have successfully set up your child theme, paste any of the codes below in your child theme’s functions.php. Please, do not copy the opening php tag, it only needs to be included once, at the beginnng of the file.

1. Move WooCommerce Product Galery Images to the Right

Sometimes, you may want to move your product gallery images to the right side of the single product page. Here is how to do that:

<?php
add_filter ( 'WooCommerce_product_thumbnails_columns', 'change_gallery_columns' );
function change_gallery_columns() {
     return 1; 
}

2. Rename Product Tabs

Sometimes you would like to rename the product tabs on the single product page.

<?php
add_filter( 'WooCommerce_product_tabs', 'woo_rename_tab', 98);
function woo_rename_tab($tabs) {
	$tabs['description']['title'] = 'Omschrijving';
	$tabs['additional_information']['title'] = 'Extra informatie';
	return $tabs;
}

This function will rename the Description tab to Omschrijving and the Additional Information tab to Extra informatie. You are free to customize it according to your own needs

3. Add a Custom Product Tab

Sometimes you may also want to include a custom product tab on the Single product page. Paste the following code in your child theme’s functions.php:

<?php
add_filter( 'WooCommerce_product_tabs', 'new_product_tab' );
function new_product_tab( $tabs ) {
	/* Adds the new tab */
	$tabs['test_tab'] = array(
		'title' 	=> __( 'Custom Tab, 'WooCommerce' ),
		'priority' 	=> 50,  
		'callback' 	=> 'new_product_tab_content'
	);
	return $tabs;  /* Return all  tabs including the new New Custom Product Tab  to display */
}
/* The new tab content */
function new_product_tab_content() {
echo '<p>Your custom tab content</p>';
}

(Sometimes, you may want to further customize the product tabs. For example, you may want to add custom text for each product. Here is an amazing WordPress plugin that can help you achieve this: Custom Product Tabs for WooCommerce)

4. Reorder Single Product Page Content

Sometimes, you may wish to move a section in your WooCommerce single product page. For example, you may want to move the product data tabs from the bottom of the page to a position just below the image title:

<?php
/* Reorder single product page content */
remove_action( 'WooCommerce_after_single_product_summary', 'WooCommerce_output_product_data_tabs', 10 );
add_action( 'WooCommerce_single_product_summary', 'WooCommerce_output_product_data_tabs', 7 );

If you want to learn more about how to customize and reorder the content of the single product page, here is a nice tutorial on that subject: Reorder Content on WooCommerce Single Product Page.

5. Remove Zooming Effect in WooCommerce

<?php
remove_theme_support( 'wc-product-gallery-zoom' );

6. Hide Product Price Range on Single Product Page

Sometimes, when you have product variations, it is a good idea to get rid of the price variations because they do not always add extra value to the customer. Paste this code to your child theme’s functions.php file:

<?php
add_action( 'WooCommerce_single_product_summary', 'hide_single_product_variable_price_range', 1 );
function hide_single_product_variable_price_range(){
    global $product;
    if( $product->is_type('variable') ):
		remove_action('WooCommerce_single_product_summary', 'WooCommerce_template_single_price', 10 );
    endif;
}

7. Hide Product Price Range Entirely

If you remove the product price range on the single product page, it will still appear on WooCommerce product archives page. You may want to hide it entirely. Use the following code:

<?php
add_filter( 'WooCommerce_variable_sale_price_html', 'detect_variation_price_format', 10, 2 );
add_filter( 'WooCommerce_variable_price_html', 'detect_variation_price_format', 10, 2 );
function detect_variation_price_format( $price, $product ) {

// Main Price
$prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
$price = $prices[0] !== $prices[1] ? sprintf( __( '', 'WooCommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

// Sale Price
$prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) );

sort( $prices );

$saleprice = $prices[0] !== $prices[1] ? sprintf( __( '', 'WooCommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

if ( $price !== $saleprice ) {
$price = '<del>' . $saleprice . '</del> <ins>' . $price . '</ins>';
}

return ;
}

8. Display Image Title on Single Product Page With Variations

Product variation gallery on the single product page is nice but it will be even better to add image captions on the single product page. This can add a great value to your users, because they will be able to differentiate the product not only by its image but also thanks to your custom text. In this way, you can change the product title, when an image from the product gallery is selected The code takes the image title and prints it below the image on the single product page. You can customize the image title from your media library. Go to Dashboard – media – library and select the image you want to edit. You will see image tabs on the right side of the page. Click on the Image Title field and put your custom text there. After that, paste the following code in your child theme’s functions.php:

<?php
function gcw_insert_captions( $html, $attachment_id ) {
	$captions = '';
	$title = get_post_field( 'post_title', $attachment_id );
	if( !empty( $title ) ) {
		$captions .= '<h5><br>' . esc_html( $title ) . '</h5>';
	}
	$description = get_post_field( 'post_excerpt', $attachment_id );
	if( !empty( $description ) ) {
		$captions .= '<p>' . $description . '</p>';
	}
	if( !empty( $captions ) ) {
		$captions = '<div class="gcw-caption">' . $captions . '</div>';	
		$html = preg_replace('~<\/div>$~', $captions . '</div>', $html );
	}
	return $html;
}
add_filter( 'WooCommerce_single_product_image_thumbnail_html', 'gcw_insert_captions', 10, 2 );

9. Replace “choose an option” Text with Custom Text

This code applied on the single product page with product variations. It is extremely useful when you want to make it more clear what are the available options that your customer may choose from:

<?php
function filter_WooCommerce_dropdown_variation_attribute_options_args( $array ) { 
    // Find the name of the attribute for the slug we passed in to the function
    $attribute_name = wc_attribute_label($array['attribute']);

    // Create a string for our select
    $select_text = 'Kies ' . $attribute_name;

    $array['show_option_none'] = __( $select_text, 'WooCommerce' );
    return $array;
}; 

// add the filter 
add_filter( 'WooCommerce_dropdown_variation_attribute_options_args', 'filter_WooCommerce_dropdown_variation_attribute_options_args', 10, 1 );

10. Display Product Excerpt on WooCommerce Product Archive Page

One of my favorite functions. It allows you to add custom text on the WooCommerce product archive page – the page that displays the list with all your products.

<?php
function vitahc_excerpt_in_product_archives() {
	the_excerpt();
}
add_action('woocommerce_after_shop_loop_item_title','vitahc_excerpt_in_product_archives', 40);

11. Hide Subtotal on WooCommerce Order Confirmation Template

Customize the email customer gets as a confirmation for a new order

<?php
add_filter( 'WooCommerce_get_order_item_totals', 'adjust_WooCommerce_get_order_item_totals' );
function adjust_WooCommerce_get_order_item_totals( $totals ) {
  unset($totals['cart_subtotal']  );
  return $totals;
}

12. Change “total” Text on WooCommerce Order Confirmation Template

<?php
add_filter('gettext', 'wc_renaming_checkout_total', 20, 3);
function wc_renaming_checkout_total( $translated_text, $untranslated_text, $domain ) {

    if( !is_admin()) {
        if( $untranslated_text == 'Total:' )
            $translated_text = __( 'Totaal excl. BTW:','theme_slug_domain' );
    }
    
    if( !is_admin() && is_checkout ) {
        if( $untranslated_text == 'Total' )
            $translated_text = __( 'Totaal excl. BTW','theme_slug_domain' );
    }
    
    
    return $translated_text;
} 

© 2018 Atanas Yonkov

Read more: