Woocommerce tutorials

How to hide SKU, Category, Sub-category, tag from product page in Woocommerce

Pinterest LinkedIn Tumblr

By default, product page in Woocommerce will shows all product meta information, including SKU, Category, Sub-category, tag as you can see in the picture below.

remove category sku

This tutorial will guide you how to hide SKU, Category, Sub-category, tag from product page in Woocommerce with just a single line of code.

  • If you are a developer, it’s easy to explain that we will remove whole product meta block from the product page
  • If you are not a dev, then you can just put the code lines in this tutorial inside your theme’s function.php file. All you need is a software to edit files on your website’s server

We will use the 2 function to remove and add block in woocommerce product page:

  • remove_action()  to remove block from product page
  • add_action()  to add block to product page

Hide all meta information from product page in Woocommerce

Find your theme’s function.php file and put the following code snipet before “?>” (closing tag of php)

/**
 * @snippet       Hide SKU, Category, Tags at Product Page in WooCommerce
 * @author        wooexplorer.com
 */
   
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );

This code snipet will hide all meta information including SKU, Category, Sub-category, tag from product

Now the product page will look like this:

remove all category sku

Remove all meta information but keep “SKU” in product page

What if you want to hide all meta information but keeping SKU?

We will use add_action to readd SKU to product page

/**
 * @snippet       Show SKU
 * @author        wooexplorer.com
 */
 
add_action( 'woocommerce_single_product_summary', 'wooexplorer_show_sku_again_single_product', 40 );
 
function wooexplorer_show_sku_again_single_product() {
   global $product;
   ?>
   <div class="product_meta">
   <?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?>
      <span class="sku_wrapper"><?php esc_html_e( 'SKU:', 'woocommerce' ); ?> <span class="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?></span></span>
   <?php endif; ?>
   </div>
   <?php
}

Now your product page will look like this

remove category keep sku

Conclusion

There are many other woocommerce hooks that can be found in /wp-content/plugins/woocommerce/includes/wc-template-hooks.php, for example:

/**
 * Content Wrappers.
 *
 * @see woocommerce_output_content_wrapper()
 * @see woocommerce_output_content_wrapper_end()
 */
add_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
add_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );

/**
 * Sale flashes.
 *
 * @see woocommerce_show_product_loop_sale_flash()
 * @see woocommerce_show_product_sale_flash()
 */
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );

/**
 * Breadcrumbs.
 *
 * @see woocommerce_breadcrumb()
 */
add_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );

/**
 * Sidebar.
 *
 * @see woocommerce_get_sidebar()
 */
add_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );

Learn to control these hooks and you can customize your store exactly like you want it to be. For example, you can disable Magnifying glass icon and disable zoom function on WordPress

Hung Tran is the author of Wooexplorer.com, he loves to share knowledge about Woocommerce and Wordpress

Write A Comment