চলেন WooCommerce এর single-product page কাস্টমাইজেশন করি

সম্প্রতি আমার এক ক্লায়েন্টের চাহিদা ছিল এরকম একটা পেইজ ডিজাইন করে দেয়া। যেখানে গিফট আইটেম যুক্ত করা যাবে। সাথে সাথে ডেলিভারি টাইম, ডেট ও গিফট কার্ড মেসেজ এর জন্য ৩টা ইনপুট ফিল্ড থাকবে।

উপরে দেখানো ছবিটা শপিফাই দিয়ে করা। কিন্তু আমরা করবো woocommerce এ। এরকম কোন প্লাগিন খুঁজে পাওয়া যেতেই পারে কিন্তু সেটা যদি প্রিমিয়াম হয় তাহলে কমপক্ষে ৩০/৪০ ডলার খরচ করতে হবে যেটা নতুনদের জন্য কষ্টকর/ব্যায়বহুল।

সুতরাং চলেন আমরা কাস্টম কোড করে কাজটা সেরে ফেলি।

১ম কাজটা আমরা WordPress এর লুপ দিয়ে দিয়ে Custom Query করে নিয়ে নিয়ে আসতে পারি। সেখানে ড্যাশবোর্ড থেকে গিফট আইটেম নির্ধারন করার জন্য ইউজারকে ACF(Advanced Custom Fields) এর সাহায্যে একটা চেকবক্স দিতে পারি।
[ACF একটি চমৎকার ফ্রি ওয়ার্ডপ্রেস প্লাগিন]

এখানে একটা বিষয় লক্ষনীয় যে, আপনি এই কোডগুলো একটি প্লাগিন করে রাখতে পারেন অথবা theme এর functions.php তে রাখতে পারেন।

সেজন্য আমাদেরকে কাস্টম পোস্ট টাইপে Argument এ ৩টা বিষয় ফোকাস করতে হবে।
১ম: ‘post_type’ => ‘product’

উকমার্স “product” Term টি ব্যবহার করে থাকে তাদের প্রডাক্ট দেখানোর জন্য। সুতরাং CPT(Custom Post Type) এ এই টার্মটি ব্যবহার করলেই প্রডাক্ট পাবো।
২য়: ‘meta_key’ => ‘is_gift’,

এটা ACF(Advanced Custom Fields) থেকে আমরা নির্ধারন করে দেবো। নীচের ছবিতে:

এখানে ১ম লাল মার্ক চিহ্নিত টার্মটি ধরেই গিফট আইটেম প্রডাক্টগুলো নিয়ে আসবো, এবং সেটা WordPress এ ‘meta_key’ তে ব্যবহার করবো। এবং পোস্ট টাইপ অবশ্যই প্রডাক্ট হবে যেমনটা প্রথমে বললাম। আর পজিশন আপনি যেটাই পছন্দ করেন।

৩য়: এই ধাপে ACF থেকে ফিল্ড টাইপ true/false নেবো, যার জন্য আমরা ১ অথবা ০ ভ্যালু পাবো। এবং এটাকেই WordPress এর ‘meta_value’ তে ব্যবহার করবো। নীচের ছবিতে:

টোটাল কোড:

add_action(‘woocommerce_single_product_summary’, ‘add_some_product_here’);
function add_some_product_here()
{ ?>
<ul class=”products”>
<?php
$args = array(
‘post_type’ => ‘product’,
‘posts_per_page’ => 4, // -1 will get all the product. Specify positive integer value to get the number given number of product
‘post_status’ => ‘publish’,
‘meta_key’ => ‘is_gift’,
‘meta_value’ => 1,
);
$the_query = new WP_Query($args);
if ($the_query->have_posts()) {
while ($the_query->have_posts()) : $the_query->the_post();
// Get default product template
wc_get_template_part(‘content’, ‘product’);
global $product;
endwhile;
} else {
echo __(‘No products found’);
}
wp_reset_postdata();
?>
</ul>
<?php
}

এটা করলেই আমরা গিফট আইটেমের জন্য যেকোন প্রডাক্ট নির্ধারন করতে সক্ষম হবো।

এরপরে নীচের অংশটি করি চলেন।

নীচের অংশে ডেট এর জন্য আমরা জেক্যুয়েরির একটা জনপ্রিয় প্লাগিন ব্যবহার করবো। এখানে আমি দ্রততার জন্য এভাবে এড করেছি কিন্তু আপনারা অবশ্যই Properly Enqueue করে নেবেন।

/**
* Calendar JS and CSS
*/
add_action(‘wp_head’, ‘add_calendar_uflora’);
function add_calendar_uflora()
{ ?>
<link href=”https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel=”stylesheet”>
<?php }
add_action(‘wp_footer’, ‘add_calendar_uflora_js’);
function add_calendar_uflora_js()
{ ?>
<script>
jQuery(document).ready(function($) {
$(“#datepicker-13”).datepicker();
// $(“#datepicker-13”).datepicker(“show”);
})
</script>
<script src=”https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<?php }

এখন আমাদেরকে ৩টা ফিল্ড যুক্ত করতে হবে। তার জন্য নীচের কোডটি:

/*
* Step 1. Add an input field just before the “Add to cart” button
*/
add_action(‘woocommerce_before_add_to_cart_button’, ‘urbanflowra_before_add_to_cart_field’);
function urbanflowra_before_add_to_cart_field()
{
global $product;
// awesome — we have a global product object here
echo ‘<div style=”display:grid;grid-template-columns:auto auto; grid-gap:25px;” class=”class_dropdown_ends”>
<textarea name=”urbanflora-title-field” id=”urbanflora-title-field” cols=”30" rows=”5 “ maxlength=”200" placeholder=”We will handwirte this message exactly as you enter in this box. If no message please type NONE. (Upto 200 Character)”></textarea>
<p>
DELIVERY TIME
<select class=”urbanflora-dateand-time-pricker-select” id =”urbanflowra_id_dropdown_one_end” name=”urbanflora_dropdown_one_end”>
<option value=”” disabled selected>Preferred Delivery Time </option>
<option value=”AM”>AM </option>
<option value=”PM”>PM</option>
<option value=”Business Hour”>Business Hour</option>
</select>
</p>
<p>DELIVERY DATE <input type=”text” id=”datepicker-13" name=”urbanflowra_date_picker_value”></p>
</div>’;
}

এটা করলেই আমাদের ফিল্ডগুলো চলে আসবে, তারপরে কিছু কোডের মাধ্যমে সেগুলোকে কার্ড পেইজে নিয়ে যাবো। নীচের কোড:

/*
* Step 2. Save the provided field value to the cart data
*/
add_filter(‘woocommerce_add_cart_item_data’, ‘urbanflowra_save_field_value_to_cart_data’, 10, 3);
function urbanflowra_save_field_value_to_cart_data($cart_item_data, $product_id, $variation_id)
{
if (!empty($_POST[‘urbanflora_dropdown_one_end’])) {
// here could be another validation if you need
$cart_item_data[‘urbanflora_dropdown_one_end’] = sanitize_text_field($_POST[‘urbanflora_dropdown_one_end’]);
}
if (!empty($_POST[‘urbanflowra_date_picker_value’])) {
// here could be another validation if you need
$cart_item_data[‘urbanflowra_date_picker_value’] = sanitize_text_field($_POST[‘urbanflowra_date_picker_value’]);
}
return $cart_item_data;
}

এখানে একটা কথা মনে রাখতে হবে যে, অবশ্যই ফাংশনের নামগুলো থিমের নামের সাথে বা ওয়েবসাইটের নামের সাথে prefix করে নেবেন। যেমন: urbanflowra_save_field_value_to_cart_data এখানে urbanflowra আমাদের prefix

এই ধাপে আমরা কার্ড, চেকআউট এবং অর্ডার রিসিভড পেইজে ভ্যালুগুলো দেখাবো। তার জন্য নীচের ফিল্টার ব্যবহার করবো।

/*
* Step 3. Display “Delivery time and date” on the pages: Cart, Checkout, Order Received
*/
add_filter(‘woocommerce_get_item_data’, ‘urbanflowra_display_field’, 10, 2);
function urbanflowra_display_field($item_data, $cart_item)
{
if (!empty($cart_item[‘urbanflora_dropdown_one_end’])) {
$item_data[] = array(
‘key’ => ‘Delivery Time’,
‘value’ => $cart_item[‘urbanflora_dropdown_one_end’],
‘display’ => ‘’, // in case you would like to display “value” in another way (for users));
}
if (!empty($cart_item[‘urbanflowra_date_picker_value’])) {
$item_data[] = array(
‘key’ => ‘Delivery Date’,
‘value’ => $cart_item[‘urbanflowra_date_picker_value’],
‘display’ => ‘’, // in case you would like to display “value” in another way (for users)
);
}
return $item_data;
}

এবং ফাইনালি উকমার্স এডমিন পেইজে ভ্যালু দেখানোর জন্য নীচের একশন হুকটি ব্যবহার করবো।

/*
* Step 4. Add the field value to the Order Item meta
*/
add_action(‘woocommerce_checkout_create_order_line_item’, ‘urbanflowra_add_order_item_meta’, 10, 4);
function urbanflowra_add_order_item_meta($item, $cart_item_key, $values, $order)
{
if (!empty($values[‘urbanflora_dropdown_one_end’])) {
$item->add_meta_data(‘Delivery Time’, $values[‘urbanflora_dropdown_one_end’]);
}
if (!empty($values[‘urbanflowra_date_picker_value’])) {
$item->add_meta_data(‘Delivery Time’, $values[‘urbanflowra_date_picker_value’]);
}
}

And Here We Are!
Done