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

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

فهرست مطالب

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

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

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

/**
 * Add a custom button in WooCommerce product pages
 */
function alvandwp_demo_button_cart() {
	$product      = wc_get_product( get_the_id() );
		$url_demo = $product->get_attribute( 'url_demo' );
	if ( '' !== $url_demo ) {
		echo '<a class="wp-element-button" style="background-color:brown;display:inline-block;margin-top:16px;" href="' . esc_url( $url_demo ) . '">مشاهده پیش‌نمایش</a>';
	}
}
add_action( 'woocommerce_after_add_to_cart_button', 'alvandwp_demo_button_cart', 20 );

/**
 * Add a custom button in WooCommerce shop pages
 */
function alvandwp_demo_button_shop() {
	$product      = wc_get_product( get_the_id() );
		$url_demo = $product->get_attribute( 'url_demo' );
	if ( '' !== $url_demo ) {
		echo '<div class="wp-block-button wc-block-components-product-button"><a class="wp-block-button__link has-small-font-size" style="background-color:brown;border-radius:0;" href="' . esc_url( $url_demo ) . '">مشاهده پیش‌نمایش</a></div>';
	}
}
add_action( 'woocommerce_after_shop_loop_item', 'alvandwp_demo_button_shop', 20 );

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

به قسمت پیشخوان وردپرس > محصولات > همه محصولات بروید و محصولی که می‌خواهید یک دکمه سفارشی به آن اضافه کنید را انتخاب و روی ویرایش کلیک کنید. به عنوان مثال، من می‌خواهم یک دکمه پیش‌نمایش محصول را به یک قالب وردپرسی اضافه کنم. شما می‌توانید این مثال را متناسب با مورد خاص خود تغییر دهید.

به پایین صفحه بروید تا به بخش اطلاعات محصول برسید و روی تب ویژگی‌ها کلیک کنید. روی افزودن جدید کلیک کرده و برای فیلد نام، url_demo و برای فیلد مقدار(ها)، لینک نسخه نمایشی محصول را وارد کنید. تیک گزینه نمایش در برگه محصول را بردارید و روی ذخیره ویژگی‌ها کلیک کنید.

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

سفارشی‌سازی دکمه جدید ووکامرس برای قالب مورد استفاده شما

برای مطابقت این دکمه با قالب وب‌سایت شما، نیاز به سفارشی‌سازی کدها است. من این دکمه را برای قالب دو هزار و بیست و پنج که آخرین قالب پیش‌فرض وردپرس تا این لحظه است، سفارشی کردم. البته کمی خود قالب را هم در ویرایشگر سایت تغییر دادم تا از کدنویسی زیاد اجتناب کنم. مثلا در قالب تک محصول، بلوک Add to Cart + Options (Beta) را فعال کردم و تعداد محصول و دکمه افزودن به سبد خرید را زیر هم قرار دادم. در قالب کاتالوگ محصول هم، حاشیه زیر دکمه افزودن به سبد خرید را حذف کردم. در ادامه، به برخی از سفارشی‌سازی‌های ممکن در کدها می‌پردازم.

قسمت اول کد که از:

/**
 * Add a custom button in WooCommerce product pages
 */

شروع می‌شود، مربوط به دکمه سفارشی در صفحه محصول است.

قسمت دوم کد که از:

/**
 * Add a custom button in WooCommerce shop pages
 */

شروع می‌شود تا انتها، مربوط به دکمه سفارشی در صفحات فروشگاه است.

به طور مثال، اگر فقط در صفحه محصول به دکمه سفارشی نیاز دارید، بخش دوم کد را می‌توانید حذف کنید.

حالا می‌دانید کدام قسمت کد برای کجاست. در ادامه به مقداری دانش توسعه وب مانند HTML و CSS نیاز دارید تا دکمه را سفارشی کنید.

کد زیر از بخش اول کدهای بالا آمده است که می‌توانید آن را با توجه به قالب فعلی خود، ویرایش کنید.

echo '<a class="wp-element-button" style="background-color:brown;display:inline-block;margin-top:16px;" href="' . esc_url( $url_demo ) . '">مشاهده پیش‌نمایش</a>';

شما می‌توانید کلاس CSS سفارشی دکمه‌های قالب خود را بعد از این کلاس با یک فاصله بین آنها اضافه کنید: wp-element-button که کلاس پیش‌فرض وردپرس برای دکمه‌ها هستند.

شاید شما هم بخواهید از استایل‌های CSS درون‌خطی استفاده کنید. در این صورت، می‌توانید کد خود را در ادامه کد background-color:brown;display:inline-block;margin-top:16px; بنویسید. این کدهای CSS را من اضافه کردم تا به دکمه رنگ متفاوتی اعمال کنم و ترازبندی و ظاهر آن را در قالب وردپرس دو هزار و بیست و پنج اصلاح کنم.

متن دکمه که در کد بالا مشاهده پیش‌نمایش است را می‌توانید به هر متنی که ترجیح می‌دهید تغییر دهید.

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

نتیجه‌گیری

همین. امیدوارم به شما در اضافه کردن یک دکمه سفارشی به ووکامرس کمک کرده باشم.