استفاده از CSS برای بزرگنویسی فیلدهای لیست سفارشات ووکامرس

مقدمه‌ای بر استایل دهی سفارشی در ووکامرس

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

چگونه از CSS استفاده کنیم؟

CSS یا شیوه‌نامه آبشاری، یک زبان استایل‌دهی است که به توسعه‌دهندگان اجازه می‌دهد ظاهر و طرح یک وب‌سایت را کنترل کنند. با استفاده از CSS می‌توان عناصر HTML را به صورت دلخواه تغییر داد. برای تغییر حالت حروف فیلدهای لیست سفارشات ووکامرس به حروف بزرگ، می‌توانیم از ویژگی css text-transform استفاده کنیم.

اجرای css در ووکامرس

برای اینکه بتوانیم CSS خود را به درستی بر روی ووکامرس اعمال کنیم، باید ابتدا مکان مناسب برای قرار دادن کد CSS را بیابیم. معمولاً این کدها می‌توانند در قسمت تنظیمات وردپرس یا فایل‌های قالب قرار گیرند.

نمونه کد CSS برای بزرگنویسی

در زیر مثالی از کد CSS آمده است که می‌توانید از آن برای تغییر حالت حروف لیست سفارشات ووکامرس استفاده کنید:

.woocommerce-orders-table__header-item {
    text-transform: uppercase;
}

.woocommerce-orders-table__cell-order-number,
.woocommerce-orders-table__cell-order-date,
.woocommerce-orders-table__cell-order-status {
    text-transform: uppercase;
}

توضیح خط به خط کد

.woocommerce-orders-table__header-item
این کلاس مربوط به هدر آیتم‌های جدول سفارشات ووکامرس است.
text-transform: uppercase;
این ویژگی بصورت کامل حروف را به حروف بزرگ تبدیل می‌کند.
.woocommerce-orders-table__cell-order-number و .woocommerce-orders-table__cell-order-date و .woocommerce-orders-table__cell-order-status
هرکدام از این کلاس‌ها مربوط به ستون‌های خاصی از جدول سفارشات ووکامرس هستند که برای هر یک ویژگی تبدیل به حروف بزرگ اعمال شده است.