به قسمت سوم از ایجاد قالب ووکامرس رسیدیم. در قسمت‌های قبل با قابلیت‌های مختلف یک سیستم فروشگاه ساز آشنا شدیم. در این قسمت هم می‌خواهیم به تکمیل این ویژگی‌ها و چگونگی ایجاد تغییر در ساختار ووکامرس بپردازیم. اگر در زمینۀ طراحی سایت و قالب وردپرس فعالیت می‌کنید با خواندن این مقاله می‌توانید تا حدود زیادی با چگونگی ساخت و تغییر ساخت فروشگاه اینترنتی آشنا شوید و اگر هیچ زمینه‌ای از طراحی سایت ندارید به شما توصیه می‌کنم که ابتدا با چگونگی طراحی سایت و کد نویسی آشنا شوید و اگر قصد دارید فروشگاه اینترنتی موفقی داشته‌باشید قبل از هر گونه اقدامی با ما تماس بگیرید. به هر حال به سراغ اصل مطلب می‌رویم و این مقاله را با تیتر زیر شروع می‌کنیم:

تغییر جعبه جستجو محصول (ویجت)

get_product_search_form()

 
<form role="search" method="get" class="woocommerce-product-search" action="<?php echo esc_url( home_url( '/' ) ); ?>">
  <label class="screen-reader-text" for="s"><?php _e( 'Search for:', 'woocommerce' ); ?></label>
  <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search Products&hellip;', 'placeholder', 'woocommerce' ); ?>" value="<?php echo get_search_query(); ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label', 'woocommerce' ); ?>" />
<input type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'woocommerce' ); ?>" />
  <input type="hidden" name="post_type" value="product" />
  </form>

نمایش تصویر دسته‌بندی‌ها در بایگانی دسته‌بندی

با استفاده از کد زیر می‌توانید دسته‌بندی‌های خود را در قسمت بایگانی دسته‌بندی نمایش دهید. ولی اگر به هر صورتی با کدنویسی و طراحی قالب آشنا نیستید از این کار صرف نظر کنید و ابتدا به آموزش طراحی سایت و کدنویسی مراجعه کنید.

add_action( 'woocommerce_archive_description', 'woocommerce_category_image', 2 );
  function woocommerce_category_image() {
  if ( is_product_category() ){
  global $wp_query;
  $cat = $wp_query->get_queried_object();
  $thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
  $image = wp_get_attachment_url( $thumbnail_id );
  if ( $image ) {
  echo '<img src="' . $image . '" alt="' . $cat->name . '" />';
  }
  }
  }

رفع نقص قالب‌های ووکامرس

گاهی اوقات ما قالب‌های ووکامرس را زمانی که ورژن جدیدی در دسترس قرار می‌گیرد به روز رسانی می‌کنیم. این در مورد نسخه های اصلی مثل (WooCommerce 2.2, 2.6 and 3.0)  و همچنین نسخه‌های فرعی مثل (WooCommerce 3.2.0) کاربرد دارد. ورژن ۳٫۳ با هر موضوعی در ووکامرس هماهنگی دارد.

به هر حال اگر شما از یک تم با قالب قدیمی و یا نسخه‌های قدیمی ووکامرس استفاده می‌کنید ، ابتدا باید خودتان را به‌روز کنید و از نسخه‌های جدید استفاده کنید.

طراحان قالب وردپرسی، تم‌های خود را در مواقعی که نیاز باشد به روز رسانی می‌کنند، بنابراین شما فقط باید تم  خود را به روز کنید تا قالب های به روز شده را دریافت کنید. اگر شما الگوهای قالب را تغییر داده‌اید و یا از یک تم کودک “(تمی که عملکرد و ظاهر خود را از تم اصلی شما به ارث می‌برد را تم کودک می‌گویند.) “استفاده می‌کنید شما باید قالب خود را به روز کنید.  تم‌های کودک برای اصلاح یک تم موجود در وردپرس شما قابل استفاده است.

چگونه قالب‌های قدیمی خود را به روز رسانی کنیم؟

ما باید مشخص کنیم که چه قالب هایی را برای به روز رسانی می‌خواهیم انتخاب کنیم، سپس یک بک آپ از قالب قدیمیمان می‌گیریم تا بتوانیم تنظیمات شخصی خود را روی قالب به روز رسانی شده اعمال کنیم.

برای این‌کار به ترتیب زیر عمل کنید:

۱-از ووکامرس خود به قسمت وضعیت سیستم (System Status) بروید. به انتهای صفحه، درست جایی که لیستی از قالب‌هایی که  توسط تم شما/ تم کودک شما لغو شده است بروید. در این قسمت پیامی را مشاهده می‌کنید که به شما هشدار می‌دهد که قالب خود را به روز رسانی کنید.

سوالات متداول

از کجا می‌توانم آخرین نسخۀ ووکامرس را پیدا کنم؟

اگر شما می‌خواهید که از قالب‌های پیش‌فرض به روز رسانی شده استفاده کنید باید آخرین ورژن ووکامرس را در اختیار داشته‌باشید.

چند روش آسان برای گرفتن این قالب‌ها وجود دارد:

۱-نسخۀ ووکامرسی که در حال حاضر نصب کرده‌اید را باید به روز رسانی کنید، بنابراین فایل ها از طریق FTP در سایت شما قابل دسترسی هستند.

۲- آخرین نسخه را از WordPress.org دانلود کنید.

۳- همچنین در  GitHub repository تمام نسخه‌ها قابل دسترس هستند.

بازخوردها برای این صفحه اغلب منفی است، آیا نباید دستورالعمل ها را تغییر دهید؟

بازخورد مثبت توسط کسانی که درک می کنند و از دستورالعمل ها همانطور که هست استفاده می‌کنند با موفقیت همراه است.

در عوض برای کسانی که در زمینۀ طراحی قالب سررشته‌ای ندارند و نمی تواند دستورالعمل‌ها را درک کنند بازخورد از این مطلب منفی است، زیرا ممکن است مراحل کار را به درستی تشخیص ندهند و احساس کنند که این مراحل به اندازه کافی کامل نیستند. همانطور که در ابتدای مقاله عنوان کردم، این مقاله برای کسانی که با طراحی سایت و قالب آشنا هستند کاربرد دارد.

چرا یک دکمه برای به روز رسانی همه چیز وجود ندارد؟

این امکان برای به روز رسانی غیرممکن است. چرا؟  از آنجا که هزاران تم وجود دارد و هر کدام از این تم‌ها با هم متفاوتند. علاوه بر این هر کدام از این تم‌ها به صورت متفاوتی کد شده‌اند پس بنابراین نمی‌تواند یک آپدیت برای همۀ تم‌ها قابل اجرا باشد.

چگونگی تغییر در اندازۀ تصاویر برای طراحان قالب

•  woocommerce_thumbnail در شبکۀ تولیدات- محصولات مانند صفحۀ فروش استفاده می‌شود.
• woocommerce_single در صفحۀ مختص برای هر محصول استفاده می‌شود.
• woocommerce_gallery_thumbnailبرای تغییر گالری، زیر تصویر اصلی در صفحۀ هر محصول استفاده می‌شود.

woocommerce_single  تصویر محصول کامل را به صورت آپلود شده نشان می دهد، بنابراین همیشه به طور پیش فرض باز نشده است. پیش‌فرض عرض تصاویر ۶۰۰px است.

woocommerce_gallery_thumbnail همیشه مربع بریده شده و به صورت پیش فرض ۱۰۰ × ۱۰۰ پیکسل است.

woocommerce_thumbnail عرض آن به صورت پیش فرض  ۶۰۰px است. به صورت مربع بریده شده است و شبکۀ محصول را تمیز تر نشان می‌دهد. نسبت ابعاد برای نمایش تصاویر می‌تواند توسط صاحب فروشگاه تغییر کند. مهم است که توجه داشته باشید که با وجود عرض تصویر واقع شده، تم ها می توانند در نهایت تغییر اندازه تصاویر را با استفاده از CSS نمایش دهند و عرض تصویر ممکن است توسط عرض محصول / ستون محصول محدود شود.

تم ها می‌توانند اندازه تصویر را تعریف کنند

شروع با WooCommerce 3.3.0، تم ها می توانند اعلام کنند که چه اندازه باید هنگام اعلام پشتیبانی ووکامرس مورد استفاده قرار گیرد.

add_theme_support( 'woocommerce', array(
'thumbnail_image_width' => 200,
'gallery_thumbnail_image_width' => 100,
'single_image_width' => 500,
) );

هنگام فراخوانی وردپرس که به طور مثال انتظار می رود یک اندازه تصویر باشد. wp_get_attachment_image_src 

سفارشی کردن اندازه تصاویر در قسمت سفارشی سازی

array(
'width' => 200,
'height' => 200,
'crop' => 1,
)

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function( $size ) {
return array(
'width' => 150,
'height' => 150,
'crop' => 0,
);
} );

add_filter( 'woocommerce_gallery_thumbnail_size', function( $size ) {
return 'thumbnail';
} );

function mytheme_add_woocommerce_support() {
    add_theme_support( 'woocommerce' );
}

add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );

function mytheme_add_woocommerce_support() {
    add_theme_support( 'woocommerce', array(
        'thumbnail_image_width' => 150,
        'single_image_width'    => 300,

        'product_grid'          => array(
            'default_rows'    => 3,
            'min_rows'        => 2,
            'max_rows'        => 8,
            'default_columns' => 4,
            'min_columns'     => 2,
            'max_columns'     => 5,
        ),
    ) );
}

add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );

add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );

remove_theme_support( 'wc-product-gallery-zoom' );
remove_theme_support( 'wc-product-gallery-lightbox' );
remove_theme_support( 'wc-product-gallery-slider' );