Képminták megjelenése és archív képek

A kiválasztott képminta keretszíne

A Képminta mezőnél a kiválasztott elem alapértelmezetten szürke keretet kap. A keretszínt kétféleképp módosíthatod.

Testreszabóval: nyiss meg egy kiegészítő mezős termékoldalt, kattints a felső sávban a Testreszabás pontra, majd a bővítmény Styles szakaszában állítsd a kiválasztott képminta keretszínét, és kattints a Közzététel gombra. A részleteket a Megjelenés fejezet írja le.

CSS-sel: add hozzá a sablon style.css fájljához, vagy a Testreszabó További CSS részéhez:

.pewc-radio-image-wrapper label input:checked + img,
.pewc-checkbox-image-wrapper label input:checked + img {
  border: 4px solid #ff0000;
}

A példa piros színt és 4 képpontos vastagságot használ, a színkódot és a vastagságot cseréld a sajátodra.

Képoszlopok száma mobilon

A jelölőnégyzet- és rádiógomb-képmezők mobilon alapértelmezetten egy oszlopban jelennek meg. Az oszlopszámot media query-vel módosíthatod a 481 és 768 képpont közötti kijelzőkre. A képek burkolóinak szélességét az oszlopok számának megfelelően állítsd: 100% osztva az oszlopok számával (két oszlop 50%, négy oszlop 25%, egy oszlop 100%).

@media (min-width: 481px) and (max-width: 768px) {
  .pewc-radio-images-wrapper .pewc-radio-image-wrapper,
  .pewc-checkboxes-images-wrapper .pewc-checkbox-image-wrapper {
    width: 25%;
  }
}

A CSS-t a sablon style.css fájljába vagy a Testreszabó További CSS részébe írd.

Más kép a bolt- és archívoldalakon

Ha a bolt- és archívoldalakon más képet szeretnél mutatni, mint a termékoldal kiemelt képe, ehhez a Kép előnézet vagy a Szöveg előnézet kiegészítő is kell a bővítmény mellé.

1. Töltsd fel a másik képet a médiatárba, és másold ki az URL-jét.
2. A termék szerkesztőjében, az Egyedi mezők részben vegyél fel egy pr_custom_archive_image nevű mezőt, értéke a kép URL-je.
3. Add hozzá a lenti kódot a gyermeksablonod functions.php fájljához vagy egy kódrészlet-bővítményhez.

A kód a WooCommerce woocommerce_product_get_image szűrőjére kapcsolódik. Az önálló termékoldalon változatlanul hagyja a képet, máshol pedig, ha a termékhez van pr_custom_archive_image érték, az ahhoz tartozó képet írja ki woocommerce_thumbnail méretben.

function sajat_archiv_kep( $image, $product, $size, $attr, $placeholder ) {
    if ( is_product() ) {
        return $image;
    }
    $url = get_post_meta( $product->get_id(), 'pr_custom_archive_image', true );
    if ( $url ) {
        $attachment_id = attachment_url_to_postid( $url );
        $image = wp_get_attachment_image( $attachment_id, 'woocommerce_thumbnail' );
    }
    return $image;
}
add_filter( 'woocommerce_product_get_image', 'sajat_archiv_kep', 10, 5 );