Move Category Breadcrumbs on WooCommerce Single Product Page

[RocktheHouse1876]

Hello there,

On the Woo-commerce Single Product Page, I would like to move the categories breadcrumbs below the product title. Please see screenshot in secure note.

Secondly, would it be possible to replace the commas with " / " dividers?

Lastly, would it be possible to remove the word “Categories:” from the breadcrumb?

I’ve been troubleshooting for some time, with no luck!

[ruenel]

Hello @RocktheHouse1876,

Thanks for writing in!

The product categories is part of the product meta. You can move the product meta below your title by adding this custom php code in your child theme’s functions.php file:

function move_product_category(){
  // Move the product Meta
  remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40);
  add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 8 );
}
add_action('after_setup_theme', 'move_product_category');

And if you want to modify the contents of the said categories, assuming that you have your child theme active and ready, please follow these steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php
/**
 * Single Product Meta
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/meta.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see 	    https://docs.woocommerce.com/document/template-structure/
 * @package 	WooCommerce/Templates
 * @version     3.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

global $product;
?>
<div class="product_meta">

	<?php do_action( 'woocommerce_product_meta_start' ); ?>

	<?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; ?>

	<?php echo wc_get_product_category_list( $product->get_id(), ' / ', '<span class="posted_in">' . _n( '', '', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>

	<?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Tag:', 'Tags:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>

	<?php do_action( 'woocommerce_product_meta_end' ); ?>

</div>

3] Save the file named as meta.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/pro-child/woocommerce/single-product/.

You will have to create the folder path since it does not exist in your child theme yet.

Kindly let us know how it goes.

[RocktheHouse1876]

Worked like a charm, @RueNel ! Thank you for taking a complicated task, and teaching it in a way to make it simple to understand!

[ruenel]

You’re welcome @RocktheHouse1876!
We’re just glad we were able to help you out.