همینطور که میدانید افزونه فروشگاه ساز ووکامرس برای نمایش زیباتر محصولات و سبد خرید دارای فایل های style مخصوص به خود می باشد که پس از نصب و فعال سازی پلاگین به صورت خودکار در سایت بارگذاری می شوند اما استایل پیشفرض برای استفاده در سایتهای فارسی زبان مناسب نیست و نیاز به اعمال تغییرات و شخصی سازی دارد برای اینکار ابتدا باید مانع لود فایلهای css افزونه شد سپس استایل ویرایش و راستچین شده خودمان را در قالب بارگذاری نماییم علاوه بر امکان ویرایش css ووکامرس مزیت دیگر بارگذاری سی اس اس های ویرایش شده افزونه در قالب عدم ایجاد تغییر بعد از بروز رسانی پلاگین می باشد. در این مطلب از سایت کد حذف استایل پیش فرض ووکامرس برای استفاده در طراحی پوسته جهت ساخت Css Woocommerce قرار داده شده است پس تا انتها همراه ما باشید.
کد حذف استایل پیش فرض ووکامرس
قبل از عدم لود css ووکامرس ابتدا باید style های مورد نیاز که با نامهای woocommerce.css ، woocommerce-layout.css و woocommerce-smallscreen.css واقع در مسیر plugins > woocommerce > assets > css هستند را به پوشه پوسته مورد نظر منتقل و در فایل header.php فراخوانی کنیم سپس کد زیر را در فایل فانکشن functions.php قالب وردپرس کپی می کنیم. لازم به تذکر است که قبل از هرگونه ویرایش فانکشن ابتدا از آن نسخه پشتیبان تهیه کنید تا در صورت بروز مشکل امکان بازیابی آن وجود داشته باشد. لازم به ذکر است با اندکی جستجو به کدهای مختلفی میرسید که احتمالا در نسخه جدید ووکامرس دیگر کار نمی کنند، کد زیر تست شده و کاملا سالم می باشد.
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
آموزش راست چین کردن استایل ووکامرس
بعد از قرار دادن کد بالا در فانکشن و فراخوانی ۳ فایل css در هدر قالب چون استایلها فشرده و عموما تک خطی هستند برای ویرایش راحت تر باید از نرم افزار و یا سایتهای آنلاینی که خدمات خارج کردن فایل css از حالت فشرده را ارائه می دهند استفاده کنیم در اصطلاح به این ابزار css unminifier گفته می شود. برای اینکار وارد سایت unminify.com شوید سپس تک تک استایلهای پیش فرض را باز کرده و تمام کدها را در کادر اول سایت وارد کنید و بر روی unminify کلیک کنید تا از حالت فشرده و کمپرس خارج شوند سپس کدهای تمیز و غیر فشرده را کپی و جایگزین کنید.
برای ویرایش و راست چین کردن کدها ساده ترین روش استفاده از ابزار inspector مرورگر که در موزیلا از بخش developer در دسترس است برای شناسایی کلاس و ای دی که قصد اصلاح آنرا داریم، می باشد. پس از یافتن class بخش مورد نظر می توانیم با مراجعه به woocommerce.css با استفاده از کلیدهای ترکیبی ctrl+f دنبال کدهای کلاس بگردیم و آنرا ویرایش کنیم.
ارسال دیدگاه