web-dev-qa-db-fra.com

Modification du menu de la corbeille Woocommerce

Actuellement, je modifie le menu de navigation de Woocommerce. J'essaie de le faire ressembler à ceci:

            <div>
                <ul class="crumbs">
                    <li>
                        <a href="http://localhost:8888/sitename">Home</a>
                    </li>
                    <li class="separator"> | </li>
                    <li>About us</li>
                </ul>
            </div>

J'ai ceci dans mon functions.php:

            add_filter( 'woocommerce_breadcrumb_defaults', 'jk_woocommerce_breadcrumbs' );
            function jk_woocommerce_breadcrumbs() {
            return array(
            'delimiter' => ' &#124; ',
            'wrap_before' => '<div itemprop="breadcrumb"><ul class="crumbs"><li>',
            'wrap_after' => '</li></ul></div>',
            'before' => '',
            'after' => '',
            'home' => _x( 'Home', 'breadcrumb', 'woocommerce' ),
            );
            }

Ce qui me donne malheureusement:

            <div>
                <ul class="crumbs">
                    <li>
                    <a class="" href="http://localhost:8888/sitename">Home</a>
                    |
                    <a href="http://localhost:8888/sitename/product-category/buzsaws/">buzsaws</a>
                    | Animal Train
                    </li>
                </ul>
            </div>

Que puis-je ajouter au filtre pour le faire coïncider avec le bourricot de chapelure que j'ai affiché sur le reste de mon site?

Merci,

woocommerce
1
Nsokyi

Une manière plus claire d'afficher un délimiteur serait une bordure CSS (comme Aibrean suggéré). Mais vous pouvez configurer le filtre pour répondre à vos besoins:

add_filter( 'woocommerce_breadcrumb_defaults', 'custom_woocommerce_breadcrumbs' );
function custom_woocommerce_breadcrumbs() {
  return array(
    'delimiter'   => '<li class="separator"> | </li>',
    'wrap_before' => '<div><ul class="crumbs">',
    'wrap_after'  => '</ul></div>',
    'before'      => '<li>',
    'after'       => '</li>',
    'home'        => _x( 'Home', 'breadcrumb', 'woocommerce' ),
  );
}

Mise à jour: Pour que votre balise HTML soit propre et sémantique, vous laisseriez le délimiteur vide comme suit:

add_filter( 'woocommerce_breadcrumb_defaults', 'custom_woocommerce_breadcrumbs' );
function custom_woocommerce_breadcrumbs() {
  return array(
    'delimiter'   => '', // no delimiter
    'wrap_before' => '<div><ul class="crumbs">',
    'wrap_after'  => '</ul></div>',
    'before'      => '<li>',
    'after'       => '</li>',
    'home'        => _x( 'Home', 'breadcrumb', 'woocommerce' ),
  );
}

Et ajoutez une bordure ou un style similaire dans votre style.css:

.crumbs li {
  padding: 10px;
  border-right: 1px solid black;
}
.crumbs li:last-child {
  border-right: none;
}
1
Sven