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

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

This topic contains 13 replies, has 3 voices, and was last updated by  David 1 week, 2 days ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1260453

    Pedro

    Hola! He estado intentando cambiar el color de las migas de pan de los productos, sin embargo no logro conseguirlo.

    Lo que deseo es que la ruta de navegación aparezca con el color #767676 y al hacer hover en los enlaces cambie al color #333333.

    Con respecto a la ubicación actual, deseo que esté del color #333333 y con un font-weight de 600.

    Y con los separadores “/”, deseo que sean de color #767676 y que el font-weight sea el normal por defecto.

    El código que usé fue el siguiente:

    .woocommerce-breadcrumb a{
    	color: #767676;
    }
    .woocommerce-breadcrumb a:hover{
    	color: #333333;
    }
    .woocommerce-breadcrumb {
    	color: #333333 !important;
    	font-weight: 600;
    }

    ¿Pueden ayudarme?

    ¡Gracias!

    #1260454

    Pedro

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

    Muchas gracias!

    #1260844

    David Customer Support

    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;
    }
    #1261448

    Pedro

    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?

    #1262100

    Tom Lead Developer

    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;
    }
    #1262190

    Pedro

    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/

    #1262191

    Pedro

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

    #1262600

    David Customer Support

    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.

    #1263841

    Pedro

    Gracias David!

    #1264446

    David Customer Support
    #1292832

    Pedro

    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?

    #1293514

    David Customer Support

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

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

    #1294651

    Pedro

    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.

    #1294977

    David Customer Support

    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.

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.