Css در ساختار ووکامرس
شما میتوانید به عنوان یک توسعه دهنده با باز کردن بخش assets/css/ در هاست خود در فولدر ووکامرس به فایل های استایل ووکامرس دسترسی داشته باشید. اما در این آموزش قرار است در مورد فایل های woocommerce.scss و woocommerce.css صحبت کنیم.
1. woocommerce.css
این فایل یک فایل استایل فشرده سازی شده است! که در آن هیچ دکمه space استفاده نشده است. این مورد سبب میشود سرعت لود آن بسیار بالا باشد. این فایل اصلی ترین فایل Css در ساختار ووکامرس است که تمامی استایل های ووکامرس با آن درست شده و ایجاد شده است.
2. woocommerce.scss
این فایل به صورت مستقیم کار استایل دهی به ووکامرس را انجام نمیدهد. از پسوند sass استفاده شده است که تا فایل قبلی فراخوانی شود و سرعت کار نیز بالا تر رود.
این دو فایل به صورتی نوشته شده اند که با تمامی قالب های استاندارد ووکامرس هماهنگ باشند و بتوانند نیاز های کاربران را برآورده نمایند. این فایل ها به صورت کد نویسی شده است!! که حالت واکنش گرایی فروشگاه را حفظ نموده و در تمامی عرض صفحات نمایش به درستی عمل کند. البته که همیشه نمیتواند کامل باشد و همیشه کاربران میخواهند Css در ساختار ووکامرس را تغییر دهند اما به سلیقه خود.
البته در این میان توجه به نکته ای مهم بسیار ضروری است و آن هم این است که توصیه میشود این فایل را تغییر ندهید و ویرایش نکنید. چرا که در هنگام بروزرسانی ووکامرس تمامی تغییرات شما از بین خواهند رفت و بازگردانی هر باره آن ها بسیار سخت و بی دلیل است.
اما برای حل این مشکل روش های دیگری موجود است که بهترین روش آن استفاده از استایل های اصلی وردپرس است. همانند فایل rtl.css که میتوانید کد های تغییر یافته را در آن قرار دهید.
غیر فعال سازی استایل های ووکامرس
گاهی ممکن است شما از نظر برنامه نویسی css در جایگاه بالایی قرار داشته باشید و بخواهید استایل های خود را برای ووکامرس بنویسید! و اصلا نمیخواهید که ووکامرس از استایل های پیشفرض خود در ساختار ووکامرس css استفاده کند. برای این منظور نیاز است که به ووکامرس بگوئید که نباید استایل ها را از فایل های گفته شده بخواند و باید از فایلی که شما میخواهید خوانده شود.
برای این منظور میتوانید کد زیر را در فایل functions.php قالب خود قرار دهید:
// Remove each style one by one
add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' );
function jk_dequeue_styles( $enqueue_styles ) {
unset( $enqueue_styles['woocommerce-general'] ); // Remove the gloss
unset( $enqueue_styles['woocommerce-layout'] ); // Remove the layout
unset( $enqueue_styles['woocommerce-smallscreen'] ); // Remove the smallscreen optimisation
return $enqueue_styles;
}
// Or just remove them all in one line
add_filter( 'woocommerce_enqueue_styles', '__return_false' );
