نحوه طراحی و ویرایش صفحه محصولات ووکامرس با کدنویسی
اگر به دنبال راهی برای سفارش سازی صفحه محصولات خود در wooCommerce می گردید، این پست به شما کمک می کند با کد نویسی صفحه محصولات WooCommerce را ویرایش کنید.
لیست عنوان ها:
سفارش سازی صفحه محصولات
شما می توانید هر چیزی که در نظر دارید را داخل فروشگاه ویرایش کنید. اما معمولا بیشترین تغییرات WooCommerce در صفحه محصولات و صفحه فروشگاه صورت می گیرد. اگر می خواهید حجم فروش را افزایش دهید و فرایند فروش را بهینه کنید، باید بر روی هر دو بخش کار کنید. در این پست قرار است به شما نشان دهیم چگونه به وسیله کد صفحه محصولات خود را ویرایش کنید.
یک طراحی مرتب و تجربه کاربری عالی می تواند به شما کمک کند فرایند کلی فروش را بهتر کنید، و نرخ تبدیل خود را افزایش دهید. برای ویرایش و سفارش سازی صفحه محصولات خود دو روش وجود دارد:
۱. بوسیله پلاگین ها
۲. با کدنویسی
با اینکه می توانید از بعضی پلاگین های آماده استفاده کنید، اما بیشتر آن ها شامل قابلیت هایی که شما می خواید نیستند. بنابراین اگر شما مقداری توانایی کد نویسی دارید، بهترین راه استفاده از کدنویسی برای ویرایش صفحات است. یکی از مهم ترین ویژگی های استفاده از کد، آزادی عملی است که به شما می دهد.
چگونه بوسیله کدنویسی صفحه محصولات WooCommerce را ویرایش کنیم
در این بخش، شما یاد می گیرید چگونه صفحه محصولات در WooCommerce را ویرایش کنید. موضوعات زیر را بررسی خواهیم کرد:
استفاده از هوک ها
۱. حذف کردن عناصر
۲. مرتب سازی آیتم های فروشگاه
۳. اضافه کردن آیتم های جدید
۴. اعمال کردن منطق شرطی
– کاربر وارد شده و نقش آن
– ID محصولات و طبقه بندی
۵. ویرایش برگه محصولات
۶. پشتیبانی از محصولات متغیر
بازنویسی فایل های قالب WooCommerce
۱. ویرایش اطلاعت متا
۲. استفاده از یک قالب شخصی سازی شده برای دسته بندی مشخص محصولات
-ویرایش فایل single-product.php
– ساخت یک فایل content-single-product.php جدید
– ساخت یک قالب شخصی سازی شده از ویرایش فایل content-single-product.php
۳. شخصی سازی صفحه محصولات با کد CSS
ترتیب صفحه محصولات در WooCommerce
قبل از اینکه آموزش را شروع کنیم، بیاید یک نگاهی به صفحه پیش فرض محصولات در WooCommerce بیندازیم و عناصر آن را تشخیص دهیم. به هر بخش در قالب و اینکه چطور اطلاعات چیده شده، خوب دقت کنید، چون قرار است در ادامه آموزش به این بخش ها اشاره کنیم. در WooCommerce دو فایل اصلی برای خروجی صفحه محصولات وجود دارد.
۱. فایل single-product.php: قالب مورد نیاز را برای ترتیب فعلی می سازد.
۲. فایل content-single-product.php: این فایل محتوای داخل قالب را بوجود می آورد.
هر دو فایل را می شود بوسیله یک تم فرزند (child theme) بازنویسی کرد. این یک روش معمول برای بازنویسی فایل های قالب WooCommerce است. اما شما باید سعی کنید تا جایی که ممکن است از هوک ها به جای بازنویسی فایل های قالب استفاده کنید. استفاده از هوک ها یکی از بهترین روش ها است که توسط WordPress هم برای شخصی سازی سایت شما پیشنهاد می شود.
ولي برای کار های سنگین که شامل تابع ها و ابجکت ها می شوند، شاید نیاز باشد که فایل های قالب رو ویرایش کنید. با ترکیب کردن این دو روش، تقریبا می توانید هر شخصی سازی ای که می خواهید را اعمال کنید. بنابراین ما در این آموزش هر دو روش را آموزش خواهیم داد.
قبل از شروع آموزش، مطمئن شوید که یک تم فرزند (child theme) برای تست کردن کد بسازید و یا از یک پلاگین برای تولید اش استفاده کنید. بیاید یه نگاهی به چند مثال کاربردی بیندازیم که ببینیم این تکنیک ها چگونه سایت شما را بهتر می کنند.
۱) ویرایش با استفاده از هوک ها
۱.۱) حذف عناصر
چندین هوک برای حذف هر عنصری از صفحه یک محصول وجود دارد. هر کدام از این هوک ها برای عنصر خاصی کار می کنند. شما باید از هوک مناسب، تابع برگشتی مناسب (callback function) و از مقدار اولویت مناسب استفاده کنید.
برای مثال، اگر می خواهید عنوان تمامی صفحه محصولات خود را حذف کنید، باید از کد پایین در فایلfunctions.php چایلد تم استفاده کنید:
remove_action(/* hook -> */'woocommerce_single_product_summary',
/* callback function ->*/ 'woocommerce_template_single_title',
/* position ->*/5 );شما می توانید تمام هوک ها و پارامتر های مربوط بهش را در فایل content-single-product.php در پلاگین WooCommerce پیدا کنید. حالا بیاید یک نگاهی به چند اسکریپت نمونه دیگر برای حذف کردن و شخصی سازی نگاه کنیم.
// remove title
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
// remove rating stars
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
// remove product meta
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
// remove description
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
// remove images
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
// remove related products
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
// remove additional information tabs
remove_action('woocommerce_after_single_product_summary ','woocommerce_output_product_data_tabs',10);۱.۲) مرتب کردن عنصر ها
مرتب کردن عنصرهای صفحه محصولات کار کاملا آسانی می باشد. اول، شما باید اقدام به حذف هوک همان عنصر، به همون روش قبلی بکنید. و سپس باید دوباره به آن یک عدد اولویت/سفارش ( priority/order number) متفاوت اضافه کنید. برای مثال، اسکریپت زیر توضیحات محصول را به زیر عنوان انتقال می دهد:
// change order of description
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 6 );همانطور که مشاهده می کنید، ابتدا حذف می کنیم و سپس با یک اولویت متفاوت (۶ به جای ۲۰) دوباره اضافه می کنیم. چرا عدد اولویت/سفارش ۶ را انتخاب کردیم؟ ما می دانیم که عنوان دارای اولویت ۵ می باشد، بنابرین ما عدد ۶ را انتخاب می کنیم، تا توضیحات را دقیقا بعد عنوان نمایش دهیم. با این اطلاعات که بدست آوردید، شما می توانید این روش را برای هر هوک و فراخوانی (callback) استفاده کنید. و در هر ترتیب دلخواه قرار دهید.
۱.۳) اضافه کردن عنصر جدید
برای اضافه کردن یک عنصر جدید به صفحه محصولات، شما باید فایل های قالب را بازنویسی کنید. همچنین می توانید از هوک زیر نیز برای این کار استفاده کنید:
add_action('woocommerce_before_single_product_summary',function(){
printf('<h4><a href="?added-content">Congratulations, you\'ve just added a link!</a></h4>');
}
);
همچنین می توانید تابعی برای خودتان بسازید:
add_action('woocommerce_after_single_product_summary','QuadLayers_callback_function');
function QuadLayers_callback_function(){
printf('
<h1> Hey there !</h1>
<div><h5>Welcome to my custom product page</h5>
<h4><a href="?link-to-somewere">Link to somewere!</a></h4>
<img src="https://img.freepik.com/free-vector/bird-silhouette-logo-vector-illustration_141216-100.jpg" />
</div>');
}۱.۴) منطق شرطی در صفحه محصولات تکی
شما می توانید با تابع های محلی WordPress، منطق شرطی مورد نظر خود را بسازید. در ادامه چند مثال را بررسی خواهیم کرد.
۱.۴.۱) کاربر وارد شده و نقش کاربر
user_is_logged_in() یک تابع پیش فرض WordPress برای تایید بازدید کننده های وبسایت می باشد. ما می توانیم با استفاده از تابع wp_get_current_user() تمام اطلاعات مربوط به کاربر های وارد شده را دست آوریم. در اسکریپت زیر ما داریم بررسی می کنیم که آیا کاربر وارد شده و چه نقشی دارد. شما همچنین می توانید تابع های شخصی سازی شده خود را برای فرایند های پیچیده تر اضافه کنید.
add_action('woocommerce_before_single_product','QuadLayers_get_user');
function QuadLayers_get_user() {
if( is_user_logged_in() ) {
$user = wp_get_current_user();
printf ('<h1>Howdy ' .$user->user_nicename.'!</h1>');
$roles = ( array ) $user->roles;
if($roles[0]=='administrator'){
echo "<h4><b>You are $roles[0]</h4></b>";
}
}
else {
return array();
}
}۱.۴.۲) شناسه محصول و taxonomy ها
مانند قبل، می توانیم شناسه محصول و یا دسته بندی آن را بدست آوریم. اما در اینجا ما از ابجکت (global WP $post)، و همچنین get_the_terms() برای بدست آوردن دسته بندی محصول استفاده می کنیم.
add_action('woocommerce_before_single_product','QuadLayers_get_product_taxonomies');
function QuadLayers_get_product_taxonomies(){
global $post;
$term_obj_list = get_the_terms( $post->ID, 'product_cat' );
$terms_string = join(', ', wp_list_pluck($term_obj_list, 'name'));
if($terms_string=='Posters'){
echo "
<h1>This is one of our best $terms_string</h1>"; echo "<h2>Product ID: $post->ID"; } }اسکریپت بالا یک دسته بندی تکی را برگشت می دهد. برای بدست آوردن چند دسته بندی یا تگ نیاز به تابع های پیچیده تر است. شما باید قبل از اعمال شرط ها، از حلقه بر روی taxonomy ها استفاده کنید. مانند زیر:
add_action('woocommerce_before_single_product','QuadLayers_get_multiple_taxonomies');
function QuadLayers_get_multiple_taxonomies(){
global $post;
$args = array( 'taxonomy' => 'product_tag',);
$terms = wp_get_post_terms($post->ID,'product_tag', $args);
$count = count($terms);
if ($count > 0) {
echo '<div class="custom-content"><h4>Tag list:</h4><ul>';
foreach ($terms as $term) {echo '<li>'.$term->name.'</li>';}
echo "</ul></div>";
}
} ۱.۵) ویرایش برگه محصولات
ما با استفاده از هوک woocommerce_product_tabs می توانیم به حذف، مرتب کردن و یا اضافه کردن یک برگه جدید در بخش اطالاعات اضافی بپردازیم. اسکریپت زیر برگه توضیحات و محتوا آن را پاک می کند. برگه بررسی ها را تغییر نام دهید و سپس اولویت توضیحات اضافی را در جایگاه اول بگذارید.
add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
function woo_remove_product_tabs( $tabs ) {
unset( $tabs['description'] ); // Remove the Description tab
$tabs['reviews']['title'] = __( 'Ratings' ); // Rename the Reviews tab
$tabs['additional_information']['priority'] = 5; // Additional information at first
return $tabs;
}
برای ویرایش محتویات یک برگه، شما باید از یک تابع برگشتی (callback function) استفاده کنید:
add_filter( 'woocommerce_product_tabs', 'woo_custom_description_tab', 98 );
function woo_custom_description_tab( $tabs ) {
$tabs['description']['callback'] = 'woo_custom_description_tab_content'; // Custom description callback
return $tabs;
}
function woo_custom_description_tab_content() {
echo '
<h2>Custom Description</h2>
'; echo 'Here\'s a custom description'; }همچنین می توانید به روش زیر یک برگه جدید بسازید:
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
// Adds the new tab
$tabs['test_tab'] = array(
'title' => __( 'New Product Tab', 'woocommerce' ),
'priority' => 50,
'callback' => 'woo_new_product_tab_content'
);
return $tabs;
}
function woo_new_product_tab_content() {
echo '<h2>New Product Tab</h2><p>Here\'s your new product tab content</p>.';
}در این مثال، ما یک برگه جدید به اسم “New Product Tab” ساختیم. در تصویر زیر نتیجه اش را در فرانت اند می بینید.
۱.۶) پشتیبانی برای محصولات متغیر
شما می توانید با استفاده از ويژگی پیش فرض و بدون نیاز به شخصی سازی در WooCommerce، محصولات متغیر بسازید. ولی برای شخصی سازی هر بخشی که با محصولات متغیر سازگار باشد، باید از راهنمای WoCommerce پیروی کنید.
دقت کنید که هر شخصی سازی ای باید در کل سایت اعمال بشود، از اعمال فقط بر روی یک صفحه تکی خودداری کنید. ما همچنان می توانیم از هوک های موجود مربوط به محصولات متغیر استفاده کنیم. این هوک ها فقط داخل صفحه محصولات متغیر عمل خواهند کرد.woocommerce_before_variations_form
woocommerce_before_single_variation
woocommerce_single_variation
woocommerce_after_single_variation
۲) شخصی سازی صفحه محصولات با بازنویسی فایل قالب WooCommerce
روش دوم جایگزین برای ویرایش صفحه محصولات با کدنویسی، بازنویسی فایل قالب است. این روش نسبت به روش قبلی ریسک بیشتری دارد، بنابراین قبل از شروع کار، از وبسایت یک پشتیبانی کامل بگیرید.
بازنویسی فایل های قالب WooCommerce مثل بازنویسی یک فایل در تم فرزند است (child theme) است. بنابراین برای اینکه بعد از بروزرسانی تم، شخصی سازی های خودتان را از دست ندهید، یک تم فرزند بسازید.
۲.۱) ویرایش اطلاعات متا (meta-information)
برای ویرایش اطلاعات متا، ما باید فایل قالب مسئول چاپ داده های همخوان را بازنویسی کنیم. فایل meta.php در پلاگین WooCommerce در این مسیر قرار دارد: woocommerce/templates/single-product/meta.php
حالا فهرست فایل های تم فرزند (child theme) را ویرایش کنید و یک پوشه WooCommerce بسازید. در مرحله بعد، یک پوشه داخل همان پوشه به اسم single-product بسازید و فایل meta.php را در این مسیر جای گذاری کنید: Child_theme/woocommerce/single-product/meta.php
بعد از این، شما باید بتوانید فایل meta.php را ویرایش کنید و تغییرات را در فرانت اند ببینید. فایل نمونه meta.php زیر می تواند کار های زیر را انجام دهد:
۱. تغییر برچسب SKU به ID
۲. تغییر تگ ها به تحت منتشر شده
۳. حذف برچسب دسته بندی
global $product;
?>
<div class="product_meta">
<?php do_action( 'woocommerce_product_meta_start' ); ?>
<?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?>
<span class="sku_wrapper"><?php esc_html_e( 'ID:', 'woocommerce' ); ?>
<span class="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?>
</span>
</span>
<?php endif; ?>
<?php echo wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( '', '', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>
<?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Published under:', 'Published under:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>
<?php do_action( 'woocommerce_product_meta_end' ); ?>
</div>۲.۲) تغییر به یک قالب سفارشی برای دسته بندی محصول خاص
حالا با هم یک کار سخت تر را امتحان می کنیم. یک محصول را وقتی نادیده می گیریم که متعلق به دسته بندی خاصی باشد.
۲.۲.۱) ویرایش فایل single-product.php
اول فایل single-product.php را کپی و سپس در پوشه تم فرزند (child theme) جای گذاری کنید. در مسیر زیر:
Child_theme/woocommerce/single-product.php
سپس فایل را باز کنید و خط ۳۷ را بررسی کنید: wc_get_template_part(‘content’,’single-product’);
فایل content-single-product.php با چاپ همه عناصر محصول فعلی حلقه را کامل می کند، و طرح (layout) را می سازد.
ما می خواهیم فقط هنگامی که محصول متعلق به یک دسته بندی خاص است، این فایل را نادیده (override) بگیریم.
خط ۳۷ کد را پاک کنید و با اسکریپت زیر جایگزین کنید:
$terms = wp_get_post_terms( $post->ID, 'product_cat' );
$categories = wp_list_pluck( $terms, 'slug' );
if ( in_array( 'posters', $categories ) ) {
wc_get_template_part( 'content', 'single-product-posters' );
} else {
wc_get_template_part( 'content', 'single-product' );
} دقت کنید که ما داریم از محصولات نمونه WooCommerce استفاده می کنیم. بنابراین شامل یک دسته بندی به اسم “Posters” می شود که در این مثال مورد استفاده قرار می گیرد. شما می توانید به راحتی این دسته بندی را با دسته بندی مورد نظر خودتان عوض کنید.
برای دسترسی به دسته بندی محصولات خود، باید به مسیر WordPress dashboard > Products > Categories بروید.
۲.۲.۲) ساخت یک فایل content-single-product.php جدید
حالا نیاز داریم که یک فایل جدید برای جایگزینی فایل اولیه content-single-product.php بسازیم.
به مثال های بالا نگاه کنید و ببنیند چگونه فایل content-single-product-posters.php فراخوانی شده است. این به این دلیل مهم است چون اسم فایل باید با کد در مرحله قبلی یکسان باشد. بنابرین اسم فایل شما باید content-single-product-/*YOURCATEGORYSLUG*/.php باشد.
به این روش wc_get_template_part( ‘content’, ‘single-product-YOURCATEGORY’ )، فایل content-single-product-YOURCATEGORY.php را فعال خواهد کرد و جایگزین فایل قالب اولیه WooCommerce می شود.
فایل اولیه content-single-product.php را در پوشه WooCommerce تم فرزند (child theme) جای گذاری کنید و همانطور که بالا گفته شد، اسم فایل را ویرایش کنید.
۲.۲.۳) ساخت یک قالب سفارشی با ویرایش فایل content-single-product.php
این صفحه محصول نمونه فقط زمانی نمایش داده می شود که محصول فعلی متعلق به دسته بندی “Posters” باشد. پس از اضافه کردن چند عدد محتوا و عنصر، ترتیب را اصلاح کردیم. و سپس چند عدد shortcode اجرا کردیم.
با اینکه این یک مثال ساده است، ولی می تواند به شما کمک کند با نحوه کارکرد آن آشنا شوید و قابلیت های دیگر را کشف کنید.
// remove product summary elements
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
// Custom content
printf('<h1>This is the <b>'.$post->post_name.' </b>poster</h1>');
printf('<h4>A full customized product page for the "posters" category products</h4>');
// Description
printf('<h5>'.$post->post_excerpt.'</h5>');
//thumbnail
do_action( 'woocommerce_before_single_product_summary' );
//add meta
do_action( 'woocommerce_single_product_summary');
// shortcodes
echo do_shortcode(''); echo "<h3>Contact:</h3>".do_shortcode('[wpforms id="1082"]'); echo "<h3>More posters:</h3>".do_shortcode('');حالا وقتی فرانت اند را نگاه کنیم، با چیزی مثل تصویر زیر روبرو می شویم:
فراموش نکنید که ما داریم از شئ پست سراسری (global post object) استفاده می کنیم. از کد var_dump($post); برای نمایش تمام اطلاعات موجود محصول فعلی استفاده کنید. شما می تواند مانند کاری که در کد نمونه با توضیحات محصول انجام دادیم، از هر داده ای استفاده کنید : $post->post_excerpt
۳) شخصی سازی صفحه محصول با اسکریپت CSS
یک روش ساده دیگر برای ویرایش صفحه محصولات و هر صفحه دیگری استفاده از کد CSS است. این روش این امکان را به شما می دهد تا مناسب با بیزینس خودتان صفحه محصولات را طراحی کنید.
۱. اول شما باید یک فایل جدید (.CSS) در داخل تم فرزند (child theme) بسازید. ما پیشنهاد می دهیم که اسم فایل را چیزی مانند single-product.css بگذارید که پیدا کردنش راحت تر است.
۲. سپس فایل را پوشه اصلی تم فرزند و هم سطح functions.php و style.css قرار دهید.
۳. سپس اسکریپت زیر را در فایل functions.php تم فرزند جایگزین کنید. در صورت نیاز اسم فایل CSS را عوض کنید.
add_action( 'wp_enqueue_scripts', 'load_custom_product_style' );
function load_custom_product_style() {
if ( is_product() ){
wp_register_style( 'product_css', get_stylesheet_directory_uri() . '/single-product.css', false, '1.0.0', 'all' );
wp_enqueue_style('product_css');
}
}شرط if(is_product()) صفحه فعلی را بررسی می کند که ایا صفحه محصول است یا نه. این از بارگزاری غیر ضروری فایل CSS برای صفحه غیر از صفحه محصول جلوگیری می کند.
۴. بعد از تمامی این مراحل، حالا شما می توانید با قوانین سفارشی CSS صفحه محصولات خود را شخصی سازی کنید.
با اینکه این متود ساده است و راه حل سریعی فراهم می کند، اما ممکن است برای همه شرایط مناسب نباشد. CSS در فرانت اند قابل تغییر است، بنابراین هر کاربری که به ابزار های توسعه مرورگر آشنا باشد، می تواند عنصر های مخفی را نمایان کند.
نتیجه گیری
بطور خلاصه، شخصی سازی فروشگاه انلاین یکی از مهم ترین نکات برای برتری نسبت به رقبا است. صفحه محصولات یکی از مهم ترین صفحات در فروشگاه شماست و امکانات زیادی برای ارتقا تجربه کاربر و سطح فروش در دسترس است.
با اینکه شما می توانید از پلاگین برای اینکار استفاده کنید، اما در صورتی که مهارت کد نویسی دارید، پیشنهاد ما این است که بصورت کدنویسی صفحه محصولات را ویرایش کنید. بدون نصب ابزار اضافی می تونید هر عنصر صفحه را شخصی سازی کنید. در این آموزش، ما سه روش مختلف باری شخصی سازی معرفی کردیم:
۱. استفاده از هوک ها
۲. بازنویسی قالب WooCommerce
۳. استفاده از کد CSS
تا حد امکان از هوک ها به جای بازنوسی فایل های قالب استفاده کنید. استفاده از هوک ها ریسک کمتری دارد و توسط WordPress هم پیشنهاد می شود. اما برای کار های پیجیده تر شاید نیاز باشد از روش بازنوسی فایل قالب استفاده کنید. اگر دو روش را با هم ترکیب کنید، می توانید هر چیزی که بخواهید را شخصی سازی کنید.
دیدگاهی وجود ندارد