This is a growing collection of code snippets to customize WooCommerce. As an experienced WooCommerce developer, I have written and used countless code snippets. The code snippets below are either unique, custom solutions or are extremely useful ones that I use regularly.
If you’re familiar with WordPress coding at all, make sure to visit the official WooCommerce Hook Reference where you can find extensive documentation of all the WooCommerce hooks and filters.
WooCommerce Product Listing Only Site (Disable Purchases)
This simple WooCommerce code snippet is designed for a unique circumstance where you want a product listing on your website, but don’t want anyone to actually purchase anything. Scenarios where I’ve found this useful are retail businesses that sell big ticket items that don’t ship easily like cars, RVs, industrial equipment, etc. However, they still want to show their products and inventory on their website. Of course, there may be a few cases where store owners just don’t want to sell online yet as well. Using WooCommerce to control your product listings can be super helpful if you are synchronizing data between WooCommerce and inventory management or POS software. If you are using this solution, you should make sure that your payment methods are all disabled as an obvious additional measure of preventing any purchases. The second part of the code snippet ensures that visitors cannot access the cart or the checkout pages as well just as a backup measure. The code should be inserted into the (child) theme’s functions.php file.
/* Prevent products from being added to cart */
add_filter( 'woocommerce_is_purchasable', '__return_false');
/* Redirect non-admin users away from cart and checkout pages */
add_action( 'template_redirect', 'redirect_non_logged_in_user' );
function redirect_non_logged_in_user(){
if ( !is_user_logged_in() && (is_page('cart') || is_page('checkout')) ) {
wp_redirect( site_url() ); exit;
}
}Change WooCommerce Read More Button Text
This code snippet goes hand-in-hand with the snippet found above. When you disable the ability to purchase products on a site, the ‘Add to Cart’ button text changes to ‘Read More’. In order to change that text to something more appropriate for product information like ‘View Details’, you need to add the following code snippet to your (child) theme’s functions.php file.
/* Change Read More text to View Details with purchasing turned off */
add_filter( 'woocommerce_product_add_to_cart_text', 'custom_woocommerce_product_add_to_cart_text', 10 );
function custom_woocommerce_product_add_to_cart_text( $text ) {
// First make sure that we are only replacing 'Read more'
$wc_read_more = __( 'Read more', 'woocommerce' );
if( $text !== $wc_read_more ){
return $text;
}else{
return __( 'View Details', 'woocommerce' );
}
}Change WooCommerce Related Products Text
A common need is to change the text that shows in the Related Products area. Some store owners rather have text that says ‘Recommended Products’ or ‘Other Products You May Like’ or something else. This basic code snippet shows how to change that text.
/* Change WooCommerce "Related products" text */
add_filter('gettext', 'change_woo_related_products_text', 10, 3);
add_filter('ngettext', 'change_woo_related_products_text', 10, 3);
function change_woo_related_products_text($translated, $text, $domain)
{
if ($text === 'Related products' && $domain === 'woocommerce') {
$translated = esc_html__('Recommended Products', $domain);
}
return $translated;
}Add Custom Fields to WooCommerce Products (Admin)
This is not a unique code snippet or customization on WooCommerce sites. This is a quick reference of a two of the most popular hooks that allow you to add custom fields (stored as meta) to WooCommerce products in the Admin area and save the data (stored as postmeta). You need to replace the function names and fields with your own before implementing the following code snippet which could be placed in the (child) theme’s functions.php file or as part of a standalone plugin.
/* Add custom WooCommerce product field after the SKU field in the Inventory tab */
function try_add_custom_field() {
$args = array(
'label' => __( 'Custom Field', 'woocommerce' ),
'placeholder' => __( 'Custom Field Placeholder Text', 'woocommerce' ),
'id' => 'try_custom_field', // field name stored in database for retrieval and update
'desc_tip' => true,
'description' => __( 'This is a tooltip box for detailed information on the field.', 'woocommerce' ),
);
woocommerce_wp_text_input( $args );
}
// This hook located the custom field after the SKU field in the Inventory tab
add_action( 'woocommerce_product_options_sku', 'try_add_custom_field' );
/* Function to save the custom data you just created for the custom field */
function try_save_custom_field( $post_id ) {
$try_custom = isset( $_POST[ 'try_custom_field' ] ) ? sanitize_text_field( $_POST[ 'try_custom_field' ] ) : '';
$product = wc_get_product( $post_id );
$product->update_meta_data( 'try_custom_field', $try_custom );
$product->save();
}
add_action( 'woocommerce_process_product_meta', 'rv_save_custom_sku' );
/* Alternative hook to 'woocommerce_product_options_sku' that adds custom field to General Tab */
add_action( 'woocommerce_product_options_general_product_data', 'try_add_custom_field' );Crop and Set Width and Height for WooCommerce Single Product Image
It took a little effort to figure out the correct way to not only set the width of the Single Product Image – which can be done in the Customizer->WooCommerce->Product Images – but also set a height and crop the image. When showing a gallery of various sizes and aspect ratios of product images, the gallery is hard to consistently control where the thumbnails are located for gallery navigation. One image might be wide. One image might be tall. So when scrolling between those images, it causes difficulty for the user to be able to see and click the thumbnails for that gallery without them jumping up and down the page. This very simple code snippet allows you to set the width and height and crop the images. WooCommerce should automatically regenerate thumbnails, but you should double-check. If WooCommerce does not automatically regenerate the thumbnails (which has always worked for me), it’s an easy solution to use Regenerate Thumbnails. Also don’t forget to bulk optimize the new thumbnails if your image optimization plugin doesn’t automatically handle it for you.
/* Set size for single product image on individual product pages */
add_filter( 'woocommerce_get_image_size_single', function( $size ) {
return array(
'width' => 441,
'height' => 441,
'crop' => 1,
);
} );