Support » WooCommerce » eigenen Breadcrumb einfügen (HTML+CSS)

  • Hallo zusammen,
    Ziel: ich will den Breadcrumb von woocommerce entfernen und durch eigenen ersetzen.

    Das Entfernen hat geklappt indem ich folgenden CSS eingegeben habe:

    .page-title-inner
    {
    	display: none
    }
    .page-title-bg
    {
    	display: none
    }

    So nun habe ich einen HTML Code und CSS mit dem ich einen eigenen Breadcrumb erschaffen habe:

    HTML:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Breadcrumbs</title>
    	<script src="https://kit.fontawesome.com/a85a8c66b0.js"></script>
    	<link rel="stylesheet" href="styles.css">
    </head>
    <body>
    
    <div class="wrapper">
      <ul>
        <li>
    		<a href="https://www.sv-creative.de/">
    			<i class="fas fa-home icon"></i>
    			<p>Home</p>
    		</a>
    	</li>
        <li class="active">
    		<a>
    			<i class="fas fa-user-tie icon"></i>
    			<p>About Us</p>
    		</a>
    	 </li>
      </ul>
    </div>
    
    </body>
    </html>
    
    und CSS:
    @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');
    
    *{
      margin: 0;
      padding: 0;
    	box-sizing: border-box;
    	list-style: none;
      text-decoration: none;
      font-family: 'Josefin Sans', sans-serif;
    }
    
    .wrapper
    {	
      position: static;
      top: 0%;
      left: 0%;
      transform: translate(0%,0%);
    }
    
    .wrapper ul
    {
      display: flex;
    }
    
    .wrapper ul li{
      width: 80px;
      margin-right: 14px;
      position: relative;
    }
    
    .wrapper ul li: last-child
    {
    	margin-right: 0;
    }
    
    .wrapper ul li a
    {
    	text-align: center;
    	color: #003d60;
    	font-size: 18px;
    }
    
    .wrapper ul li a .icon
    {
    	display: block;
    	width: 60px;
    	height: 60px;
    	margin: 0 auto 12px;
    	background: #003d60;
    	color: #fff;
    	line-height: 60px;
    	border-radius: 50%;
    	font-size: 40px;
    	box-shadow: 0 7px 12px rgba(0,24,38,0.7);
    }
    
    .wrapper ul li:before
    {
    	content: ">";
    	position: absolute;
    	top: 25%;
    	right: -25px;
    	transform: translatey(-50%);
    	font-size: 25px;
    	font-weight: bold;
    	color: #003d60;
    }
    
    .wrapper ul li:last-child:before
    {
    	display: none;
    }
    
    .wrapper ul li.active a .icon
    {
    	background: #fff;
    	color: #003d60;
    }
    
    .wrapper ul li.active a
    {
    	color:#003d60;
    }

    Auf den Seiten wie „About Us“ oder „Contact Us“ klappt es perfekt. Aber bei Woocommerce ist es stark verschoben. habt ihr eine Idee wie ich es da auch so hinbekomme? und wie ich es auf die Produktseite hinbekomme?

    • Dieses Thema wurde geändert vor 2 Monaten, 2 Wochen von assv.
    • Dieses Thema wurde geändert vor 2 Monaten, 2 Wochen von Hans-Gerd Gerhards. Grund: Formatierung als Code
    • Dieses Thema wurde geändert vor 2 Monaten, 2 Wochen von Hans-Gerd Gerhards.
    • Dieses Thema wurde geändert vor 2 Monaten, 2 Wochen von Bego Mario Garde. Grund: Bitte Code entsprechend formatieren

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 3 Antworten - 1 bis 3 (von insgesamt 3)
  • Das ist mit den wenigen Angaben etwas schwer nachzuvollziehen – hast du eine ganze HTML-Datei inklusive Header in ein Template eingefügt? Wie sieht das komplette Template aus? Außerdem hast du diverse Zeilenumbrüche <br> eingefügt, die zusätzliche Abstände erzeugen:

    <div class="page-description"><p><br>
    <br>
    <br>
    	<meta charset="UTF-8"><br>
    	<title>Breadcrumbs</title><br>
    	<script src="https://kit.fontawesome.com/a85a8c66b0.js"></script>
    	<link rel="stylesheet" href="styles.css">
    <br>
    </p>
    <div class="wrapper">

    Was sollen Meta-Tag und Titel im Document-<body>?

    Oh sorry das hatte ich zur Übersicht und der hat das in </br> umgewandelt. Habe es jetzt rausgenommen… jetzt ist es zwar besser aber immernoch verschoben. Ich habe die HTML datei nicht explizit im Header eingebaut sondern, wenn man auf „alle Seiten“ geht und da eine auswählt und auf „bearbeiten“. Dort kann man dann ganz oben Html Code eingeben und es war nur das Stück was ich da oben gezeigt habe.

    zu body: Ehm ich bin kein profi darin, ich habe das Beipiel hierraus: https://www.youtube.com/watch?v=Xo36UHG7idQ&list=RDCMUCtVM2RthR4aC6o7dzySmExA&start_radio=1

    Im Endeffekt habe ich dieses Youtubebeispiel angewendet

    Dort kann man dann ganz oben Html Code eingeben …

    Das scheint dann eine Besonderheit deines Themes zu sein. Bei gekauften Themes können wir dir nicht weiterhelfen, weil sie uns nicht zur Verfügung stehen. Sprich im Zweifelsfall mal mit dem Entwickler, wobei die bei individuellen Anpassungen eher zurückhaltend sind.

    (Aber ganz ehrlich: bei einem Shop hast du soviel zu tun, dass ich mich mit solchen Details erst gar nicht so lange aufhalten würde.)

Ansicht von 3 Antworten - 1 bis 3 (von insgesamt 3)