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.
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 pageadd_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 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
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