سفارشی سازی صفحه محصول ووکامرس

سفارشی سازی صفحه محصول ووکامرس

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

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

سفارشی سازی صفحه محصول ووکامرس بصورت برنامه نویسی

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

برای طراحی صفحه ابتدا افزونه ووکامرس را از قسمت “افزونه ها” در پیشخوان وردپرس نصب نمایید.

سپس فایل functions.php قالب خود را باز کرده و کدهای زیر را را وارد نمایید.

if (!function_exists('hs_setup')) :
    function hs_setup()
    {
        if (class_exists('WooCommerce')) {
            /* woocommerce */
            add_theme_support('woocommerce');
            add_theme_support('wc-product-gallery-zoom');
            add_theme_support('wc-product-gallery-lightbox');
            add_theme_support('wc-product-gallery-slider');
        }
    }
    add_action('after_setup_theme', 'hs_setup');
endif;

با استفاده از این کدها به وردپرس اعلام می کنیم که این قالب از ووکامرس پشتیبانی می کند..

اگر این کدها از قبل در قالب شما وجود دارند می توانید از وارد کردن آنها صرف نظر کنید.

حال به پوشه “woocommerce” در “wp-content/plugins” رفته و فایلهای داخل پوشه “templates” را داخل پوشه قالب و در داخل پوشه “woocommerce” کپی می کنیم. حال ما در داخل پوشه قالب خود پوشه ای با عنوان “woocommerce” داریم که شامل فایلهای کپی شده از فایل “templates” در افزونه ووکامرس می باشد.

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

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

  • پوشه single-product و فایلهای داخل آن
  • فایل content-single-product.php
  • فایل single-product-reviews.php
  • فایل single-product.php

فایل single-product.php

برای سفارشی سازی صفحه محصول، ابتدا از این فایل شروع می کنیم. این فایل مسئول نمایش تمامی محصولات بصورت single-product می باشد. مفهوم single-product در ووکامرس به معنی فقط یک محصول می باشد که همان اطلاعات مربوط به صفحه محصول با جزئیات می باشد.

این فایل کدهای فایل content-single-product.php را فراخوانی می کند. شما می توانید تغییرات کلی را برای نمایش صفحه محصول اعمال کنید برای مثال شما می خواهید یک کلاس کلی برای صفحه محصول خود تعریف کنید که می توانید از داخل این فایل نیز انجام دهید.

برای مثال می خواهیم پیامی در اول صفحه محصول برای بازدیدکنندگان نمایش دهیم. فایل single-product.php را باز کرده و کدهای آن را مانند زیر تغییر می دهیم.

<div><?php echo esc_html('This is our product.'); ?></div>
<?php while ( have_posts() ) : ?>
	<?php the_post(); ?>
        <div><?php echo esc_html('Display if product exists.'); ?></div>
	<?php wc_get_template_part( 'content', 'single-product' ); ?>
<?php endwhile; // end of the loop. ?>

در این مثال فقط قبل از while پیام اضافه شده است و مابقی کدها همان کدهای پیشفرض ووکامرس می باشد.

اگر به صفحه محصول مراجعه کنید می توانید تغییر را مشاهده نمایید.

سفارشی سازی صفحه محصول ووکامرس

همان طور که مشاهده می کنید عبارت “This is our product.” در اول صفحه و قبل از نمایش محصول، نمایش داده شده است.

فایل content-single-product.php

این فایل مسئول نمایش موارد قبل و بعد از کدهای محصول می باشد. این فایل نیز مانند فایل قبلی می باشد و می توانید کلیات طراحی را نیز در این صفحه اعمال کنید.

این فایل شامل هوک های ووکامرس هست که در این هوکها پیاده سازی جزئیات محصول قرار دارد مانند نام، توضیحات وغیره که همگی این کدها در داخل پوشه single-product می باشد. برای تغییر و سفارشی سازی هر یک از جزئیات به کدهای هر قسمت مراجعه خواهیم کرد که در ادامه در این مقاله توضیح داده خواهد شد.

برای مثال کد فایل را به صورت زیر تغییر دهید.

if ( post_password_required() ) {
	echo get_the_password_form(); // WPCS: XSS ok.
	return;
}
?>
<div id="product-<?php the_ID(); ?>" <?php wc_product_class( '', $product ); ?>>
	<div><?php echo esc_html('This is ('.get_the_title().') our product.'); ?></div>

اگر به صفحه محصول مراجعه نمایید مشاهده خواهید کرد که پیام در آنجا با نام هر محصول نمایش داده می شود.

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

<div class="summary entry-summary">
<?php
        /**
         * Hook: woocommerce_single_product_summary.
	 *
	 * @hooked woocommerce_template_single_title - 5
	 * @hooked woocommerce_template_single_rating - 10
	 * @hooked woocommerce_template_single_price - 10
	 * @hooked woocommerce_template_single_excerpt - 20
	 * @hooked woocommerce_template_single_add_to_cart - 30
	 * @hooked woocommerce_template_single_meta - 40
	 * @hooked woocommerce_template_single_sharing - 50
	 * @hooked WC_Structured_Data::generate_product_data() - 60
	*/
	do_action( 'woocommerce_single_product_summary' );
?>
</div>
<?php
/**
 * Hook: woocommerce_before_single_product_summary.
 *
 * @hooked woocommerce_show_product_sale_flash - 10
 * @hooked woocommerce_show_product_images - 20
 */
do_action( 'woocommerce_before_single_product_summary' );
?>

همانطور که مشاهده می کنید ترتیب نمایش عکس و گالری محصول و توضیحات محصول عوض شده است.

البته اگر از استایلهای پیشفرض خود ووکامرس استفاده نمایید ترتیب نمایش تغییری نخواهد کرد زیرا ترتیب نمایش توسط کدهای CSS تعیین شده است.

حال به سفارشی سازی جزئیات محصول در ووکامرس می پردازیم.

پوشه single-product برای سفارشی سازی صفحه محصول

این پوشه شامل کدها و طراحی های جزئیات محصول (single-product) می باشد که در لیست زیر بصورت خلاصه هر کدام توضیح داده شده است.

  • پوشه add-to-cart: شامل کدهای دکمه افزودن به سبد خرید می باشد.
  • پوشه tabs: شامل کدهای تبهای محصول می باشد مانند تب توضیحات و یا تب نظرات محصول
  • فایل meta.php: کدهای مربوط به شناسه محصول و دسته بندی محصول
  • فایل photoswipe.php: اسلایدر نمایش عکسهای محصول و گالری
  • فایل price.php: کدهای مربوط به نمایش مبلغ محصول
  • فایل product-attributes.php: مسئول نمایش ویژگی های محصول مانند رنگ، ابعاد وغیره
  • فایل product-image.php: شامل کدهای مربوط به نمایش عکس محصول
  • فایل product-thumbnails.php: نمایش گالری محصول
  • فایل rating.php: نمایش امتیاز محصول از ۵
  • فایل related.php: نمایش محصولات مرتبط
  • فایل review-meta.php: شامل پیامهای مربوط به نظرات کاربران مانند “نظر در انتظار تایید”
  • فایل review-rating.php: نمایش امتیاز نظر برای محصول
  • فایل review.php: نمایش لیست نظرات مشتریان
  • فایل sale-flash.php: کد مربوط به عبارت “حراج” در محصول
  • فایل share.php: کدهای مربوط به اشتراک گذاری محصول
  • فایل short-description.php: مربوط به نمایش توضیحات مختصر برای محصول
  • فایل stock.php: مربوط به موجودی محصول در انبار
  • فایل title.php: کدهای مربوط به نمایش نام محصول
  • فایل up-sells.php: شامل کدهای محصولاتی که ممکن است بپسندید

برای مطالعه بیشتر

مطالب مرتبط