web-dev-qa-db-ja.com

WooCommerceで元の画像の切り抜きを無効にする

Woocommerceで元の画像のトリミングを無効にする方法は？

WooCommerceプロセスのトリミングに問題があるため：

元の画像

enter image description here

トリミングされた画像：

enter image description here

この問題を修正して、元の画像のように、WooCommerceによるサイズ変更されたサムネイルのトリミングを行わないようにするにはどうすればよいですか？

phpwordpressimagewoocommerceproduct
8
Bhavik Hirani

Woocommerce>設定>製品（タブ）>表示（サブタブ）に移動します

Path to products display

次に、ページの下部にある[製品画像]で、disableハードクロップオプションと変更の保存：

products images settings

次に、サムネイルの再生成 プラグインを使用して製品の画像を再生成する必要があります。

  • インストールしてアクティブ化しますサムネイルの再生成 プラグイン。
  • [ツール]メニューに移動すると、[サムネイルの再生成]アイテムページが表示されます。
  • すべてのサムネイルを再生成します（これにより、WordPress Webサイトのすべてのサムネイル画像が再生成されます。
  • WordPressメディアライブラリ（リストビュー））では、サムネイルを1つずつ再生成できます。

WITH PHP[〜＃〜]代替[〜＃〜]：

一部のテーマでは、これは設定がハードコーディングされている場合があります。したがって、このコードスニペットを使用して変更し、アクティブな子テーマまたはテーマのfunction.phpファイルに貼り付けることができます。

function yourtheme_woocommerce_image_dimensions() {
    global $pagenow;

    if ( ! isset( $_GET['activated'] ) || $pagenow != 'themes.php' ) {
        return;
    }
    $catalog = array(
        'width'     => '300',   // px
        'height'    => '300',   // px
        'crop'      => 0 // Disabling Hard crop option.
    );
    $single = array(
        'width'     => '150',   // px
        'height'    => '150',   // px
        'crop'      => 0 // Disabling Hard crop option.
    );
    $thumbnail = array(
        'width'     => '90',   // px
        'height'    => '90',   // px
        'crop'      => 0 // Disabling Hard crop option.
    );
    // 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設定>製品>ディスプレイ（製品画像）の定義オプションを上書きします。

アクティベーション：アクティブなテーマを別のテーマに切り替えてから、元に戻してアクティブにする必要があります。

また、サムネイルの再生成 プラグイン..を使用して製品イメージを再生成する必要がある場合もあります。

7
LoicTheAztec

WooCommerceメニューは前回のバージョンで変更されたため、この「表示」メニューはもう存在しません。

今、あなたはそれを見つけることができます：

->カスタマイズ（Wordpress前にいるとき）のトップバーにあります）

-> WooCommerce

->商品画像

-> [トリミングされていない]オプションを選択し、[公開]をクリックして保存します。

このプラグインで前の投稿で述べたようにサムネイルを再生成することを忘れないでください： https://wordpress.org/plugins/regenerate-thumbnails/

8
BenBely

コードで設定する場合は、次のスニペットをfunctions.phpファイルに追加します。

// set thumbnails size in shop page
add_filter( 'woocommerce_get_image_size_thumbnail', 'ci_theme_override_woocommerce_image_size_thumbnail' );
function ci_theme_override_woocommerce_image_size_thumbnail( $size ) {
    // Catalog images: specific size
    return array(
        'width'  => 150,
        'height' => 150,
        'crop'   => 0, // not cropped
    );
}

Silver Moon で述べたように、このオプションを使用すると、すべての画像が同じサイズであることを共有する必要があります。この問題に対処するための回避策を見つけました： Woo Align Buttons プラグインを使用して「カートに追加」ボタンを揃え、ショップページの画像にこれらのCSSプロパティを追加しました：

height: 150px;
vertical-align: middle;
display: flex;

（ショップページではなく）別のページで使用する場合は、次のガイドに従ってください： https://docs.woocommerce.com/document/image-sizes-theme-developers/

0
Ohad Y