গত সপ্তাহে, আমি একটি অনলাইন স্টোর থেকে একটি শার্ট কেনার চেষ্টা করেছি। আমার পছন্দের নকশা, আকার এবং রঙটি বেছে নিয়ে কার্টটি পরিষ্কার করার চেষ্টা করেছি। চেকআউট পৃষ্ঠাটি বিশাল ছিল এবং এটি একাধিক পৃষ্ঠায় বিভক্ত ছিল। যখনই আমি ভেবেছিলাম যে আমি প্রক্রিয়াটি সম্পন্ন করেছি, আমাকে আরও তথ্য পূরণ করতে হবে। এর 10 মিনিট পর, আমি বিরক্ত হয়ে অন্য সাইটে গেলাম।
যদিও এটি আপনার সঠিক অভিজ্ঞতা নাও হতে পারে, আপনি সম্ভবত কিছু অসুবিধার সম্মুখীন হয়েছেন যা আপনাকে অনলাইনে একটি পণ্য ক্রয় করতে বাধা দিয়েছে। নিশ্চিত থাকুন, আপনার গ্রাহকদেরও থাকবে। এই কারণেই আপনার বিক্রয়ের জন্য একটি দুর্দান্ত চেকআউট অভিজ্ঞতা তৈরি করা গুরুত্বপূর্ণ। এই নিবন্ধটিতে WooCommerce চেকআউট পৃষ্ঠা কাস্টমাইজেশন সম্পর্কে আপনার যা জানা দরকার তা রয়েছে৷ আপনার ক্রেতাদের জন্য দ্রুততর, চটপটে এবং আরও ভালো হতে পারে।
TL;DR: আপনার সম্পূর্ণ WooCommerce পৃষ্ঠাটি SeedProd বা Elementor-এর মতো পৃষ্ঠা নির্মাতা প্লাগইনগুলির সাথে সহজেই কাস্টমাইজ করা যায়৷ কিন্তু, আপনি আপনার সাইটে কোন পরিবর্তন করার আগে, আমরা আপনাকে BlogVault এর সাথে আপনার WordPress সাইট ব্যাকআপ করার পরামর্শ দিই। ব্লগভল্টের রিয়েল-টাইম ব্যাকআপগুলি বিশেষভাবে WooCommerce সাইটগুলিকে সুরক্ষিত করার জন্য ডিজাইন করা হয়েছে৷ এটি ব্যাকআপ এবং পুনরুদ্ধার সহজ করে তোলে, মাত্র কয়েকটি ক্লিকের মাধ্যমে, নিশ্চিত করে যে যাই ঘটুক না কেন আপনার সাইট নিরাপদ।
ডিফল্ট WooCommerce চেকআউট পৃষ্ঠাটি দেখতে কেমন?
ডিফল্ট WooCommerce চেকআউট পৃষ্ঠা খারাপ নয়; এটা শুধু মহান না। এটি একটি জেনেরিক চেকআউট পৃষ্ঠা হিসাবে ডিজাইন করা হয়েছে যা প্রচুর পণ্য জুড়ে কাজ করে। সুতরাং যখন আমরা WooCommerce চেকআউট পৃষ্ঠাটি কাস্টমাইজ করার বিষয়ে কথা বলতে যাচ্ছি, আমরা অবশ্যই ডিফল্টটিকে ট্র্যাশ করতে যাচ্ছি না। এটি একটি দুর্দান্ত সূচনা বিন্দু এবং আমরা আপনার পণ্য, আপনার গ্রাহকদের এবং তাদের আচরণ সম্পর্কে আপনার জ্ঞানের উপর ভিত্তি করে এটিকে টুইক করার পরামর্শ দিই।
একটি ছদ্মবেশী ট্যাবে আপনার সাইট খুলুন এবং আপনার কার্টে পণ্য যোগ করুন। চেকআউট করতে এগিয়ে যান এবং ডিফল্ট চেকআউট পৃষ্ঠাটি একবার দেখে নেওয়া যাক:
ডিফল্টরূপে, WooCommerce চেকআউট পৃষ্ঠা আপনার গ্রাহকের নাম, ঠিকানা এবং ফোন নম্বরের মতো মৌলিক বিলিং বিশদ জানতে চায়৷ এটিতে আপনার অর্ডার এবং অর্থপ্রদানের পদ্ধতি সম্পর্কেও বিশদ রয়েছে। এটি আপনার সর্বনিম্ন প্রয়োজন কিন্তু আপনার গ্রাহকদের জন্য সেরা অভিজ্ঞতা তৈরি করে না। এই নিবন্ধটি আপনাকে দেখাবে কিভাবে WooCommerce চেকআউট পৃষ্ঠাটি বিভিন্ন উপায়ে সম্পাদনা করতে হয়।
দ্রষ্টব্য :আপনি WooCommerce চেকআউট পৃষ্ঠা সম্পাদনা শুরু করার আগে, কার্টে কয়েকটি পণ্য রাখুন। আপনার চেকআউট পৃষ্ঠায় আপনার পরিবর্তনের প্রভাব দেখতে এটি একটি চমৎকার উপায়।
এলিমেন্টর দিয়ে কিভাবে WooCommerce চেকআউট পৃষ্ঠা সহজে কাস্টমাইজ করবেন
আপনি হয় ডিফল্ট WooCommerce চেকআউট পৃষ্ঠা সম্পাদনা করতে পারেন বা একটি বিদ্যমান টেমপ্লেট ব্যবহার করতে পারেন৷ আপনি টেমপ্লেট ক্লিক করে বিভিন্ন টেমপ্লেট চেষ্টা করতে পারেন সাইডবারে আপনি যদি ডিফল্ট চেকআউট পৃষ্ঠাটি সম্পাদনা করতে চান তবে এই বিভাগটি আপনার জন্য। আপনার চেকআউট পৃষ্ঠাটিকে আরও উন্নত করার সবচেয়ে সহজ এবং দ্রুততম উপায় হল একটি পৃষ্ঠা নির্মাতা ব্যবহার করা৷ আমরা এটি করতে জনপ্রিয় এলিমেন্টর ব্যবহার করছি, যদিও অন্য কোনো পৃষ্ঠা নির্মাতা একইভাবে কাজ করবে। আমরা Elementor পছন্দ করি কারণ এটি সেট আপ করা এবং ব্যবহার করা সহজ, এছাড়াও এটি WooCommerce-নির্দিষ্ট উইজেটগুলির সম্পূর্ণ হোস্টের সাথে আসে৷
চেকআউট পৃষ্ঠাটি সম্পাদনা করতে, আপনার যা দরকার তা হল এলিমেন্টরের চেকআউট উইজেট। woocommerce_checkout শর্টকোডটিকে উইজেট দিয়ে প্রতিস্থাপন করুন এবং এটি আপনাকে একটি সম্পূর্ণ কাস্টমাইজযোগ্য চেকআউট পৃষ্ঠা দিয়ে দেবে। এটি এলিমেন্টরের কার্ট উইজেটের পাশাপাশি দুর্দান্ত কাজ করে, পুরো ডিজাইনিং প্রক্রিয়াটিকে সহজ করে তোলে। মনে রাখবেন, এই অল-ইন-ওয়ান সমাধানটি একটি মূল্যের সাথে আসে। এই উইজেটগুলি ব্যবহার করার জন্য আপনার এলিমেন্টরের প্রো সংস্করণ প্রয়োজন। আপনি যদি Elementor-এ বিনিয়োগ করতে চান, তাহলে এই ধাপগুলি হল:
- এলিমেন্টর ইনস্টল এবং সক্রিয় করুন: আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ডে, প্লাগইন ক্লিক করুন এবং তারপর নতুন যোগ করুন। এলিমেন্টর জন্য অনুসন্ধান করুন. ইনস্টল করুন ক্লিক করুন৷ এবং সক্রিয় করুন অনুরোধ করা হলে. এটি এলিমেন্টর প্রো ইনস্টল করবে।
- লাইসেন্স কী যোগ করুন: এলিমেন্টর ক্লিক করুন সাইডবারে লাইসেন্স ক্লিক করুন৷ , লাইসেন্স কী যোগ করুন, এবং ক্লিক করুন সক্রিয় করুন। প্লাগইন এখন ব্যবহারের জন্য প্রস্তুত।
- এলিমেন্টর সম্পাদকে চেকআউট পৃষ্ঠাটি খুলুন: পৃষ্ঠাগুলি-এর উপর হোভার করুন এবং সমস্ত পৃষ্ঠা-এ ক্লিক করুন . চেকআউট পৃষ্ঠার উপর হভার করুন৷ এবং সম্পাদনা ক্লিক করুন . শীর্ষে, এলিমেন্টরের সাথে সম্পাদনা করুন ক্লিক করুন৷ . এক সেকেন্ড অপেক্ষা করুন এবং এটি এলিমেন্টর সম্পাদকে পৃষ্ঠাটি খুলবে।
- এলিমেন্টরের সাথে সম্পাদনার সাথে পরিচিত হন: Elementor অনুভূমিক বিভাগে কাজ করে যা আপনি প্রতিটি বিভাগে কতগুলি কলাম থাকবে তা চয়ন করে কাস্টমাইজ করতে পারেন। + ক্লিক করুন পৃষ্ঠা সম্পাদকে একটি বিভাগ যোগ করতে এবং এটি আপনাকে সেই বিভাগে যে কলামগুলি চান তার সংখ্যা এবং বিন্যাস নির্বাচন করতে অনুরোধ করে। কলামগুলিতে যোগ করতে সাইডবার থেকে উপাদানগুলিকে টেনে আনুন৷ সাইডবার থেকে প্রতিটি উপাদান কাস্টমাইজ করুন। আপনি যখন প্রতিটি পৃথক উপাদান নির্বাচন করবেন তখন আপনি প্রযোজ্য সেটিংস দেখতে পাবেন।
- চেকআউট উইজেট দিয়ে চেকআউট শর্টকোড প্রতিস্থাপন করুন: শর্টকোড মুছুন এবং বাম দিকে লাইব্রেরি থেকে চেকআউট উইজেট যোগ করুন। এটি আপনাকে এলিমেন্টর চেকআউট পৃষ্ঠাটি কেমন দেখাচ্ছে তার একটি পূর্বরূপ দেবে।
- চেকআউট পৃষ্ঠাটি কাস্টমাইজ করুন: আপনি সাইডবারে এলিমেন্টর চেকআউট উইজেটের অনেকগুলি সেটিংস অন্বেষণ করতে পারেন৷ ৷
Here are some settings you can change:
- General: Choose from one or two column layouts, and even make one column sticky.
- Changing billing or shipping forms: Edit the header for each of these forms, each placeholder, and each field.
- Additional information: Provide a special section for your customers to add instructions or information for their order.
- Coupon settings: Customise the alignment and typography of your coupons.
You can edit more things by clicking Style :
- Purchase button: You can change the colors, the text, spacingetc for the purchase button.
- Order summary: You can choose the typography and spacing of the list of products ordered.
- Typography: You can customise all the text except forms.
- Forms: Customise the typography and colour of your forms. Use the Rows Gap settings to increase spacing.
- Review the page in Mobile View: Responsive design is very important, and you can use Elementor built-in view to see how your pages look on different screen sizes.
Editing the checkout page merely scratches the surface. Elementor and WooCommerce are a powerful combination that you can use to make your store really stand out.
So, we’ve talked about how easy it is to customise your whole checkout page with Elementor. But, what if you don’t want to use a plugin like Elementor and would prefer to just use the in-built editor? Keep reading to see how you can do that.
How to customise the design of your checkout page with the in-built editor
In this section, we’ll talk about how to use the Gutenberg editor to make changes to the WooCommerce checkout page. To open the page in the editor, hover over Checkout Page and click Edit.
This will lead you to the Gutenberg Block Editor. The block editor works in horizontal blocks of different types of content. You can add text, images, or headings by adding a block from the library on the left. Each block can be customised separately. You’ll see the block library in the sidebar, by clicking the + on the top left. You can change the settings of each block by clicking the gear button on the top right of the block tab.
You’ll also see some text, the shortcode, on the actual page. The shortcode is WooCommerce’s way of including checkout fields to your page. It looks like this:
woocommerce_checkout
Do not delete this shortcode. You can add images or text below and above this shortcode. Later on in this article, we’ll talk about editing those fields. But, for now, let’s talk about how to make changes to the general design. Here are the steps to do so:
Add text
- Add the Paragraph widget: You can add text below and above your shortcode. You’ll see text that says “Type/choose a block”. You can either drag and drop the Paragraph widget or just start typing the text you want. Double-click to go to a different block.
- Customise the text: You can edit the typography and colours in the block tab on the right. Just select the text or the block.
To add a header, you can change add the Header widget and edit it just the same. There are varying sizes like H1, H2, etc that you can choose from as well.
Add images
- Add the Image widget: Click the + on the top left and type Image in the search bar. Select the type of Image widget you’d like and click, or drag and drop into a column.
- Choose an image: Choose an image from your media library by clicking Media library, or click Upload to select a file from your local computer. You can add a caption if you’d like.
Add buttons
- Add the Button widget: You can search for it in the search bar in the blocks library.
- Customise button: Change the label of the button, alignment, and typography of the label in the popup that appears. You can also change the colour, border, and size in the block settings.
- Hyperlink the button: Click the URL button in the pop-up and paste a URL of a page you’d like to link the button to.
Explore other widgets in the block editor to help you customise the entire page. We also recommend you preview the page by clicking Preview on the top right. Once you’re done, click Update.
While there is a lot you can do with just the Gutenberg editor, you can’t change specific things like the fields. The next section will cover how to make those changes.
How to customise checkout page fields
Changing the checkout page fields can be more impactful than you realise. It really defines the experience for your customer. There are two ways to go about it:with a field manager plugin or manually. We’ll talk about both in this section.
Customising page fields with an extension
We’re using the Checkout Field Manager for WooCommerce plugin for this tutorial. You’ll have to buy the extension. Once you do, here are the steps to get started.
- Install and activate the plugin: On your wp-admin panel, hover over Plugins ve toband click Add New . Click Upload Plugin and Choose File and theme select the zip folder that you just downloaded. Click Install Now and Activate.
- Edit or add fields in WooCommerce Settings: Hover over WooCommerce and click Checkout . Click Billing, Shipping and Additional at the top and here you manage all your fields as follows:
- Disable fields: You can disable unnecessary ones, by toggling the Disabled column.
- Make some fields compulsory: You can toggle on Required and make some fields compulsory.
- Edit the look of the field: You can change the alignment of a field to be either left aligned, right aligned, or wide by choosing from the dropdown menu in the Positions column.
- Edit existing content: Click Edit at the end of the relevant field and a popup will appear. You can change the Name, Type, Label, Description, etc. Then, click Save .
- Add new fields :Click + Add New Field at the top left. You can fill in the details as you’d prefer. Click Save .
- Save the changes: Once you’re done, click Save at the bottom left corner.
Customise page fields with code
If you’re familiar with coding, you can add code to your theme’s function.php file. Generally speaking, when modifying a theme using code, create a child theme first and modify that. This will preserve your changes and customisations when the theme updates.
It’s important to note that Checkout Field Manager, the extension we mentioned in the previous section, overrides the changes made to the functions.php file. So, they can’t be used parallely.
Additionally, it’s important to understand how WooCommerce loads the page fields in the first place. WooCommerce puts fields through a filter. This allows you to add custom code to make changes to the fields. In the case of WooCommerce checkout pages, this filter is as follows:
$this->checkout_fields =apply_filters(‘woocommerce_checkout_fields’, $this->checkout_fields);
This means that hooking into woocommerce_checkout_fields can override any existing code. Hooks are essentially pieces of code that modify WordPress core files. Your site has a few hooks that it comes with:
- woocommerce_before_checkout_form
- woocommerce_checkout_before_customer_details
- woocommerce_checkout_billing
- woocommerce_checkout_shipping
- woocommerce_checkout_after_customer_details
- woocommerce_checkout_before_order_review
- woocommerce_checkout_order_review
- Woocommerce_checkout_after_order_review
- Woocommerce_after_checkout_form
Additionally, there’s a long list of hooks that WooCommerce offers that you can choose from. You can also check out this list of hooks on Business Bloomer that helps you visualise the hooks. Now, let’s talk about how to change the fields.
Change the placeholder in the order_comments field
// Hook in
add_filter( ‘woocommerce_checkout_fields’ , ‘custom_override_checkout_fields’ );
// Our hooked in function – $fields is passed via the filter
function custom_override_checkout_fields( $fields )
$fields[‘order’][‘order_comments’][‘placeholder’] =‘My new placeholder’
return $fields
}
Change the label of the order_comments field
// Hook in
add_filter( ‘woocommerce_checkout_fields’ , ‘custom_override_checkout_fields’ );
// Our hooked in function – $fields is passed via the filter!
function custom_override_checkout_fields( $fields )
$fields[‘order’][‘order_comments’][‘placeholder’] =‘My new placeholder’
$fields[‘order’][‘order_comments’][‘label’] =‘My new label’
return $fields;
}
Remove a field
// Hook in
add_filter( ‘woocommerce_checkout_fields’ , ‘custom_override_checkout_fields’ );
// Our hooked in function – $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {
unset($fields[‘order’][‘order_comments’])
return $fields;
}
There’s a WooCommerce article on using code to help you customise your checkout fields.
Now, let’s talk about how to change the layout of your Checkout page.
How to change the checkout page layout
You can customise the layout of your WooCommerce page by adding action hooks. Here are some ways that you can change it:
Using a snippet management plugin
We’ll start with the easier method which is to add it using a snippet management plugin.
- Install and Activate Snippet Management Plugin: We’re using Code Snippets. You can find it in your plugins directory. Hover over Plugins and click Add New . Then search for Code Snippets and click Install and Activate.
- Copy the hook: Go to the WooCommerce library of hooks and copy the code or create a custom hook in a text editor and copy it. If, for example you want to add a Terms and Conditions section at the bottom, here’s what you would copy.
- Add the code: Hover over Code Snippets on the left and click Add New . Add a recognisable name for the hook. Select the functions tab. Paste the code at the bottom. Make sure the option to Run Snippet Everywhere is selected and click Save Changes and Activate. You’ve now successfully added a hook.
Adding the code manually
If you’d like to add it to your theme’s function.php file, here are the steps:
- Open theme file editor: Hover over Appearance on the sidebar and click Theme File Editor .
- Copy hook code: You can either copy it from the WooCommerce library or create a custom one on a text editor and copy it. Like we used in the previous section, if you’d like to add a T&C section, here’s the code you’d copy. There’s more in the WooCommerce hooks librar.
- Edit the functions.php file: On the right, scroll through the menu of files till you find functions.php. Paste the code you copied and click Update FIle . অভিনন্দন। You’ve added a hook to your theme.
Additional plugins and extensions for your checkout page
Here are some additional extensions we recommend you install because it will definitely help you create an amazing checkout experience:
- WooCommerce Checkout Addons:This extension allows a customer to include addons in their order like gift wrapping, for example.
- WooCommerce One Page Checkout:This allows you to make any page a checkout page and makes the shopping process easier because the customer can now choose and buy a product on the same page.
- WooCommerce Social Login:This allows a customer to login with a social media account instead of their email or phone number.
- YITH WooCommerce Order Tracking:This helps manage shipping information easily. It allows your customers to track their purchases.
- YITH Advanced Refund System for WooCommerce:This helps you set up a refund system.
Why should you customise your WooCommerce checkout page?
The main goal of your checkout page is to encourage your customers to buy things from your site and here’s why a custom checkout page does just that:
- Faster for your customers: If you can remove unnecessary fields and make the process of buying faster for your customers, they’re less likely to ditch their cart. The longer the process, the less motivated a customer is to buy anything at all.
- Upsell more products: You can use the checkout page to sell other products that they might be interested in or related products. This is an opportunity for you to show your customers what they knew they needed but didn’t know you sold.
- Make the checkout process feel safe: You can add testimonials and this will help customers feel like they can trust you. You can also be transparent about why you’re asking for certain information.
Best ways to customise your WooCommerce checkout page
- Easily create an account: Make the process of creating an account painless for your customer. Make the time between adding a product to cart and paying for the product as quick as you can. Remove fields that are unnecessary like “Company”. If possible, make it optional.
- Add trust factors: This builds trust within the customer that their money is going to a safe place.
- Add social proof elements: This encourages customers to share their experience with your shop on their social media sites.
- Transparent charges: Don’t have additional charges unnecessarily. Make sure you’re clear about where their money is going. For instance, only add shipping charges in addition to the cost of the product.
- Offer enough checkout options: Strike a balance between adding too many and too few payment options. Use payment gateways that are popular amongst your target audience. We have articles on adding Stripe or PayPal to your WooCommerce page that you can check out.
Final thoughts
The default WooCommerce checkout is basic but customizable. Every aspect of the checkout page can be edited to create an amazing shopping experience for your customers. But, before you make any changes, it’s necessary to backup your site using BlogVault. This gives you insurance for when something goes wrong or if you’ve accidentally made the shopping experience worse. BlogVault not only takes real time backups but the restore process is an absolute piece of cake.
FAQ
What are action hooks?
Action hooks help you add a snippet of code to your core files that affects the way your site functions. WordPress has an overwhelmingly large library of hooks that you can use or you can create your own custom ones.
How do you edit text on WooCommerce Checkout Pages?
You can use your in-built WordPress editor or with a page builder plugin to edit and customise your fonts and text throughout your site. We recommend using a page builder like SeedProd. It’s easy to use and has both a free and paid version.
Where do you add hooks and filters?
You should add hooks and filters to your child theme’s function.php file. Child themes have the same look and feel of your parent theme but allows you to tweak and add code. You can identify your child theme by going to Appearance> Themes and looking for the theme without a feature image.=If you don’t have a child theme, checkout this article on creating one.
