Das WordPress WooCommerce-Plugin zeigt das vorgestellte Produkt mit einer anderen Größe

ich habe installiert WooCommerce in Dies Seite? ˅. Jetzt können Sie sehen, dass es einige Produkte auf der Startseite gibt. Die Produkte im Abschnitt Spiele haben eine Größe von (100 x 140) und wenn ich darauf klicke, werde ich zur Produktdetailseite weitergeleitet. Bis dahin ist es in Ordnung. Jetzt gibt es auf der Startseite einige Produkte unter dem Abschnitt Alle Produkte, die sich in der Größe von der unteren Bildgröße unterscheiden.

Jetzt möchte ich, dass der obere Abschnitt (Alle Produkte) vollständig anklickbar ist, sodass das Bild beim Klicken auf die entsprechende Produktdetailseite umgeleitet wird, genau wie das unten vorgestellte Produkt. Ich möchte auch, dass der Abschnitt vom Administrator vollständig verwaltet werden kann. Also kann mir jemand freundlicherweise sagen, wie man das macht? Jede Hilfe und Vorschläge werden wirklich spürbar sein. Vielen Dank…

Einfach ausgedrückt, es gibt kein Anker-Tag für das Bild. Folgendes müssen Sie tun:

Aktueller Code

Der HTML-Code für Alle Produkte sieht folgendermaßen aus:

<div class="best-seller-wrap">
    <div class="second-img">
        <div class="disount-text">
            30% OFF
        </div>
        <div class="price-text-wrap">
            <h3>$34.99</h3>
            <p>
                <a href="http://modulesoft.info/projects/gamesite/?product=dishonered">Buy Now..</a>
            </p>
        </div>
    </div>
</div>

Und das CSS so:

#main .best-seller-wrap .second-img {
    background-image: url('images/best-seller-images/img-2.png');
    position: relative;
}

Neuer Code

Alle Produkte HTML:

<div class="best-seller-wrap">
    <div style="position: relative">
        <a class="second-img" href="http://modulesoft.info/projects/gamesite/?product=dishonered"></a>
        <div class="disount-text">
            30% OFF
        </div>
        <div class="price-text-wrap">
            <h3>$34.99</h3>
            <p>
                <a href="http://modulesoft.info/projects/gamesite/?product=dishonered">Buy Now..</a>
            </p>
        </div>
    </div>
</div>

CSS:

#main .best-seller-wrap .second-img {
    background-image: url('images/best-seller-images/img-2.png');
    position: relative;
    display: block;
}

Sie werden feststellen, dass ich Ihre anwende .second-img Klasse zu einem Anker-Tag und Hinzufügen display: block zur Klasse:

<a class="second-img" href="http://modulesoft.info/projects/gamesite/?product=dishonered"></a>

Beachten Sie auch, dass ich hinzufüge position: relative zur Umgebung div

<div style="position: relative">

Ihr gesamtes Bild sollte jetzt als Link funktionieren.

Ich habe mir die Seite gerade angesehen und kenne mich mit Woo Commerce nicht aus, aber das Design der beiden Bereiche ist völlig unterschiedlich. Der Link in den vorgestellten Produkten lautet:

<a href="http://modulesoft.biz/projects/gamesite/?product=demo-product">
<span class="onsale">Sale!</span>
<img width="100" height="140" src="http://modulesoft.biz/projects/gamesite/wp-content/uploads/2013/01/hitman-absolution-275x275-imadfwj4t6zqb3ja-100x140.jpeg" class="attachment-shop_catalog wp-post-image" alt="hitman-absolution-275x275-imadfwj4t6zqb3ja">
<h3>demo product</h3>
<span class="price"><span class="strike-through"><span class="striked-text">    <span class="amount">23€</span></span></span> <ins><span class="amount">21€</span></ins></span>
</a>

Der gesamte Abschnitt befindet sich also in einem a-Tag,

Der andere Abschnitt hat:

<div class="first-img">
<div class="disount-text">20% OFF</div>
<div class="price-text-wrap">
<h3>$31.99</h3>
<p><a href="http://modulesoft.info/projects/gamesite/?product=lorem-ipsum-game">Buy Now..</a></p></div>
</div>

wobei die Klasse ‘first-img’ im Stylesheet verlinkt ist:

#main .best-seller-wrap .first-img {
  background-image: url('images/best-seller-images/img-1.png');
  position: relative;
}

Dies ist nur eine Vermutung, aber wenn Sie den Code finden, der das a-Tag um das erste Code-Bit herumschließt, sollten Sie herausfinden können, wie Sie dies um das andere Code-Bit herum tun können.

Ich habe mir gerade den Code für das grundlegende Woo-Commerce-Plugin angesehen und es sieht so aus, als ob dieses Layout standardmäßig nicht vorhanden ist. Wenn Sie ein Design verwenden, kann es hilfreich sein, auch zu sagen, was das ist, wenn Sie die erzeugte Schleife finden der Code kann aber nicht funktionieren, poste ihn oben.