Cambiar color a migas de pan en página de producto (WooCommerce)

También si puedo cambiar el separador que viene por defecto de "/" a ">"

Muchas gracias!

Hi there,

add this PHP Snippet to your site:

add_filter( 'woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_delimiter' );
function wcc_change_breadcrumb_delimiter( $defaults ) {
	// Change the breadcrumb delimeter from '/' to '>'
        $defaults['delimiter'] = ' > ';
        $defaults['before'] = '<span class="crumb">';
        $defaults['after'] = '</span>';
	return $defaults;
}

Reference: https://docs.woocommerce.com/document/customise-the-woocommerce-breadcrumb/#section-2

Then add this CSS:

.woocommerce .woocommerce-breadcrumb span:last-child {
    color: #333333;
    font-weight: 600;
}

.woocommerce .woocommerce-breadcrumb a {
    color: #767676;;
}

.woocommerce .woocommerce-breadcrumb a:hover {
    color: #333333;
}

Hola David! Gracias por responder.

Quiero contarte que cambié el CSS, sin embargo no sucedió ningún cambio.

El color de la ubicación actual sigue en #767676 y además no está en weight: 600.

¿Podrías revisar por favor?

Hi there,

You can make it bold/change its color, but it will affect the separators as well. WooCommerce doesn't wrap them in a separate element, unfortunately.

.woocommerce .woocommerce-breadcrumb {
    font-weight: 600;
}

.woocommerce .woocommerce-breadcrumb a {
    font-weight: normal;
}

Hola Tom! Gracias por responder.

Y no hay manera de personalizarlo como hice con los breadcrumbs de mi otro sitio?

https://mejorapress.com/the-fastest-wordpress-theme/

También si existe la posibilidad de eliminar los breadcrumbs de WooCommerce y reemplazarlos por los de Rank Math.

To use RankMath - disable the Breadcrumb in Customizer > Layout > Woocommerce.

Then create a new Hook element.
Add this code:

<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>

Select the woocommerce_breadcrumb hook.
Check execute PHP.
And set your Display Rules.

Gracias David!

You're welcome

Hola David!

He realizado el último paso como me indicaste pero las migas de pan de Rank Math no aparecen (obviamente ya las he habilitado en la configuración de Rank Math)

¿Puedes ayudarme?

I have done the last step as you indicated but the Rank Math breadcrumbs do not appear (obviously I have already enabled them in the Rank Math configuration)

You can help?

Which site are you using them on?
Make sure the hook you choose is available:

https://docs.generatepress.com/article/hooks-visual-guide/

Hola David! Lo hice en mi sitio: https://www.rebajaslocas.com/

Recuerda que:
- El hook se muestra únicamente en la página de producto.
- Usé el hook que me indicaste antes: woocommerce_breadcrumb
- Activé la opción de PHP
- Desactivé las migas de pan de WooCommerce

Nota: En estos momentos no lo tengo ya que al hacer todo esto, desaparecieron las migas de pan de WooCommerce pero no se mostraron las de Rank Math.

Remember that:
- The hook is displayed only on the product page.
- I used the hook that you indicated before: woocommerce_breadcrumb
- I activated the PHP option
- I disabled WooCommerce breadcrumbs

Note: Right now I don't have it as doing all this, WooCommerce breadcrumbs disappeared but Rank Math breadcrumbs were not shown.

Check to see of the code is working by using a different hook like before_content and setting it to Display on Entire Site. If it shows up on other pages then you know the function is working.