WooCommerce Builder

WooCommerce افزونه رایگانی برای مدیریت قابلیت فروشگاه سایت وردپرس شماست. محبوب‌ترین راه‌حل متن‌باز جهان برای ساخت و مدیریت فروشگاه اینترنتی است؛ به همین دلیل Bricks با آن یکپارچه شده است.

Bricks سازنده WooCommerce درون‌پوسته‌ای (WooCommerce Builder) معرفی کرده که با آن کل فروشگاه را بسازید — از صفحه اصلی فروشگاه، صفحه محصول تکی، آرشیو محصولات، سبد، تسویه‌حساب تا صفحات حساب کاربری.

برای طراحی این چیدمان‌ها، Bricks المان‌ها و انواع قالب مخصوص WooCommerce ارائه می‌دهد.

برخی المان‌ها فقط هنگام ویرایش نوع قالب مشخصی نمایش داده می‌شوند.

مثلاً المان Checkout customer details فقط هنگام ویرایش قالب WooCommerce Checkout در دسترس است.

شروع کار

برای دسترسی به WooCommerce Builder در Bricks، افزونه رایگان WooCommerce را از مخزن رسمی‌وردپرس یا از پیشخوان وردپرس در مسیر Plugins → Add New نصب و فعال کنید.

پس از فعال‌سازی، می‌توانید فروشگاه را با ویزارد پیکربندی درون سایت راه‌اندازی کنید یا به‌صورت دستی از منوهای تنظیمات WooCommerce انجام دهید.

توجه: در ویزارد پیکربندی نیازی به انتخاب پوسته جدید نیست — Bricks خود یک پوسته است و WooCommerce را به‌طور کامل پشتیبانی می‌کند.

پس از پیکربندی و افزودن چند محصول، می‌توانید چیدمان‌های WooCommerce را با Bricks به‌صورت بصری بسازید.

قالب‌های WooCommerce

با WooCommerce فعال، می‌توانید قالب‌های زیر را در Bricks به‌صورت بصری بسازید و استایل دهید:

نوع قالب	توضیح
Single product	صفحه محصول تکی.
Product archive	صفحات آرشیو مثل دسته‌بندی، برچسب و ویژگی محصول. نمایش را با Template Conditions تنظیم کنید.
Cart	سبد خرید (وقتی محصول دارد).
Empty cart	سبد خالی (وقتی محصولی ندارد).
Checkout	صفحه تسویه‌حساب؛ مشتری جزئیات صورتحساب و ارسال و روش پرداخت را وارد می‌کند.
Pay	صفحه پرداخت؛ مشتری جزئیات پرداخت را وارد می‌کند.
Thank you	پس از تکمیل موفق تسویه‌حساب نمایش داده می‌شود.
Order receipt	هنگام مشاهده رسید سفارش.
Account login	صفحه My Account وقتی کاربر وارد نشده.
Account lost password	صفحه بازیابی رمز My Account.
Account lost password (confirmation)	پس از ارسال فرم بازیابی رمز.
Account reset password	پس از کلیک روی لینک ایمیل بازیابی رمز.
Account dashboard	My Account وقتی کاربر وارد شده.
Account orders	تب «Orders» در My Account.
Account view order	مشاهده سفارش تکی.
Account downloads	تب «Downloads» در My Account.
Account addresses	تب «Addresses» در My Account.
Account edit address	ویرایش آدرس صورتحساب یا ارسال در My Account.
Account edit account	ویرایش جزئیات حساب در My Account.

سازنده My Account

از Bricks 1.9 می‌توانید صفحه Account را هم به‌صورت بصری طراحی کنید — از جمله ورود/ثبت‌نام و صفحات بازیابی و بازنشانی رمز.

جزئیات بیشتر در مقاله اختصاصی WooCommerce Account Builder.

صفحه Shop

صفحه Shop صفحه ویژه WooCommerce است که به‌عنوان آرشیو محصولات تعریف می‌شود.

برای چیدمان اختصاصی Shop، می‌توانید مستقیماً صفحه Shop را با Bricks ویرایش کنید.

یا در قالب WooCommerce - Product Archive شرط قالب اضافه کنید تا برای صفحه Shop هم اعمال شود. چون Shop آرشیو نوع پست product است، آن را این‌طور تنظیم کنید:

المان‌های WooCommerce

Bricks انعطاف‌پذیرترین رویکرد را برای طراحی بصری قالب‌های WooCommerce ارائه می‌دهد، بدون از دست دادن قابلیت‌ها و هوک‌هایی که افزونه‌های شخص ثالث WooCommerce به آن وابسته‌اند.

علاوه بر المان‌های عمومی WooCommerce و Products، Bricks المان‌های ویژه برای انواع قالب مشخص مثل سبد و تسویه‌حساب دارد.

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

برخی از این المان‌ها:

• Add to cart
• Product title
• Product gallery
• Product price
• Product stock
• Product meta
• Product rating
• Product reviews
• Product content
• Product short description
• Product additional information
• Product tabs
• Product up/cross-sells
• Related products

داده پویا

یکپارچه‌سازی WooCommerce برچسب‌های داده پویا (Dynamic Data) جدیدی برای محصول و ویژگی‌های سفارش (order properties) اضافه می‌کند.

{woo_product_price} — قیمت کامل محصول با واحد پول و HTML

{woo_product_regular_price} — قیمت عادی محصول با واحد پول و HTML

{woo_product_sale_price} — قیمت حراج با واحد پول و HTML. اگر قیمت حراج تنظیم نشده باشد، رشته خالی برمی‌گردد.

{woo_product_regular_price:plain} — قیمت عادی با واحد پول بدون HTML

{woo_product_regular_price:value} — قیمت عادی به‌صورت رشته ساده (مثلاً 65.3، 2.5، 5)

{woo_product_cat_image} — تصویر دسته‌بندی محصول را رندر می‌کند

{woo_product_images} — تصویر شاخص و گالری محصول را رندر می‌کند. روی Carousel و Image gallery قابل استفاده است. فیلتر :value شناسه‌های گالری را با کاما جدا می‌کند. (@since 1.11)

{woo_product_gallery_images} — فقط تصاویر گالری (بدون تصویر شاخص). روی Carousel و Image gallery. فیلتر :value برای شناسه‌ها. (@since 1.11)

{woo_add_to_cart} — دکمه افزودن به سبد

{woo_product_on_sale} — نشان حراج اگر محصول در حراج باشد

{woo_product_rating} — امتیاز محصول

{woo_product_rating:plain} — امتیاز به‌صورت متن. مثال: Rated 5.00 out of 5

{woo_product_rating:format} — امتیاز حتی اگر هنوز امتیازی ثبت نشده

{woo_product_sku} — SKU محصول

{woo_product_excerpt} — توضیح کوتاه محصول

{woo_product_stock} — موجودی محصول (فیلتر value تعداد موجودی را خروجی می‌دهد)

{woo_product_stock_status} — instock، outofstock یا onbackorder (برای Element Conditions)

{woo_product_badge_new} — span «New» با کلاس .badge.new اگر شرط برقرار باشد. (@since 1.11.1) (Bricks Settings > WooCommerce > Products.)

{woo_product_badge_new:plain} — فقط متن «New». (@since 1.11.1) (Bricks Settings > WooCommerce > Products.)

برچسب‌های پویا پایه هم قابل استفاده‌اند:

{post_id} — شناسه محصول

{post_title:link} — عنوان محصول با لینک

{post_terms_product_cat} — دسته‌بندی‌های محصول با لینک

{post_terms_product_cat:plain} — دسته‌بندی‌ها بدون لینک

تنظیمات Bricks: WooCommerce

تب اختصاصی یکپارچه‌سازی WooCommerce را در پیشخوان وردپرس در مسیر «Bricks > Settings > WooCommerce» پیدا می‌کنید.

• Disable WooCommerce Builder — یکپارچه‌سازی WooCommerce در Bricks را غیرفعال می‌کند.
• Product Badge "Sale" — بین عدم نمایش نشان حراج، نشان «Sale» یا درصد تخفیف انتخاب کنید.
• Product Badge "New" — نشان «New» اگر محصول کمتر از تعداد روز تنظیم‌شده منتشر شده باشد.
• Disable Product Gallery Zoom/Lightbox — اسکریپت زوم یا لایت‌باکس گالری محصول را غیرفعال می‌کند.

• AJAX add to cart Error action — هنگام خطا در AJAX add to cart، «Redirect to product page» یا «Show notice» را انتخاب کنید. (@since 1.11)

سبک‌های تم

وقتی WooCommerce فعال است، این گروه‌های کنترل در پنل Theme Styles ظاهر می‌شوند:

• WooCommerce - Button
• WooCommerce - Notice

حلقه Query محصولات WooCommerce

با چک‌باکس‌های بخش WooCommerce محصولات را به‌راحتی بازیابی کنید. نوع پست «Products» را انتخاب کنید؛ در غیر این صورت بخش WooCommerce مخفی می‌ماند. (@since 1.10)

مثال‌های بیشتر در این مقاله.