آموزش طراحی قالب ووکامرس

9 آبان 1396

5,743 بازدید

36 نظر

ووکامرس محبوب ترین افزونه فروشگاهی در وردپرس است که به سرعت در حال توسعه میباشد و هر روز امکانات و قالب های بینظیری برای آن طراحی میشود، در این مطلب قصد داریم طراحی قالب ووکامرس را به طور کامل و اصولی به شما توضیح دهیم، اما مطالعه این آموزش نیازمند 3 پیش نیاز زیر است:

1- روی سایت ( یا لوکال هاست ) خود وردپرس و افزونه ووکامرس را نصب داشته باشید

2- داشتن آشنایی با HTML , CSS و اصول طراحی قالب وردپرس

3- آشنایی با ابزار inspect element مرورگرهای فایرفاکس یا گوگل کروم

در اکثر موارد قالب های وردپرس به راحتی با ووکامرس هماهنگ میشوند زیرا ساختار یکی است.

برای شروع کار یک قالب وردپرس را که با ووکامرس هماهنگ نیست به دلخواه انتخاب کنید و روی سایت یا لوکال هاست خود نصب کنید

بعد از فعال کردن قالب اگر در بالای پیشخوان با عبارت “پوسته شما توسط پشتیبانی ووکامرس شناسایی نمیشود – اگر با مشکل ناسازگاری طرح مواجه شدید، راهنمای یکپارچگی را مطالعه کنید یا یکی از پوسته های ووکامرس را انتخاب کنید.” مواجه شدید کد زیر را به انتهای فایل functions.php پوسته خود اضافه کنید تا قالب شما با ووکامرس هماهنگ شود

add_action( 'after_setup_theme', 'woocommerce_support' );

function woocommerce_support() {

    add_theme_support( 'woocommerce' );

}

add_action( 'after_setup_theme', 'woocommerce_support' );

function woocommerce_support() {

add_theme_support( 'woocommerce' );

}

با قرار دادن کد بالا میتوانید خطای ذکر شده را از بین ببرید، این اولین قدم در طراحی قالب ووکامرس میباشد

همانطور که میدانید بعد از نصب ووکامرس صفحات زیر به سایت شما اضافه میشوند:

برگه تسویه حساب (checkout)
برگه سبد خرید (cart)
برگه حساب کاربری (my-account)
برگه فروشگاه (shop)
صفحه داخلی محصولات
صفحه آرشیو محصولات (دسته بندی ها و تگ ها)

نکته مهم: ووکامرس به طور پیشفرض در صفحات محصولات بخش هایی مثل نظرات کاربران، گالری محصولات، تصاویر، توضیحات محصول ، ویژگی های محصول و … را نمایش میدهد و نیازی به باز طراحی نیست، در تمام صفحات نیز به همینگونه است، تنها کافیست پوسته سایت شما با ووکامرس ست شود

اگر پوسته سایت شما فایل page.php را داشته باشد نیازی نیست برای برگه های تسویه حساب، سبد خرید و حساب کاربری طراحی خاصی انجام دهید زیرا با ظاهر page.php پوسته سایت نمایش داده میشوند و اگر آن را در مرورگر خود باز کنید مشاهده خواهید کرد که بدون مشکل و به هم ریختگی نمایش داده خواهند شد.

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

برای حل این مشکل ابتدا فایل header.php قالب خود را در یک ویرایشگر حرفه ای مثل Notepad++ باز کنید و به دنبال تگ <body> بگردید و آن را پاک کنید و به جای آن کد زیر را قرار دهید

<body <?php body_class(); ?>>

1	<body <?php body_class(); ?>>

انجام این کار بسیار مهم است زیرا کلاس های مخصوص ووکامرس لود خواهند شد

سپس از فایل page.php پوسته خود یک کپی بگیرید و نام آن را برابر woocommerce.php قرار دهید.

اکنون فایل woocommerce.php را در ویرایشگر متن (مثل notpead++) باز کنید و حلقه وردپرس و تمام کدهای درون آن را حذف کنید، مانند زیر:

<?php if ( have_posts() ) : ?>
  <?php while ( have_posts() ) : the_post(); ?>

سایر کدهای درون حلقه

 <?php endwhile; ?>
<?php endif; ?>

<?php if ( have_posts() ) : ?>

<?php while ( have_posts() ) : the_post(); ?>

سایر کدهای درون حلقه

<?php endwhile; ?>

<?php endif; ?>

بخش بالا را تماما از فایل woocommerce.php پاک کنید و به جای آن کد زیر را قرار دهید:

پیشنهاد میکنیم بخوانید: نمایش پربازدید ترین محصولات در ووکامرس

  <?php if ( have_posts() ) : ?>

  <?php @woocommerce_content(); ?>

    <?php endif; ?>

<?php if ( have_posts() ) : ?>

<?php @woocommerce_content(); ?>

<?php endif; ?>

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

اما محتوای فروشگاه استایل خاصی ندارند و راست چین هم نیستند، برای حل این مورد باید با ابزار inspect element مانند عکس زیر قسمت های مختلف که نیاز به تغییر دارند را انتخاب کنید تا کلاس و کدهای Css آنها پیدا شود و سپس در انتهای فایل style.css قالب خود استایل دهی کنید و ویرایش های لازمه را برای تغییر ظاهر فروشگاه انجام دهید

ابزار inspect element در طراحی قالب ووکامرس میتواند کمک شایانی به شما کند

آموزش طراحی قالب ووکامرس

برای راست چین کردن باید کلاس هایی را که text-align آن ها left است برابر با right و کلاس هایی را که Direction آن ها برابر با ltr است برابر با rtl قرار دهید

همچنین به margin ها و padding ها نیز توجه داشته باشید

در زیر یک قطعه کد آماده css برای شما قرار دادیم که میتوانید آن را در انتهای فایل Style.css خود قرار دهید و هم ظاهر را بهبود ببخشید و هم آن را راست چین کنید

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{float:right;}
.woocommerce #reviews #comments ol.commentlist li .comment-text{margin:0 50px 0 0px;}
.posted_in,.tagged_as{display:block;}
.woocommerce #reviews #comments ol.commentlist li img.avatar{float:right;right:0;}
.button{font-family:IRANSans,Tahoma !important;font-weight:500 !important;font-size:14px !important;border-radius:3px !important;text-align:center !important;color:white !important;border-radius:3px !important;background:linear-gradient(#524781,#443a6f) !important;}
#add_payment_method #payment ul.payment_methods li, .woocommerce-cart #payment ul.payment_methods li, .woocommerce-checkout #payment ul.payment_methods li{text-align:right !important;}
.woocommerce table.shop_table{text-align:right;}
.woocommerce .woocommerce-breadcrumb{font-size:12px !important;margin:0 !important;}
.woocommerce-MyAccount-navigation{margin-bottom:15px}
.woocommerce-MyAccount-navigation ul li{float:right;margin-left:10px;list-style:none !important}
.woocommerce-MyAccount-navigation{float:none !important;width:100% !important;background:whitesmoke;overflow:hidden;border-radius:3px;text-align:center}
.woocommerce-MyAccount-navigation ul li a{display:inline-block;padding:10px 15px;background:whitesmoke}
.woocommerce-account .woocommerce-MyAccount-content{float:none;width:100%}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .comment-form-comment textarea, .comment-form-author input, .comment-form-email input{padding:7px;box-sizing:border-box;width:100%;border-radius:3px;border:1px solid #e1e1e1;font-family:IRANSans,tahoma !important;}
.woocommerce form .form-row{box-sizing:border-box;}
.woocommerce form .form-row .required{text-decoration:none !important;position:relative;top:3px;}
#coupon_code{padding:8px;border-radius:3px;position:relative;top:2px;}
.woocommerce-message a.button{margin-left:15px;}
.woocommerce ul.products li.product h3{line-height:30px;overflow:hidden;min-height:60px;}
.woocommerce ul.products li.product .price{line-height:30px;margin-bottom:0;}
.orderby{background:whitesmoke;border:none;font-family:IRANSans,tahoma !important;border-radius:3px;padding:5px;}
.tps-product .products{padding-top:0 !important;}
.entry-summary .price del{margin-left:10px;display:inline-block;}
.product_title.entry-title{margin-bottom:10px;color:#130a33;}
.entry-summary .price{margin-bottom:10px;}
.woocommerce div.product form.cart .button{vertical-align:middle;float:right;}
.woocommerce div.product form.cart div.quantity{float:right;margin:0 4px 0 0;}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .comment-form-comment textarea, .comment-form-author input, .comment-form-email input{max-width:100%;}
.woocommerce .quantity .qty{border:none;background:whitesmoke;padding:4px 5px;border-radius:3px;margin-left:10px;}
.woocommerce-loop-product__title,.products .price{text-align:center;}
.woocommerce ul.products li.product .button{display:block;}
.woocommerce ul.products li.product .star-rating{display:none;}
.woocommerce div.product form.cart .button{vertical-align:middle;float:right;position:relative;top:2px;}
.woocommerce-result-count{padding:5px 0;}
.related h2{font-weight:500;padding:10px 0;color:#130a33;}
.woocommerce .products ul, .woocommerce ul.products{border-top:1px solid #eeeeee;padding-top:22px !important;}

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{float:right;}

.woocommerce #reviews #comments ol.commentlist li .comment-text{margin: 50px 0px;}

.posted_in,.tagged_as{display:block;}

.woocommerce #reviews #comments ol.commentlist li img.avatar{float:right;right:;}

.button{font-family:IRANSans,Tahoma !important;font-weight:500 !important;font-size:14px !important;border-radius:3px !important;text-align:center !important;color:white !important;border-radius:3px !important;background:linear-gradient(#524781,#443a6f) !important;}

#add_payment_method #payment ul.payment_methods li, .woocommerce-cart #payment ul.payment_methods li, .woocommerce-checkout #payment ul.payment_methods li{text-align:right !important;}

.woocommerce table.shop_table{text-align:right;}

.woocommerce .woocommerce-breadcrumb{font-size:12px !important;margin: !important;}

.woocommerce-MyAccount-navigation{margin-bottom:15px}

.woocommerce-MyAccount-navigation ul li{float:right;margin-left:10px;list-style:none !important}

.woocommerce-MyAccount-navigation{float:none !important;width:100% !important;background:whitesmoke;overflow:hidden;border-radius:3px;text-align:center}

.woocommerce-MyAccount-navigation ul li a{display:inline-block;padding:10px 15px;background:whitesmoke}

.woocommerce-account .woocommerce-MyAccount-content{float:none;width:100%}

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .comment-form-comment textarea, .comment-form-author input, .comment-form-email input{padding:7px;box-sizing:border-box;width:100%;border-radius:3px;border:1px solid #e1e1e1;font-family:IRANSans,tahoma !important;}

.woocommerce form .form-row{box-sizing:border-box;}

.woocommerce form .form-row .required{text-decoration:none !important;position:relative;top:3px;}

#coupon_code{padding:8px;border-radius:3px;position:relative;top:2px;}

.woocommerce-message a.button{margin-left:15px;}

.woocommerce ul.products li.product h3{line-height:30px;overflow:hidden;min-height:60px;}

.woocommerce ul.products li.product .price{line-height:30px;margin-bottom:;}

.orderby{background:whitesmoke;border:none;font-family:IRANSans,tahoma !important;border-radius:3px;padding:5px;}

.tps-product .products{padding-top: !important;}

.entry-summary .price del{margin-left:10px;display:inline-block;}

.product_title.entry-title{margin-bottom:10px;color:#130a33;}

.entry-summary .price{margin-bottom:10px;}

.woocommerce div.product form.cart .button{vertical-align:middle;float:right;}

.woocommerce div.product form.cart div.quantity{float:right;margin: 4px ;}

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .comment-form-comment textarea, .comment-form-author input, .comment-form-email input{max-width:100%;}

.woocommerce .quantity .qty{border:none;background:whitesmoke;padding:4px 5px;border-radius:3px;margin-left:10px;}

.woocommerce-loop-product__title,.products .price{text-align:center;}

.woocommerce ul.products li.product .button{display:block;}

.woocommerce ul.products li.product .star-rating{display:none;}

.woocommerce div.product form.cart .button{vertical-align:middle;float:right;position:relative;top:2px;}

.woocommerce-result-count{padding:5px ;}

.related h2{font-weight:500;padding:10px ;color:#130a33;}

.woocommerce .products ul, .woocommerce ul.products{border-top:1px solid #eeeeee;padding-top:22px !important;}

با کد css بالا علاوه بر راستچین شدن و ظاهر گرفتن دکمه ها و صفحه محصولات , صفحات حساب کاربری و سبد خرید و همچنین فرم های درون آن ها نیز استایل خاصی خواهند گرفت

پیشنهاد میکنیم بخوانید: آموزش تنظیمات پیکربندی ووکامرس

اگر با کد های Css آشنایی خوبی داشته باشید طراحی قالب ووکامرس برای شما بسیار راحت خواهد بود

مشکل کار نکردن کدهای جی کوئری در ووکامرس

اگر با مشکل کار نکردن کدهای جی کوئری و ایجکس در ووکامرس برخورد کرده اید ( مانند کار نکردن دکمه افزودن به سبد خرید یا حذف محصولات از سبد خرید که به صورت ajax هستند ) بدانید که ووکامرس اصولا از کتابخانه jquery موجود در خود وردپرس استفاده میکند، پس یا این کتابخانه غیر فعال شده است که باید آن را فعال کنید ( در فایل functions.php بررسی کنید ) و یا در پوسته شما و در بخش head یک کتابخانه جی کوئری دیگر فرخوانی شده که باعث ایجاد تداخل شده است و باید آن را حذف کنید

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

چگونه میتوانم سبد خرید سفارشی در ووکامرس ایجاد کنیم ؟

آموزش طراحی قالب ووکامرس

برای ایجاد سبد خرید سفارشی میتوانید از کد و توابع زیر استفاده کنید

         <div class="box-carts">

                        <?php if ( WC()->cart->get_cart_contents_count() == 0 ): ?>
                            <span>سبد خرید خالی است</span>

                        <?php else: ?>
                            <span><?php echo sprintf ( _n( '%d', '%d', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?> محصول در سبد خرید</span>

                        <?php endif; ?>
                        <a href="<?php echo wc_get_cart_url(); ?>">مشاهده سبد خرید</a>
                    </div>
                </div>

<?php if ( WC()->cart->get_cart_contents_count() == ): ?>

<?php else: ?>

<span><?php echo sprintf ( _n( '%d', '%d', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?> محصول در سبد خرید</span>

<?php endif; ?>

<a href="<?php echo wc_get_cart_url(); ?>">مشاهده سبد خرید</a>

</div>

فقط باید آن را استایل دهی کنید و زیبایی خاصی با کدهای css به آن ببخشید

پیشنهاد میکنیم بخوانید: نمایش محصولات مرتبط در ووکامرس

در کد بالا اگر محصولی در سبد خرید شما نباشد عبارت سبد خرید خالی است چاپ میشود و اگر سبد خرید دارای یک محصول یا بیشتر باشد تعداد آن ها نمایش داده خواهند شد

همجنین با کلیک روی مشاهده سبد خرید کاربر به این صفحه منتقل خواهد شد

تنظیم جستجوی سایت روی محصولات

جستجو در وردپرس به طور پیشفرض روی برگه ها و نوشته ها انجام میشود

اگر از ووکامرس استفاده میکنید محصولات شما در نتایج جستجو یافت نخواهند شد، اما جای نگرانی نیست زیرا با قرار دادن کد زیر در انتهای فایل functions.php جستجو هم در بین نوشته ها و هم بین محصولات انجام خواهد شد

function SearchFilter($query) {
    if ($query->is_search) {
        $query->set('post_type', array( 'post', 'product' ));
    }
    return $query;
}
add_filter('pre_get_posts','SearchFilter');

function SearchFilter($query) {

if ($query->is_search) {

$query->set('post_type', array( 'post', 'product' ));

}

return $query;

}

add_filter('pre_get_posts','SearchFilter');

فعال کردن قابلیت زوم، اسلایدر و لایت باکس محصولات

همانطور که در بالاتر نیز گفته شد ووکامرس به طور پیشفرض تمام امکانات زوم، اسلایدر و هچنین لایت باکس را در خود دارد و تنها کافیست با قرار دادن کد زیر در انتها یا ابتدای فایل functions.php پوسته خود آن را فعال کنید

add_theme_support( 'wc-product-gallery-zoom' );
add_theme_support( 'wc-product-gallery-lightbox' );
add_theme_support( 'wc-product-gallery-slider' );

add_theme_support( 'wc-product-gallery-zoom' );

add_theme_support( 'wc-product-gallery-lightbox' );

add_theme_support( 'wc-product-gallery-slider' );

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

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

add_filter( 'loop_shop_per_page', 'new_loop_shop_per_page', 20 );

function new_loop_shop_per_page( $cols ) {
  $cols = 12;
  return $cols;
}

add_filter( 'loop_shop_per_page', 'new_loop_shop_per_page', 20 );

function new_loop_shop_per_page( $cols ) {

$cols = 12;

return $cols;

}

توجه کنید که در کد بالا باید به جای عدد 12 میتوانید عدد دلخواه خودتونو قرار بدید و این عداد تعداد نمایش محصولات میباشد

توابع مهم در طراحی قالب ووکامرس

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

کد نمایش بردکرامب اختصاصی ووکامرس:

<?php woocommerce_breadcrumb(); ?>

1	<?php woocommerce_breadcrumb(); ?>

لینک صفحه سبد خرید:

<?php echo wc_get_cart_url(); ?>

1	<?php echo wc_get_cart_url(); ?>

لینک صفحه حساب کاربری:

<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>

1	<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>

نمایش قیمت محصول ( استفاده درون حلقه ):

<?php woocommerce_template_loop_price() ?>

1	<?php woocommerce_template_loop_price() ?>

چک کردن وضعیت موجود در انبار ( استفاده درون حلقه ):

<?php     if ( $product->is_in_stock() ) { ?>

echo 'در انبار موجود است';

<?php }else{ ?>

echo 'موجود نیست';

<?php } ?>

<?php if ( $product->is_in_stock() ) { ?>

echo 'در انبار موجود است';

<?php }else{ ?>

echo 'موجود نیست';

<?php } ?>

نمایش عنوان محصول ( استفاده درون حلقه ):

<?php the_title(); ?>

1	<?php the_title(); ?>

دکمه افزودن به سبد خرید ( استفاده درون حلقه ):

<?php woocommerce_template_loop_add_to_cart(); ?>

1	<?php woocommerce_template_loop_add_to_cart(); ?>

نمایش تصویر شاخص محصول ( استفاده درون حلقه ):

<?php woocommerce_template_loop_product_thumbnail() ?>

1	<?php woocommerce_template_loop_product_thumbnail() ?>

نمایش گالری تصاویر محصول ( استفاده درون حلقه ):

<?php do_action( 'woocommerce_product_thumbnails' ); ?>

1	<?php do_action( 'woocommerce_product_thumbnails' ); ?>

نمایش دسته بندی محصول ( استفاده درون حلقه ):

<?php the_terms($post->ID, 'product_cat' ); ?>

1	<?php the_terms($post->ID, 'product_cat' ); ?>

نمایش خلاصه توضیحات محصول ( استفاده درون حلقه ):

<?php the_excerpt(); ?>

1	<?php the_excerpt(); ?>

نمایش توضیحات کامل محصول ( استفاده درون حلقه ):

<?php the_content(); ?>

1	<?php the_content(); ?>

نمایش لیست ویژگی های محصول ( استفاده درون حلقه ):

<?php $product->list_attributes(); ?>

1	<?php $product->list_attributes(); ?>

نمایش شناسه محصول ( استفاده درون حلقه ):

<?php echo $product->get_sku(); ?>

1	<?php echo $product->get_sku(); ?>

موفق و سربلند باشید

آموزش طراحی قالب ووکامرس

4.8 (95%) 4 votes

پاسخ دهید

رضا در تاریخ پنج شنبه 14 آذر 1398 گفته است:

با سلام
قسمت مرتب سازی محصولات (بر اساس جدیدترین ، ارزان ترین و.. ) کار نمیکنه
و همینطور قسمت انتخاب شهر که باید پس از انتخاب استان شهر ها رو نشون بده
لطفا راهنمایی کنید با تشکر
- مدیر سایت در تاریخ جمعه 15 آذر 1398 گفته است:
  
  سلام
  از چه قالبی استفاده میکنید ؟
  مطمئن بشید که سایر پلاگین ها تداخلی ایجاد نکرده باشند
پاسخ دهید

محمد در تاریخ پنج شنبه 8 فروردین 1398 گفته است:

سلام
وقتی قالب را طراحی می کنیم صفحات تسویه حساب ، سبد خرید و حساب کاربری با page.php اجرا می شه چطور میشه با یک صفحه مخصوص با ظاهر متفاوت از صفحات دیگه باز بشه .
- مدیر سایت در تاریخ چهارشنبه 14 فروردین 1398 گفته است:
  
  سلام، فایل هایی جداگانه بسازید با این نام ها:
  page-cart.php
  page-my-account-.php
  page-checkout.php
  با این 3 فایل میتونید آن صفحات را اختصاصی طراحی کنید
  موفق باشید
پاسخ دهید

مرتضی کریمی در تاریخ دوشنبه 20 اسفند 1397 گفته است:

سلام
واقعا ممنون از آموزش خوبتون ، بهترین و روان ترین آموزش طراحی قالب ووکامرس بود که داخل اینترنت دیدم
برای من از این به بعد مانند یک داکیومنت خواهد بود و برای کپی پیست کردن کدهای کاربردی ای که قرار دادید مزاحمتون میشم 🙂
پاسخ دهید

کوروش عباسی در تاریخ جمعه 19 بهمن 1397 گفته است:

سلام تنظیماتی که گفتید انجام دادم همه چیز خوب پیش رفت تا دکمه پرداخت رو که میزنم بر میگرده به صفحه پرداخت و وارد صفحه بعدی درگاه بانک نمیشه
- مدیر سایت در تاریخ شنبه 20 بهمن 1397 گفته است:
  
  سلام
  پرداخت آنلاین رو فعال کردید از پیکربندی ووکامرس ؟ یک افزونه درگاه پرداخت ووکامرس مثل زرین پال باید نصب کنید
پاسخ دهید

ابراهیم در تاریخ شنبه 31 شهریور 1397 گفته است:

با سلام
میشه تابعی معرفی کنید که قیمت تخفیف رو جداگانه و قیمت اصلی رو جداگانه در کلاس جداگانه بتونم نمایش بدم؟
- مدیر سایت در تاریخ شنبه 31 شهریور 1397 گفته است:
  
  سلام
  قیمت ها با دو زمینه دلخواه _price و _sale_price وجود دارن
  اونارو با get_post_meta دریافت کنید و از هم کنید تا مقدار اصلی تخفیف رو بدست بیارید
  موفق باشید
پاسخ دهید

سامان در تاریخ پنج شنبه 28 تیر 1397 گفته است:

سلام
یک مشکلی هست
وقتی فایل woocommerce.php رو میسازیم و بهش استایل میدیم صفحه فروشگاه اوکی میشه اما صفحات داخلی محصولات به هم میریزه و همون استایل فروشگاه رو میگیره !
چطوری میتونیم یه استایل دیگه به این صفحه بدم؟
ناگفته نماند که یک فایل php به نام single-product دارم که تا قبل از ایجاد فایل woocommerce.php مشکلی در صفحات داخلی نداشتم.
- مدیر سایت در تاریخ پنج شنبه 28 تیر 1397 گفته است:
  
  سلام اقا سامان
  ببین خیلی از کلاس های ووکامرس تو صفحاتش یکسانه ، اینطور که وقتی یک کلاسو شما تغییر میدی ، تو همه صفحات هم تغییر میکنه
  برای حل این مشکل از کلاس های body تو هر صفحه استفاده کن ، هر صفجه یک کلاس مخصوص تو تگ body داره که از اونا قبل بردن کلاس ها تو css استفاده کن تا وقتی یه جارو تغییر میدی همه جا تغییر نکنه
  موفق باشی
- سامان در تاریخ پنج شنبه 28 تیر 1397 گفته است:
  
  مرسی از اینکه اینقدر زود جواب دادید
  متوجه منظورتون نشدم ببنید من اصلا body رو تغییر ندادم ، فقط فایل woocommerce.php رو ایجاد کردم استایل دادم بهش و شد یه فروشگاه
  حالا صفحه جزییات محصول که کلی کد زده بودیم به هم خورد.
- سامان در تاریخ پنج شنبه 28 تیر 1397 گفته است:
  
  آقا مهدی مشکل رو پیدا کردم بعد از قرار دادن فایل woocommerce.php دیگه فایل single-product.php رو نمیخونه اصلا
- مدیر سایت در تاریخ پنج شنبه 28 تیر 1397 گفته است:
  
  اون که بله چون اولویت با فایل woocommerce.php هست
  درون این فایل با توابعی مثل is_product میتونید باز صفحه محصولو شخصی کنید
- سامان در تاریخ جمعه 29 تیر 1397 گفته است:
  
  ببخشید حالا راهی است ، اینکه برای صفحه فروشگاه یک فایل php جدا بزنیم؟
  اسمش چی باشه اگه میشه زد
- مدیر سایت در تاریخ شنبه 30 تیر 1397 گفته است:
  
  داخل فایل woocommerce.php با توابع شرطی مثل is shop مشخص کنید فقط تو صفحات فروشگاه این صفحه لود بشه
  بعد با همون single-product.php میتونید صفحه محصولو بسازید و تداخلی هم ایجاد نمیشه
  موفق باشید
- سامان در تاریخ شنبه 30 تیر 1397 گفته است:
  
  میشه بیشتر راهنمایی کنید؟ من این قضیه رو نمیدونم
  شما لینک آموزشی برای اینکار دارید؟
- مدیر سایت در تاریخ یکشنبه 31 تیر 1397 گفته است:
  
  داکیومنت های داخل خود سایت ووکامرس رو مشاهده کنید ، اطلاعات کامل در مورد توابع ووکامرس و این قضیه وجود داره:
  docs.woocommerce.com
پاسخ دهید

ali در تاریخ جمعه 18 خرداد 1397 گفته است:

با سلام و خسته نباشین
یک سوال داشتم
صفحه page-checkout رو از woocommerce/checkout/form-checkout کپی کردم
ولی بازم کار نمیکنه
این ارور رو میده:

کوپن تخفیف دارید؟
Fatal error: Uncaught Error: Call to a member function is_registration_enabled() on null in C:\wamp64\www\wordpress\wp-content\themes\elishop\page-checkout.php:37 Stack trace: #0 C:\wamp64\www\wordpress\wp-includes\template-loader.php(74): include() #1 C:\wamp64\www\wordpress\wp-blog-header.php(19): require_once(‘C:\\wamp64\\www\\w…’) #2 C:\wamp64\www\wordpress\index.php(17): require(‘C:\\wamp64\\www\\w…’) #3 {main} thrown in C:\wamp64\www\wordpress\wp-content\themes\elishop\page-checkout.php on line 37
- مدیر سایت در تاریخ جمعه 18 خرداد 1397 گفته است:
  
  سلام
  خط 37 فایل page-checkout.php درون قالب رو بررسی کنید
  تابع is_registration_enabled مشکل ساز شده حالا یا تعریف نشده یا مقداری برگشت نمیده یا قدیمی هست و با نسخه های جدید ووکامرس و وردپرس هماهنگ نیست
  با احترام
پاسخ دهید

بهناز در تاریخ سه شنبه 25 اردیبهشت 1397 گفته است:

سلام
مرسی همیشه پیروز و پاینده باشید خیلی آموزشتون بدردم خورد.
- مدیر سایت در تاریخ سه شنبه 25 اردیبهشت 1397 گفته است:
  
  سلام
  خوشحالیم که تونستیم کمکتون کنیم
پاسخ دهید

dgisoft در تاریخ جمعه 21 اردیبهشت 1397 گفته است:

سلام
سپاس
پاسخ دهید

arman در تاریخ پنج شنبه 13 اردیبهشت 1397 گفته است:

با سلام
ممنون از مطالب خوبتون
یک سوال داشتم
یک قالب طراحی کردم
و میخواستم به ووکامرس وصل کنمش
میخواستم بدونم برای اینکار باید اول کدهای وردپرس رو بهش بزنم یا فقط وردپرس؟
یا برم با child theme تطبیق بدم؟
واقعا گیج شدم
گفتم ازتون راهنمایی بگیرم
ممنون
- مدیر سایت در تاریخ پنج شنبه 13 اردیبهشت 1397 گفته است:
  
  سلام آقا آرمان
  شما اول باید قالبتونو به وردپرس تبدیل کنید کامل و توابع وردپرس رو پیاده کنید بعد طبق آموزش بالا قالبو با ووکامرس نیز ست کنید
  موفق باشید
پاسخ دهید

مسلم شیر محمدی در تاریخ شنبه 11 فروردین 1397 گفته است:

سلام خیلی ممنون از اموزش خوبتون
ایا امکانش هست یه دوره حرفه ای طراحی قالب ووکامرس درون سایتتون قرار بدید ؟ با توجه به این اموزش و قالب هایی که طراحی کردید فکر میکنم اموزش خوبی بشه و خودم هم از مشتریان دوره خواهم بود ، در حد یک پیشنهاد بود ، متشکر از شما
- مدیر سایت در تاریخ شنبه 11 فروردین 1397 گفته است:
  
  سلام آقا مسلم
  حتما اینکارو انجام میدیم
  تو برنامه هست و به زودی دوره رو قرار میدیم
  موفق باشید
پاسخ دهید

مرتضی پیری در تاریخ شنبه 28 بهمن 1396 گفته است:

آموزش کاربردی بود تشکر
پاسخ دهید

Daniyal.K در تاریخ شنبه 30 دی 1396 گفته است:

با عرض سلام و خسته نباشید .
مطلب بسیار مفید و جامعی بود .
یک سوال .
چطور میتونم محصولات یک دسته بندی خاص رو با استفاده از آی دی اون دسته بندی نشون بدم ؟
خیلی سرچ کردم اما نتیجه ای پیدا نکردم !
ممنون میشم راهنمایی کنید .
با تشکر .
- مدیر سایت در تاریخ شنبه 30 دی 1396 گفته است:
  
  سلام آقا دانیال
  خوشحالم که این مطلب تونست کمکت کنه
  برای سوالتون هم داخل لینک زیر آموزش دادیم این مورد رو:
  http://topwp.ir/show-latest-products-specific-category-woocommerce/
  
  موفق باشید
پاسخ دهید

حسن در تاریخ پنج شنبه 30 آذر 1396 گفته است:

سلام ، کد گالری تصاویر محصول خیلی بد نشون میده باید چیکار کنم ؟ یا روش دیگه ای برای فراخوانی گالری محصول هست ؟
از افزونه ها هم استفاده کردم یا نشون نمیدن یا بد نشون میدن
- مدیر سایت در تاریخ پنج شنبه 30 آذر 1396 گفته است:
  
  سلام
  منظورتون از بد نشون دادن چی هست ؟
  میتونید با css تغییرات بدید به اون بخش و ظاهرش رو تغییر بدید
پاسخ دهید

پایتون در تاریخ دوشنبه 13 آذر 1396 گفته است:

سلام
واقعا عالی . ممنون از زحمتتون
میخواستم بدونم بقیه توابع مثل توضحیات محصول و توضحیات کوتاه و … هم مثل نوشته هاست ؟
- مدیر سایت در تاریخ دوشنبه 13 آذر 1396 گفته است:
  
  سلام
  خوشحالم که مورد توجهتون قرار گرفت
  بله دقیقا مثل نوشته هاس
پاسخ دهید

حسین در تاریخ پنج شنبه 2 آذر 1396 گفته است:

سلام خسته نباشی. میخواستم بپرسم 1-برای ست کردن پوسته با edd هم باید همین کد ووکامرس در فانکشنز گذاشته بشه یا فرق داره؟
2-میخواستم بدونم کد مطالب مرتبطی که شما استفاده کردین چیه و چطوری باید استفاده کرد ازش و آیا میشه در ووکامرس یا edd هم از این استفاده کرد؟
ممنون میشم جواب بدین.
- مدیر سایت در تاریخ جمعه 3 آذر 1396 گفته است:
  
  سلام
  برای edd متفاوت هست کاملا با ووکامرس، انشالا در روز های آینده آموزش اون رو هم داخل سایت قرار خواهیم داد
  کلمه مطالب مربتط رو داخل سایت جستجو کنید، دو نوع کد موجود هست که داخل سایت گذاشتیم
  موفق باشید