Benutzerdefinierte WooCommerce-Bildgröße

Woocommerce hat drei eingebaute Bildgrößen. Da es jedoch mehr als drei verschiedene Behältergrößen gibt, werden manche Bilder immer gedehnt oder gequetscht. Daher leiden Bildqualität und Seitengeschwindigkeit. Woocommerce verwendet beispielsweise die Kataloggröße für Katalogbilder und zugehörige Produktbilder. WordPress bietet eine einfache Methode zum Erstellen benutzerdefinierter Bildgrößen. Und ich habe versucht, eine Größe für meine verwandten Produkte zu generieren:

add_action( 'after_setup_theme', 'jmt_theme_setup' ); function jmt_theme_setup() { add_image_size( 'related-thumb', 274, 274, true ); } 

Gibt es eine Möglichkeit, diese Größe in Woocommerce verwandte Produktbilder zu stecken?

Danke für Ihr Interesse.

grüßt theo

Solutions Collecting From Web of "Benutzerdefinierte WooCommerce-Bildgröße"

Es gibt ein paar Optionen, aus denen Sie wählen können, wenn Sie die Bildgröße ändern. Das Wechseln der eigentlichen WooCommerce-Standardbilder ist schwieriger als eine normale WordPress-Installation, da sie mit dem Plugin verwurzelt sind.


Ändern verwandter Produktbildgrößen:

Ich habe das getestet und es scheint nur auf verwandten Produkten zu funktionieren (obwohl ich sicher bin, dass es auf andere Bereiche erweitert werden könnte). Sie müssen möglicherweise noch die Regenerieren-Miniaturansichten verwenden , um die richtigen Größen zu erhalten.

Wir müssen alles in einen wp Filter wp :

 function woo_init() { // Below functions go here... } add_action( 'wp', 'woo_init' ); 

Ich war in der Lage, den ersten Teil davon zu überspringen, indem ich die Abfrage var content-product.php und sie immer noch funktionierte, aber da sie eine generische content-product.php Vorlage verwendet, würde ich ihr nicht vertrauen, also werden wir eine Abfrage content-product.php setzen, um sicherzustellen, dass wir nur sind Ändern Sie die Bildgröße für verwandte Produkte:

 if( is_singular( 'product' ) ) { add_filter( 'woocommerce_related_products_args', function( $query_args ) { if( ! empty( $query_args ) ) { set_query_var( 'related_products', true ); } return $query_args; } ); } 

Als nächstes müssen wir den Standard loop_product_thumbnail entfernen und durch unseren benutzerdefinierten ersetzen. Wir testen, um realted_products , dass realted_products queryvar gesetzt ist und TRUE bevor wir unser neues Image bereitstellen, andernfalls das Standard-Image.

 remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 ); add_action( 'woocommerce_before_shop_loop_item_title', function() { $related = get_query_var( 'related_products' ); if( TRUE == $related ) { echo woocommerce_get_product_thumbnail( 'related-thumb', 274, 274 ); // Our new image size } else { echo woocommerce_get_product_thumbnail(); // Default Image Size } }, 10 ); 

CSS

WooCommerce verwendet width: 100%; height: auto; width: 100%; height: auto; auf all ihren Bildern. Sie können dies auf max-width: 100%; width: auto; height: auto; ändern max-width: 100%; width: auto; height: auto; max-width: 100%; width: auto; height: auto; und spielen Sie mit den Margen / Anzahl der Spalten herum, um das gewünschte Aussehen zu erhalten.

Ändern Sie die anfänglichen Bildgrößen

Sie können die tatsächlichen Bildgrößen, die WooCommerce verwendet, ändern, indem Sie die folgenden Schritte ausführen:

  • Melde dich bei WordPress an
  • Navigiere zu WooCommerce -> Products Tab -> Display ( Sub-tab )
  • Nach unten können Sie die Bildgrößen einstellen für:
    • Katalogbilder
    • Einzelnes Produktbild
    • Produkt-Vorschaubilder
  • Schließlich können Sie Miniaturbilder neu erstellen , um die geänderten Größen zu erhalten.

Eine andere Methode ist, diese Größen bei der Installation zu haben:

 function yourtheme_woocommerce_image_dimensions() { global $pagenow; if ( ! isset( $_GET['activated'] ) || $pagenow != 'themes.php' ) { return; } $catalog = array( 'width' => '400', // px 'height' => '400', // px 'crop' => 1 // true ); $single = array( 'width' => '600', // px 'height' => '600', // px 'crop' => 1 // true ); $thumbnail = array( 'width' => '120', // px 'height' => '120', // px 'crop' => 0 // false ); // Image sizes update_option( 'shop_catalog_image_size', $catalog ); // Product category thumbs update_option( 'shop_single_image_size', $single ); // Single product image update_option( 'shop_thumbnail_image_size', $thumbnail ); // Image gallery thumbs } add_action( 'after_switch_theme', 'yourtheme_woocommerce_image_dimensions', 1 ); 

WooCommerce Referenzlinks:

  • Verwenden Sie geeignete Bilddimensionen, um Verzerrungen / Pixelbildungen zu vermeiden
  • Legen Sie WooCommerce-Bilddimensionen bei Aktivierung des Themas fest
  • woocommerce_get_product_thumbnail function

Sie können das CSS von WooCommerce durch dieses Snippet, Remi Corson, überschreiben:

 < ?php add_filter( 'wp_head' , 'related_products_style' ); function related_products_style() { if( is_product() ) : ?>  < ?php endif; } 

Ich denke, es ist ein CSS-Problem, weil WooCommerce (ärgerlich) width: 100% wenn es (meiner Meinung nach) max-width: 100% . Versuchen Sie, die Breite mit der width: auto zu überschreiben width: auto , das sollte helfen.