WooCommerce Produktübersicht verlinken

    Hallo ihr Lieben,

    ich habe noch mal eine Frage zu meiner Website.
    Wenn man beispielsweise auf https://o-schell.de/product-category/rotwein/ klickt, würde ich ganz gerne das gesamte Produktbild verlinken und nicht nur den Produktnamen.

    Habe da ein paar mal einen Probelauf mit Testpersonen gemacht und die meisten haben nicht gesehen, dass man erst auf den Namen bzw. den Produkttitel klicken muss, um weitere Informationen zu den einzelnen Produkten zu erhalten.

    Besteht da irgendwie nie Möglichkeit, auf diese Kategorieseite beispielsweise via FTP zu gelangen, um dann das gesamte Bild zu verlinken?

    Vielen Dank schon mal :-)

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Das Bild ist verlinkt. Durch den Hovereffekt wird aber ein Layer über die unteren 3/4 des Bildes geschoben, wodurch der Link verdeckt wird. Man kann den Link auf dem Titel absolut positionieren und über die gesamte Fläche des Bildes ziehen:

    Code
    .woocommerce ul.products li.product .woocommerce-loop-product__title a {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 0 2em;
}

    Das padding wird benötigt, weil der Titel aus dem Flow genommen wird und sonst bis an den Rand des Bildes laufen kann.

    Natürlich muss man noch prüfen wie das bei kleinere Auflösungen aussieht.

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

    Vielen Dank, das funktioniert super... Ich gucke mir das jetzt noch mal bei der mobilen Ansicht an, aber auf der Desktop Version funktioniert das sehr gut :-)

    Funktioniert aber nur in der Thumbnail Ansicht. In der Listenansicht ist das Layout kaputt. Bitte die CSS Regel ersetzen durch:

    Code
    .woocommerce .shop_mode_thumbs ul.products li.product .woocommerce-loop-product__title a {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 0 2em;
}

    Diese Regel wirkt nur in der Thumbnail Ansicht.

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

    Vielen Dank, dass du dir da so eine Mühe gemacht hast :-)
    Wirklich, Tausend Dank:-)

    Ich will deine Freundlichkeit jetzt nicht überstrapazieren, ich habe da nur noch zwei Fragen...

    Wenn man über die Bilder drüber geht, also der Hover- Effekt, dann wird da so ne komische Klammer angezeigt. Weißt du ob und wenn ja, wie ich das ändern kann?
    Also für das erste würde das auch reichen mit der Klammer, Hauptsache man sieht, dass da dann irgendwas passiert.
    Alternative dachte ich, dass anstelle der Klammer ein Text erscheint "mehr Informationen" oder so.

    Dann habe ich noch eine zweite Frage:
    Wenn man auf ein Produkt geklickt hat, gibt es da keinen Button für zurück. Könnte man da noch einen irgendwo einfügen?
    Ich dachte schon mal, wenn man im Template unter oder über dem Produktbild einen Button platziert. Dieser sollte aber dann zur vorherigen Seite verweisen.
    Ist sowas Grundsätzlich möglich?

    Wie schon gesagt, ich möchte jetzt deine Freundlichkeit nicht ausnutzen oder überstrapazieren :-)
    Ich bin dir wirklich sehr sehr dankbar schon für die Hilfe mit der verlinkung des Bildes, der Rest sind mehr so Feinheiten :-)

    Ich sehe keine Klammer beim Überfahren (hover) der Bilder. Lösche mal Deinen Browsercache und deaktiviere das Plugin Autoptimize. Falls das nichts bringt mache bitte einen Screenshot und markiere dort diese Klammer.

    Bezüglich des Buttons kannst Du natürlich bei jedem Produkt einen in den Content mit einfügen. Du kannst auch mittels einer Funktion in der functions.php eines Childthemes so einen Button bei allen Produkten einbauen:

    Code
    add_action( 'woocommerce_single_product_summary', 'mmx_history_back', 100 );
function mmx_history_back() {
    echo '<button class="button product_type_simple" onclick="window.history.back()" rel="nofollow">Zur vorherigen Seite</button>';
}

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

    Bzgl. der Klammer versuch mal das

    Code
    .post_thumb .hover_icon_link:before{
  content:"";
}

    Edit:
    für einen Text anstelle der Klammer, ginge sowas:

    CSS
    .post_thumb .hover_icon_link:before {
    content: "Mehr Informationen";
    font-size: 1.4em !important;
    font-family: initial;
}

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    Ach das Ankerbild. Ich habe nach eine [] oder {} oder () gesucht.

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

    Perfekt :-) Ich hatte bisher folgendes Versucht:

    .hover_icon_link:hover{
    content:"MEHR ERFAHREN";
    }


    das hatte aber nie funktioniert... Aber dein Code klappt :-)

    Ich danke euch wirklich für eure Hilfe!!!!!!

    Ich will jetzt nicht Fehler suchen, aber das springt mir ins Auge ;-)

    Im Customizer unter Design - Zusätzliche CSS mit folgendem Code zu beheben.

    Code
    @media (max-width: 1439px) {
.widget_area_inner .widget_product_search .search_field {
    letter-spacing: 3px;
}
}
@media (max-width: 1263px) {
.widget_area_inner .widget_product_search .search_field {
    letter-spacing: 0.7px;
}
}

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    @mensmaximus: Tut mir leid, das lag wohl an meiner nicht so idealen Beschreibung meines Problems :D. Das Ankerbild ist aber richtig... Das funktioniert jetzt erst mal alles gut :-)

    @SEpp55 Vielen Dank, dass du dir die Seite noch mal angeguckt hast :-)
    Das ist wirklich super lieb - gerne kannst du mich auf Fehler hinweisen; darüber bin ich ja sehr dankbar.
    Bisher habe ich das noch nicht gesehen, dass es bei mir "normal" angezeigt wird.

    Ich habe grade gesehen, wenn ich viele Produkte im Warenkorb habe und dann auf diesen klicke (oben rechts), dann kann ich in diesem nicht mehr scrollen. Ich hoffe, dass ich verständlich erklärt habe :D:D:D
    Ich wollte jetzt erst mal noch einen Button zum Menü hinzufügen, über den man direkt zum Warenkorb kommt.
    Aber würde auch die Möglichkeit bestehen, den Warenkorb "scrollable" zu machen?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden