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

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

تغییر قالب در ووکامرس

در ادامه مطلب روش های مختلفی را برای شما معرفی می کنیم. همچینین بهترین روش برای تغییر قالب در ووکامرس را معرفی می کنیم.

روش اول: ایجاد یک کپی از فایل ها و تغییر در آن ها

برای این منظور کاری که در ابتدا باید انجام شود، ایجاد یک پوشه به نام “woocommerce” در پوشه قالب است. حال پس از ایجاد این فولدر شما باید فایل های قالب مربوطه را در آن کپی کنید و قرار دهید و تغییرات را ایجاد نمائید. دوستان با اینکه این روش هنوز به درستی کار می کند اما همچنان ما آن را تائید نمیکنیم. این عدم تائید به این دلیل است که ووکامرس آپدیت میشود ولی فولدر شما آپدیت نخواهد شد.

روش دوم : تغییر یک فایل قالب در ووکامرس به صورت مستقیم

اصلا اصلا اصلا. در هیچ شرایطی نباید این کار را انجام دهید! زمانی که ووکامرس را آپدیت کنید، تغییرات شما از بین می رود. پس این روش در تغییر قالب در ووکامرس منتفی است!

روش سوم : استفاده از هوک ها و فیلترها

بله! روشی که بالاخره مورد تائید ما می باشد! پس ادامه را بررسی کنید.
این روش، با فاصله ای بسیار زیاد بهترین روش برای سفارشی سازی قالب ووکامرس یا در واقع تغییر قالب در ووکامرس شماست. ووکامرس به صورت بسیار منعطف همه کاربری ها و فیلترها را داراست. شما می توانید به راحتی از آن ها استفاده کرده و تغییرات مورد نظر خود را روی آن ها اعمال نمائید. اما ممکن است در ابتدا این روش کمی ترسناک باشد اما نترسید روش زیر شما را راهنمایی خواهد کرد.

قدم نخست: پیدا کردن توابع آماده برای این کار

بسیاری از این توابع و اکشن ها وجود دارند که مسئله اصلی شما پیدا کردن آن ها است. روشی که برای این منظور من استفاده میکنم جست و جو در github است که به شما اجازه می دهد به موردی که می خواهید خیلی راحت دست پیدا کنید. این فایل ها اطلاعات بسیار کاربردی به شما نمایش می دهند. خب برای شروع کار با single-product.php شروع می کنیم:

<?php /** * woocommerce_before_main_content hook. * * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content) * @hooked woocommerce_breadcrumb - 20 */ do_action( 'woocommerce_before_main_content' ); ?>

اولین اکشنی که در این فایل خواهیم دید do_action( ‘woocommerce_before_main_content’ ) است. البته باید بدانید که هر وقت تابع do_action را دیدید به این معنی است که برخی از هوک ها در حال آغاز به کار هستند.
ووکامرس و وردپرس در اکثر اوقات از این اکشن ها برای ایجاد بخش های یک قالب استفاده می کنند. در فایل های قالب شما می توانید توابع هوک شده ای را ببینید که به صورت کاملا واضح برای شما همراه با الویت مشخص شده اند.

دوستان دو هوک در “woocommerce_before_main_content, woocommerce_output_content_wrapper” و “woocommerce_breadcrumb” وجود دارند! که دارای الویت ۱۰ و ۲۰ هستند. این الویت به شما می گوید که کدام یک از توابع سفارشی نمایش داده خواهند شد.۱۰ اولین نمایش و ۲۰ آخرین نمایش و ۳۰ احتمالا بعد از ۲۰ قرار میگیرد.

پس همانطور که متوجه شدید این روش بهترین راه برای این است که بدانید کدام یک از اکشن ها آماده هستند. در هر جایی که یک اکشن آماده باشد شما می توانید از خروجی محتویات آن استفاده کنید. برای مثال شما ممکن است بخواهید یک بخش محتوایی به بخش هوک اصلی محتوای سایت خود اضافه کنید. مثل تگ های باز و بسته div در این حالت می توانید از اکشن های woocommerce_before_main_content و woocommerce_after_main_content استفاده کنید.

  محاسبه هزینه حمل و نقل در ووکامرس با Product page shipping calculator for WooCommerce

شما می توانید به سادگی هوک ها را حذف و یا منتقل کنید. برای مثال می توانید خط راهنما را با یک خط کد نویسی حذف نمائید که برای دانستن آن ادامه مطلب را مطالعه کنید

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

خب به ادامه موضوع افزودن تگ های باز و بسته div به محتوای اصلی می پردازیم.شما میتوانید از روش زیر برای تغییر در صفحه مورد نظر استفاده کنید که کد آن به صورت زیر است:

/**
 * Opening div for our content wrapper
 */
add_action('woocommerce_before_main_content', 'iconic_open_div', 5);

function iconic_open_div() {
    echo '

<div class="iconic-div">';
}

/**
 * Closing div for our content wrapper
 */
add_action('woocommerce_after_main_content', 'iconic_close_div', 50);

function iconic_close_div() {
    echo '</div>


';
}

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

اول از همه ما به تابع iconic_open_div خود میگوئیم که روی اکشن woocommerce_before_main_content اجرا شود با الویت 5. این عمل خروجی div باز شده ما را دقیقا قبل از محتوای اصلی ووکامرس نمایش میدهد سپس ما آن را روی اکشن woocommerce_after_main_content میبندیم. البته با الویت ۵۰ تا مطمئن باشیم درآخر اجرا خواهد شد.

در نهایت باید توجه داشته باشید که می توانید قالب های ووکامرس را به این روش به صورت کلی تغییر دهید. جای هیچ نگرانی هم نخواهید داشت چرا که تا زمانی این تغییرات شما درمحل باقی بمانند هرگز از بین نخواهند رفت و هرگز این تغییرات شما مانع اضافه شدن قابلیت های جدید نخواهند شد.

مثال…

مثال بعدی در این زمینه می تواند افزودن یک جمله و نوشته بعد از نام محصول در کاتالوگ محصولات فروشگاه شما باشد. در این بخش ما نیاز داریم تا فایل <code>templates/content-product.php</code> را ویرایش نمائیم. برای این منظور فایل گفته شده را باز کنید و پس از باز کردن خواهید دید که <code>woocommerce_template_loop_product_title</code> در داخل اکشن <code>woocommerce_shop_loop_item_title</code> هوک شده است. ما میتوانیم آن را ویرایش کرده و پس از عنوان محصول هوک کنیم و البته به آن الویت ۱۰ را بدهیم.


/**
 * Add coming soon text after a product title
 */
add_action('woocommerce_shop_loop_item_title', 'iconic_after_title', 15);

function iconic_after_title() {
    echo __('Coming Soon', 'iconic');
}

البته می توانیم خیلی ساده این روش را کمی طولانی تر کنیم و یک مرحله به آن اضافه کنیم و متن را فقط به محصولات با استفاده از آی دی اضافه کنیم. توجه داشته باشید که متغییر جهانی $product در این زمینه در خدمت شماست.


/**
 * Add coming soon text after a product title
 */
add_action('woocommerce_shop_loop_item_title', 'iconic_after_title', 15);

function iconic_after_title() {
    global $product;

    // exit if the product does not have an ID of 15
    if( $product->id != 15 )
        return;

    echo __('Coming Soon', 'iconic');
}

قدم سوم : انتقال و حذف هوک ها

حذف هوک موجود یک عمل کاملا عادی است. فرض کنید بخواهیم خط راهنمای ووکامرس را حذف کنیم. برای تغییر قالب در ووکامرس  کد زیر را به فایل فانکشن قالب خود اضافه کنید.

/**
 * Remove breadcrumbs
 */
remove_action('woocommerce_before_main_content', 'woocommerce_breadcrumb', 20);

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

PHP

/**
 * Remove breadcrumbs
 */
remove_action('woocommerce_before_main_content', 'woocommerce_breadcrumb', 20);


/**
 * Add breadcrumbs earlier on
 *
 * We know the content wrapper is added at priority 10, so
 * let's add the breadcrumbs before that, at priority 5
 */
add_action('woocommerce_before_main_content', 'woocommerce_breadcrumb', 5);

بدین صورت شما قادر به تغییر قالب در ووکامرس خواهید بود.

موفق باشید

آیا این مقاله برای شما مفید بود؟
تقریبا
خیر

دیدگاهتان را بنویسید

ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده‌اید و با آن موافق هستید.

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. 4 سال عضو همیار وردپرس

    با سلام
    بعد از تغییر قالب فقط کد php عوض میشن؟
    دسته بندی محصولات از بین نمیرن؟

    افزونه ها غیرفعال نکنیم؟

    • 10 سال عضو همیار وردپرس

      سلام
      انجام هر گونه عملیات ایمن مجازه. حتما بک آپ کامل فراموش نشه

  2. 6 سال عضو همیار وردپرس

    سلام دوست عزیز
    یه سوال داشتم؟ تو قالب وردپرس میخوام تغییری ایجاد کنم به این صورت که پس از اینکه کاربر بر روی اقدام به پرداخت ( در صفحه سبد خرید ) کلیک کرد به جای انتقال به صفحه پرداخت به صفحه تماس با ما منتقل شه. احتمالا باید یک کدی رو در php functions ایجاد کنم . ممنون میشم راهنمایی کنید

  3. متوجه نشدم
    یعنی من میخوام آدرس پیشفرض product رو تغییر بدم از ووکامرس باید چه کدی رو ویرایش کنم یا اضافه کنم ؟؟

  4. با سلام
    ببخشید من متوجه نشدم یعنی اگر من بخوام مثلا به یه قالبم که اسلایدر نداشته بهش اضافه کنم و یا بنر بذارم تو صفحه اصلیش که قبلا نداشته این تغییرات با بروزرسانی قالب همه پاک میشن؟؟ و باید حتما با روش سوم که شما گفتید تغییرات رو اعمال کنم؟

    • 7 سال عضو همیار وردپرس

      سلام
      اگر تغییرات شما درون کد های php قالب و یا وردپرس باشند و شما هر یک را آپدیت کنید اگر تغییرات را به فایل های جدید اعمال نکنید از بین میروند