Breadcrumbs on Woocommerce page

[dhunink]

Hi,

using the awesome header builder I’ve created breadcrumbs for my header.
I am running into a few issues tough.

1. Weird text-overflow when using Firefox.
When viewing any page using Firefox, the names of the pages will not be displayed in full. Instead Firefox treats the texts like overflow.

Safari shows the page titles in full:

Firefox :

2. Hiding the ‘Store’ element using CSS
I wanted to hide the second item of the breadcrumbs when viewing Woocommerce pages. Using snippets/suggestions found on this forum I’ve added the following CSS to my child theme:

.woocommerce ol.x-crumbs-list li.x-crumbs-list-item:nth-child(2){
	display: none!important;
}

This works in Firefox. However, Safari still displays the Store (called Winkel) in the breadcrumbs. See the screenshots from 1.

3. Missing items when viewing single Woocommerce product
When viewing any page, including Woocommerce categories, the breadcrumbs show exactly what the need to do.
However, when viewing a single product page, for example this one, the breadcrumbs only display ‘Home - Store - Product’ instead of ‘Home - Store - Categorie - Product’. Is this intentional? Can it be altered?
See example screenshot below, the Store home and categories (that are present in the URL) are missing:

Looking forward to fixing these three issues, thanks for any suggestions!

[christian]

Hey @dhunink,

1. Upon checking, this also happens in Chrome. Please add this code in your Global CSS

.x-crumbs-link {
    overflow: visible;
}

2. Winkel does not show on my end. Please try clearing your browser’s cache and also test private or incognito mode.

3. Yes, the category is not yet a feature of the Breadcrumbs element. I see this has been added in our feature request though so this might be implemented in the future. For now, this would require custom development.

Thanks.

[dhunink]

Hi,

thanks, that solved 1 and 2

On 3: I’m perfectly comfortable with doing custom development. Could you perhaps be so kind to point me towards the right direction? Is there a filter available for example that could be used to add item’s to the breadcrumbs?

[rad]

Hi there,

Unfortunately, we can’t provide any custom development regarding the breadcrumb and it would also require some feature related to Woocommerce since its category isn’t the same as post category. But you may edit the codes in this file \framework\functions\global\breadcrumbs.php and add your custom code. It’s a bit complex now compared to the previous version of breadcrumbs code, so please be cautious when editing and always keep a backup.

Thanks!

[dhunink]

Hi Rad,

that did pointed me towards the right direction.

For further reference, here’s the code I ended up with.
Quick note however; this might not work under all circumstances.

function bwl_breadcrumbs($crumbs){

	if( is_product() )
	{
		$indexToInsertAt = 2;//0=wpHome, 1=shopHome
		
		//Add the first category this product belongs to
		$curTerms = get_the_terms( $post->ID, 'product_cat' );
		$crumbs = array_merge( 
			array_slice( $crumbs, 0, $indexToInsertAt, true ), 
			array( 
			  array( 
				'type'  => 'product_cat', 
				'url' => get_term_link( $curTerms{0}->term_id ), 
				'label' => $curTerms{0}->name 
			  )
			), 
			array_slice( $crumbs, $indexToInsertAt, null, true ) 
		);
		
		
		//If there are parent-categories, add breadcrumbs for those as well
		$parentcats = get_ancestors($curTerms{0}->term_id , 'product_cat');
		foreach($parentcats as $parentcat_id)
		{
			$crumbs = array_merge( 
				array_slice( $crumbs, 0, $indexToInsertAt, true ), 
				array( 
				  array( 
					'type' => 'product_cat',
					'url' => get_term_link( $parentcat_id ), 
					'label' => get_term_by( 'id', $parentcat_id, 'product_cat' )->name
				  )
				), 
				array_slice( $crumbs, $indexToInsertAt, null, true ) 
			);
		}
		
	};
	
	return $crumbs;
}
add_filter('x_breadcrumbs_data', 'bwl_breadcrumbs');

[ruenel]

Hey There,

Thanks for sharing your solution.
It’s good to know you have figured out a way to resolve the issue.

All the best.