{"id":103379,"date":"2024-02-02T05:16:01","date_gmt":"2024-02-02T05:16:01","guid":{"rendered":"\/tutorials\/?p=103379"},"modified":"2026-03-10T09:27:45","modified_gmt":"2026-03-10T09:27:45","slug":"customize-woocommerce-checkout","status":"publish","type":"post","link":"\/ca\/tutorials\/customize-woocommerce-checkout","title":{"rendered":"How to Customize the WooCommerce Checkout Page: A Step-By-Step Guide"},"content":{"rendered":"<p>Customizing the checkout experience on your WooCommerce store can help reduce cart abandonment rates, encourage customers to complete their purchases, and even prompt them to spend more.<\/p><p>In this tutorial, we&rsquo;ll provide a step-by-step guide on how to customize your eCommerce store&rsquo;s checkout page, whether you&rsquo;re a first-time WordPress user or a seasoned WooCommerce store owner.<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/How-to-Start-Online-Business.pdf\" target=\"_blank\" rel=\"noopener\">Download checklist: How to start an online business<\/a><\/p><p>\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-why-you-should-customize-your-woocommerce-checkout-page\">Why You Should Customize Your WooCommerce Checkout Page<\/h2><p>WooCommerce is one of the most popular <a href=\"\/ca\/tutorials\/wordpress-ecommerce\">eCommerce WordPress plugins<\/a> in the market. It offers many built-in features to set up an <a href=\"\/ca\/tutorials\/how-to-make-an-ecommerce-website\">eCommerce site<\/a> without coding.<\/p><p>However, the default checkout page might not align perfectly with the unique needs and brand identity of your eCommerce business. By customizing the standard WooCommerce checkout page, you can:<\/p><p><strong>Enhance User Experience<\/strong><\/p><p>A lengthy and complicated buying journey can confuse visitors and discourage them from purchasing. By removing unnecessary WooCommerce checkout fields and providing clear guidance, customers can navigate the checkout process more smoothly and quickly.<\/p><p>Tailoring the buying process to meet the specific needs and preferences of your target audience can make them feel more valued. For instance, let buyers choose their preferred language, currency, payment processing platform, and shipping method for a more positive experience.<\/p><p><strong>Boost Conversion Rates<\/strong><\/p><p>According to recent <a href=\"\/ca\/tutorials\/ecommerce-statistics\">eCommerce statistics<\/a>, almost 70% of buyers abandon their cart before completing the checkout process. Reasons for this include a complex checkout journey, unexpectedly high shipping costs, mandatory account creation, poor website performance, and a lack of diverse payment gateways.<\/p><p>By addressing issues users have with your checkout page through customization, you will be able to improve your conversion rates.<\/p><p><strong>Increase Average Order Value (AOV)<\/strong><\/p><p>Checkout page customization lets you implement strategies for cross-selling and upselling.<\/p><p>Personalized product recommendations, special offers, and bundle deals presented at checkout can entice customers to add more items to their cart and increase the average order value.<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-customize-woocommerce-checkout-pages-using-plugins\">How to Customize WooCommerce Checkout Pages Using Plugins<\/h2><p>Before you customize the checkout page, consider <a href=\"\/ca\/tutorials\/wordpress-staging-environment\">creating a staging site<\/a> first. This way, you can test the changes in a safe environment without affecting your live site.<\/p><p>Luckily, <a href=\"\/ca\/woocommerce-hosting\">Hostinger&rsquo;s WooCommerce hosting<\/a> comes with a built-in WordPress staging tool you can set up via hPanel:<\/p><ol class=\"wp-block-list\">\n<li>Head to <strong>Websites <\/strong>at the top bar and select <strong>Manage <\/strong>next to your domain name.<\/li>\n\n\n\n<li>On the left menu, navigate to <strong>WordPress <\/strong>&rarr; <strong>Staging<\/strong>.<\/li>\n\n\n\n<li>Click <strong>Create Staging<\/strong> to set up your staging site.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-WordPress-Staging-Tool-in-hPanel.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"504\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-WordPress-Staging-Tool-in-hPanel-1024x504.png\" alt=\"The WordPress Staging Tool in hPanel\" class=\"wp-image-103381\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>If you&rsquo;re new to WooCommerce or WordPress in general, using a plugin makes the checkout page customization process much easier.<\/p><p>Here are several sales funnel plugins and checkout page builders compatible with WooCommerce:<\/p><ul class=\"wp-block-list\">\n<li><strong>FunnelKit Builder<\/strong>. Get ready-made checkout templates and forms you can edit using the Gutenberg block editor or third-party page builders. You can add blocks, images, texts, and custom fields specific to your needs.<\/li>\n<\/ul><ul class=\"wp-block-list\">\n<li><strong>CartFlows<\/strong>. One of the <a href=\"\/ca\/tutorials\/best-woocommerce-plugins\">best WooCommerce plugins<\/a> for optimizing the checkout flow, CartFlows simplifies the process of adding upsell offers and personalizing the WooCommerce <strong>Thank You<\/strong> page.<\/li>\n<\/ul><ul class=\"wp-block-list\">\n<li><strong>Flexible Checkout Fields for WooCommerce<\/strong>. Its user-friendly interface enables you to edit WooCommerce checkout fields with ease. The pro version also offers additional features like checkboxes, radio buttons, and file uploads.<\/li>\n<\/ul><ul class=\"wp-block-list\">\n<li><strong>Checkout Field Editor for WooCommerce<\/strong>. Easily create a custom field to collect customers&rsquo; shipping and billing addresses and any additional information you may need.<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-creating-a-custom-checkout-page-with-funnelkit-builder\">Creating a Custom Checkout Page With FunnelKit Builder<\/h3><p>In this tutorial, we will show you how to customize checkout pages using FunnelKit Builder. Follow these steps to set up the plugin:<\/p><ol class=\"wp-block-list\">\n<li>Open your WordPress dashboard, go to <strong>Plugins <\/strong>&rarr; <strong>Add New Plugin<\/strong>, and search for <strong>FunnelKit Builder<\/strong>.<\/li>\n<\/ol><ol start=\"2\" class=\"wp-block-list\">\n<li>Once you&rsquo;ve installed and activated the plugin, head to the <strong>FunnelKit<\/strong> dashboard on the left sidebar.<\/li>\n<\/ol><ol start=\"3\" class=\"wp-block-list\">\n<li>Go to the <strong>Quick Setup<\/strong> menu and choose <strong>Create Store Checkout<\/strong>.<\/li>\n<\/ol><p>FunnelKit Builder allows you to create a sales funnel from scratch or use a pre-made WooCommerce checkout page template. If you prefer the second option, click <strong>Create Store Checkout <\/strong>and choose from a wide range of funnel templates.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-Funnel-Templates-offered-by-FunnelKit-Builder.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"471\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-Funnel-Templates-offered-by-FunnelKit-Builder-1024x471.png\" alt=\"The Funnel Templates offered by FunnelKit Builder\" class=\"wp-image-103382\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>For a more targeted search, change the filters based on the checkout page types and page builder compatibility &ndash; Elementor, Divi, Block Editor, Oxygen, or Other.<\/p><p>Note that the free version only allows a one-page checkout process. To create a multi-step checkout page, you need to register as a pro user.<\/p><p>Hover over each template and click the <strong>Preview <\/strong>button to take a closer look at your favorite design. By doing so, you can see how your checkout page will look on desktops, smartphones, and tablets.<\/p><p>After finding the right design, select <strong>Import This Funnel<\/strong> at the top right of your screen. Enter your funnel name, and click <strong>Done<\/strong>.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-Create-Funnel-pop-up-in-the-FunnelKit-Builder-dashboard.png\"><img loading=\"lazy\" decoding=\"async\" width=\"741\" height=\"424\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-Create-Funnel-pop-up-in-the-FunnelKit-Builder-dashboard.png\" alt=\"The Create Funnel pop-up in the FunnelKit Builder dashboard\" class=\"wp-image-103383\"  sizes=\"auto, (max-width: 741px) 100vw, 741px\" \/><\/a><\/figure><\/div><p>To adjust your checkout page&rsquo;s layout and content, click the <strong>Preview <\/strong>button inside the <strong>Checkout <\/strong>box.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-Steps-section-in-the-FunnelKit-Builder-dashboard-with-the-Preview-button-highlighted-in-red.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"355\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-Steps-section-in-the-FunnelKit-Builder-dashboard-with-the-Preview-button-highlighted-in-red-1024x355.png\" alt=\"The Steps section in the FunnelKit Builder dashboard, with the Preview button highlighted in red\" class=\"wp-image-103384\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>From there, select <strong>Edit Checkout<\/strong> at the top menu bar, and the Gutenberg interface will open.<\/p><p>Perform changes like you would on any WordPress page. Simply select any element like text, icon, checkout button, or block container to customize its content, typography, color, spacing, and size.<\/p><p>For instance, you can upload your own WooCommerce store logo by clicking the default logo and selecting <strong>Replace<\/strong>. Then, choose an image from the WordPress media library or upload a new one from your computer.<\/p><figure class=\"wp-block-image aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-Gutenberg-editor-interface-showing-one-of-the-templates-offered-by-FunnelKit-Builder.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"296\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-Gutenberg-editor-interface-showing-one-of-the-templates-offered-by-FunnelKit-Builder-1024x296.png\" alt=\"The Gutenberg editor interface showing one of the templates offered by FunnelKit Builder\n\" class=\"wp-image-103385\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p>Arrange your logo further via the <strong>Block <\/strong>tab on the right menu bar. Set your logo as <strong>Default <\/strong>or <strong>Rounded<\/strong>, enter a suitable image alt text, select an aspect ratio, and adjust its width and height.<\/p><p>To customize your page&rsquo;s design, select the <strong>Checkout Form<\/strong> container and head to <strong>Style <\/strong>on the right menu. Here, you can play around with various editing options:<\/p><ul class=\"wp-block-list\">\n<li><strong>Font family<\/strong>. Choose a font that represents your brand identity best, whether it&rsquo;s professional or casual.<\/li>\n\n\n\n<li><strong>Font size and weight<\/strong>. Adjust how big or small the text should appear and set the thickness of the characters. Increasing the font size improves readability while adjusting the weight helps you emphasize certain text elements.<\/li>\n\n\n\n<li><strong>Alignment<\/strong>. Move your content&rsquo;s position within the container or page to the left, center, or right.<\/li>\n\n\n\n<li><strong>Color<\/strong>. Change the background, text, and link colors to match your brand&rsquo;s visual identity or highlight important information on the checkout page.<\/li>\n\n\n\n<li><strong>Border style<\/strong>. Modify the border&rsquo;s style, color, width, and radius to enhance the form&rsquo;s visual appeal.<\/li>\n<\/ul><p>Once everything looks good, don&rsquo;t forget to click <strong>Publish <\/strong>or <strong>Update <\/strong>to save your changes.<\/p><h3 class=\"wp-block-heading\" id=\"h-customizing-the-shipping-form-on-the-checkout-page\">Customizing the Shipping Form on the Checkout Page<\/h3><p>You can also customize the shipping form layout by selecting the <strong>Checkout Form<\/strong> block and navigating to <strong>General <\/strong>&rarr;<strong> Shipping Information<\/strong> on the right sidebar.<\/p><figure class=\"wp-block-image aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-Gutenberg-editor-interface-with-the-Checkout-Form-container-selected.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"424\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-Gutenberg-editor-interface-with-the-Checkout-Form-container-selected-1024x424.png\" alt=\"The Gutenberg editor interface with the Checkout Form container selected\n\" class=\"wp-image-103386\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p>From there, adjust the size of each field box containing the customer&rsquo;s personal information, shipping address, and billing address. There are four options you can choose from the drop-down menu:<\/p><ul class=\"wp-block-list\">\n<li><strong>Full<\/strong>. The box will span the entire width of its parent container. As you can see in the screenshot above, the default <strong>Email <\/strong>and <strong>Street address <\/strong>fields are examples of a full column.<\/li>\n\n\n\n<li><strong>One Half<\/strong>. Choosing this option means splitting content into two equal columns, just like how the <strong>First name<\/strong> and <strong>Last name<\/strong> fields are positioned.&nbsp;<\/li>\n\n\n\n<li><strong>One Third<\/strong>. This is useful for dividing content into three equal parts. Take note of how we fit the <strong>Apartments<\/strong>, <strong>Town\/City<\/strong>, and <strong>Postcode <\/strong>fields in one row.<\/li>\n\n\n\n<li><strong>Two Thirds<\/strong>. Select this layout if you want to make one column wider than one-half fields while not taking up the full width of the parent container. The <strong>Country <\/strong>box is an excellent example of a two-thirds column.<\/li>\n<\/ul><p>To edit the content of your shipping form, save your changes, and click <strong>Back to Checkout Page <\/strong>at the top of the WordPress editor. Under the <strong>Design <\/strong>tab, customize checkout fields for shipping address, shipping method, and order summary.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-Design-tab-in-FunnelKit-Builder_s-Steps-dashboard.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"494\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-Design-tab-in-FunnelKit-Builder_s-Steps-dashboard-1024x494.png\" alt=\"The Design tab in FunnelKit Builder's Steps dashboard\" class=\"wp-image-103387\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>To add new checkout page form fields, simply drag them from the <strong>Fields <\/strong>menu on the right sidebar to your preferred section.<\/p><p>Unfortunately, you have to purchase FunnelKit Builder&rsquo;s pro plan to add premium fields like <strong>Products <\/strong>and <strong>Order Total<\/strong>.<\/p><p>If you want to arrange how columns appear on each section, click and hold any field and drop it anywhere you like. You can also delete a field by hovering over it and clicking the<strong> X<\/strong> icon.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-Shipping-Information-section-under-the-Design-tab-with-the-First-Name-field-selected.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"266\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-Shipping-Information-section-under-the-Design-tab-with-the-First-Name-field-selected-1024x266.png\" alt=\"The Shipping Information section under the Design tab, with the First Name field selected\" class=\"wp-image-103388\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>There&rsquo;s also an option to customize the label of each field so that customers can fill in the form correctly and complete their checkout process without any confusion.<\/p><p>To do so, click any field just once, and the <strong>Edit Field<\/strong> pop-up will appear. Then, enter the label name and placeholder value. Hit <strong>Update <\/strong>to save the changes.<\/p><figure class=\"wp-block-image aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-Email-Field-pop-up-in-the-Design-tab.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"536\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-Email-Field-pop-up-in-the-Design-tab-1024x536.png\" alt=\"The Field - Email pop-up in the Design tab\n\" class=\"wp-image-103389\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p>Once everything is configured, make sure to click <strong>Save<\/strong> so that you won&rsquo;t lose your progress.<\/p><h3 class=\"wp-block-heading\" id=\"h-customizing-the-woocommerce-coupon-field-during-checkout\">Customizing the WooCommerce Coupon Field During Checkout<\/h3><p>Integrating a coupon field on your checkout page can give customers discounts and encourage conversion.<\/p><p>To add a coupon field, head to the Gutenberg editor and select the <strong>Checkout Form<\/strong> block. On the right sidebar, navigate to <strong>General <\/strong>&rarr; <strong>Collapsible Order Summary<\/strong>, and then toggle on the <strong>Enable <\/strong>button.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-collapsible-checkout-review-feature-offered-by-FunnelKit-Builder.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"397\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-collapsible-checkout-review-feature-offered-by-FunnelKit-Builder-1024x397.png\" alt=\"The collapsible checkout review feature offered by FunnelKit Builder\" class=\"wp-image-103390\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>Scroll down to <strong>Coupon Button Text<\/strong>, and enter a short call-to-action &ndash; the default value is <strong>Apply<\/strong>. Make sure the <strong>Enable Coupon<\/strong> button is toggled on.<\/p><p>You can also hide the coupon code field and only make it visible once users click it by activating the <strong>Collapsible Coupon Field<\/strong> option.<\/p><figure class=\"wp-block-image aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-collapsible-coupon-field-feature-offered-by-FunnelKit-Builder.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"261\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-collapsible-coupon-field-feature-offered-by-FunnelKit-Builder-1024x261.png\" alt=\"The collapsible coupon field feature offered by FunnelKit Builder\n\" class=\"wp-image-103392\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p><div class=\"protip\">\n                    <h4 class=\"title\">Pro Tip<\/h4>\n                    <p> Before displaying products on the checkout page, make sure you&rsquo;ve already added products to your WooCommerce shop. Not sure how? Follow the steps in our comprehensive <a href=\"\/ca\/tutorials\/woocommerce-tutorial\">WooCommerce tutorial<\/a>.<\/p>\n                <\/div>\n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-adding-products-to-your-checkout-page\">Adding Products to Your Checkout Page<\/h3><p>Click <strong>Back to Checkout Page<\/strong>, open the <strong>Products <\/strong>tab, and click <strong>Add Product<\/strong>. Search for the products you&rsquo;ve added before, and select <strong>Add<\/strong>.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-Add-Product-pop-up-in-the-FunnelKit-Builder-dashboard.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"398\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-Add-Product-pop-up-in-the-FunnelKit-Builder-dashboard-1024x398.png\" alt=\"The Add Product pop-up in the FunnelKit Builder dashboard\" class=\"wp-image-103393\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>After that, configure the discount settings if you have any, and set the stock quantity for each product. Don&rsquo;t forget to save your changes once done.<\/p><p>If you upgrade to the pro version, FunnelKit also offers the ability to create one-click upsell offers to boost your sales. To do so, click the <strong>Back (&larr;) icon<\/strong>. Under <strong>Steps<\/strong>,<strong> <\/strong>select <strong>One Click Upsell<\/strong> and choose a suitable template.<\/p><p>To improve the user experience, display your products and checkout form on the same page using plugins like <a href=\"https:\/\/wordpress.org\/plugins\/custom-checkout-layouts-for-woocommerce\/\" target=\"_blank\" rel=\"noopener\">One Page Checkout and Layouts for WooCommerce<\/a>.<\/p><h3 class=\"wp-block-heading\" id=\"h-customizing-payment-options-on-the-checkout-page\">Customizing Payment Options on the Checkout Page<\/h3><p>By default, FunnelKit is compatible with every payment method that WooCommerce supports, including cash on delivery, bank transfers, and cheques.<\/p><p>But if you want to offer more payment options, installing plugins like <a href=\"https:\/\/wordpress.org\/plugins\/woocommerce-gateway-stripe\/\" target=\"_blank\" rel=\"noopener\">WooCommerce Stripe Payment Gateway<\/a><strong> <\/strong>can do the trick. On top of major credit and debit card providers like Visa, MasterCard, UnionPay, and American Express, this plugin also supports Google Pay and Apple Pay.<\/p><p>Unfortunately, if you mainly receive payments via PayPal, you need to install a separate <a href=\"https:\/\/wordpress.org\/plugins\/woocommerce-paypal-payments\/\" target=\"_blank\" rel=\"noopener\">WooCommerce PayPal Payments<\/a> plugin.<\/p><p>To <a href=\"\/ca\/tutorials\/stripe-for-wordpress\">set up Stripe for WordPress<\/a>, head to <strong>Plugins <\/strong>&rarr;<strong> Add New Plugin <\/strong>and enter <strong>WooCommerce Stripe Payment Gateway<\/strong> in the search field. Once found, click<strong> Install Now<\/strong>, wait a few seconds, and activate the plugin.<\/p><p>Next, go to <strong>WooCommerce <\/strong>&rarr; <strong>Settings <\/strong>on the left menu and open the <strong>Payments <\/strong>tab. From there, enable all the payment methods you prefer.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-Payment-Methods-section-in-the-WooCommerce-Stripe-plugin-dashboard.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"490\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-Payment-Methods-section-in-the-WooCommerce-Stripe-plugin-dashboard-1024x490.png\" alt=\"The Payment Methods section in the WooCommerce Stripe plugin dashboard\" class=\"wp-image-103394\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-publishing-your-custom-checkout-page\">Publishing Your Custom Checkout Page<\/h3><p>To launch your newly created checkout page, head back to <strong>FunnelKit <\/strong>&rarr; <strong>Store Checkout<\/strong>, click the three-dot icon inside the Checkout box, and select <strong>Publish<\/strong>.<\/p><figure class=\"wp-block-image aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-Publish-button-in-FunnelKit-Builder_s-Checkout-dashboard.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"345\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-Publish-button-in-FunnelKit-Builder_s-Checkout-dashboard-1024x345.png\" alt=\"The Publish button in FunnelKit Builder's Checkout dashboard\n\" class=\"wp-image-103395\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p>That&rsquo;s it; you&rsquo;ve successfully created and published a custom checkout page. It should automatically appear when users click their cart.<\/p><p>To double-check, open your browser and visit your WordPress website to see whether the custom WooCommerce checkout page is displayed properly.<\/p><p>If your eCommerce site still shows the default WooCommerce design, follow these steps:<\/p><ol class=\"wp-block-list\">\n<li>Open your WordPress dashboard and head to <strong>WooCommerce <\/strong>&rarr; <strong>Settings<\/strong>.<\/li>\n\n\n\n<li>Choose the <strong>Advanced <\/strong>tab and scroll down to <strong>Checkout Page<\/strong>.<\/li>\n\n\n\n<li>Open the drop-down menu, enter your custom checkout page URL, and assign the correct page.<\/li>\n\n\n\n<li>Click <strong>Save Changes<\/strong>.<\/li>\n<\/ol><h2 class=\"wp-block-heading\" id=\"h-woocommerce-checkout-page-customization-for-advanced-users\">WooCommerce Checkout Page Customization for Advanced Users<\/h2><p>Using custom code allows you to customize the WooCommerce checkout page even further. That said, we don&rsquo;t recommend this method for those unfamiliar with code editing because the smallest mistakes can lead to website errors.<\/p><h3 class=\"wp-block-heading\" id=\"h-customizing-a-checkout-page-using-custom-code\">Customizing a Checkout Page Using Custom Code<\/h3><p>You can add custom fields to your custom WooCommerce checkout page by editing your theme&rsquo;s <strong>functions.php<\/strong> file.<\/p><p><div class=\"protip\">\n                    <h4 class=\"title\">Haven&rsquo;t Selected a WordPress Theme Yet?<\/h4>\n                    <p> Enhance your eCommerce site&rsquo;s look and feel with these stunning and feature-rich <a href=\"\/ca\/tutorials\/best-woocommerce-themes\">WooCommerce themes<\/a>.<\/p>\n                <\/div>\n\n\n\n<\/p><p>But first, make sure to <a href=\"\/ca\/tutorials\/how-to-create-wordpress-child-theme\">create a WordPress child theme<\/a> so that your customization won&rsquo;t be affected by any theme updates.<\/p><p>Access your WordPress site files. You can use an <a href=\"\/ca\/tutorials\/ftp\/filezilla-ftp-configuration\">FTP client like FileZilla<\/a> or your hosting account&rsquo;s file manager. If you&rsquo;re a Hostinger user, simply follow these steps:<\/p><ol class=\"wp-block-list\">\n<li>Log in to your hPanel account, head to <strong>Websites<\/strong>, and click <strong>Manage <\/strong>next to your domain name.<\/li>\n\n\n\n<li>On the left menu, scroll down to <strong>Files <\/strong>&rarr; <strong>File Manager<\/strong> and choose <strong>Access files of (your domain)<\/strong>.<\/li>\n\n\n\n<li>Open <strong>public_html<\/strong> &rarr; <strong>wp-content<\/strong> &rarr; <strong>themes<\/strong>, and open the theme&rsquo;s folder you&rsquo;re currently using.<\/li>\n\n\n\n<li>Locate and right-click on the <strong>functions.php <\/strong>file, then select <strong>Edit<\/strong>.<\/li>\n\n\n\n<li>Write a PHP function that contains the code you want to execute at the bottom of the file. Use <strong>add_action()<\/strong> to hook your custom function.<\/li>\n<\/ol><p>For example, to add a new field, use:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">add_action('woocommerce_after_order_notes', 'your_custom_function');<\/pre><p>Inside the custom function, use <strong>woocommerce_form_field<\/strong> to add the field. Afterward, specify the type, such as text, checkbox, class, label, placeholder, and required status:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function your_custom_function($checkout) {\n    echo '&lt;div id=\"your_custom_div\"&gt;';\n    woocommerce_form_field('your_custom_field', array(\n        'type'          =&gt; 'text',\n        'class'         =&gt; array('your-custom-class form-row-wide'),\n        'label'         =&gt; __('Your Custom Field'),\n        'placeholder'   =&gt; __('Enter something'),\n        'required'      =&gt; true,\n    ), $checkout-&gt;get_value('your_custom_field'));\n    echo '&lt;\/div&gt;';\n}<\/pre><p>To remove a field, use the <strong>woocommerce_checkout_fields<\/strong> filter. For instance, if you want to remove the billing phone field, enter this code snippet:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">add_filter('woocommerce_checkout_fields', 'custom_remove_fields');\nfunction custom_remove_fields($fields) {\n    unset($fields['billing']['billing_phone']);\n    return $fields;\n}<\/pre><p>Modifying existing fields is also possible with the <strong>woocommerce_checkout_fields<\/strong> filter. You can change properties like label, class, or type of existing fields.<\/p><p>Here&rsquo;s an example:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">add_filter('woocommerce_checkout_fields', 'custom_modify_fields');\nfunction custom_modify_fields($fields) {\n    $fields['billing']['billing_first_name']['label'] = 'New Label';\n    $fields['billing']['billing_first_name']['required'] = false;\n    return $fields;\n}<\/pre><p>To save the data of your custom fields when an order is placed, use the <strong>woocommerce_checkout_update_order_meta<\/strong> action hook:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">add_action('woocommerce_checkout_update_order_meta', 'save_custom_field_data');\nfunction save_custom_field_data($order_id) {\n    if (!empty($_POST['your_custom_field'])) {\n        update_post_meta($order_id, 'Your Custom Field', sanitize_text_field($_POST['your_custom_field']));\n    }\n}<\/pre><h3 class=\"wp-block-heading\" id=\"h-apply-custom-checkout-page-styling-with-css\">Apply Custom Checkout Page Styling With CSS<\/h3><p><a href=\"\/ca\/tutorials\/what-is-css\">Cascading Style Sheets (CSS) <\/a>is one of the most popular languages for fine-tuning the appearance of your WooCommerce site. With it, you can adjust visual elements, including changing the background color of fields and making their corners more rounded.<\/p><p>Simply access the CSS customizer in WordPress by going to <strong>Appearance <\/strong>&rarr; <strong>Customize. <\/strong>In the <strong>Theme Customizer<\/strong>, find the <strong>Additional CSS<\/strong> section on the left menu. This is where you can write or paste your custom CSS code.<\/p><p>To customize specific elements on the checkout page, you need to know their CSS selectors by inspecting the page elements. If you&rsquo;re using Google Chrome, right-click on any element on the checkout page and select <strong>Inspect<\/strong>. This will open the developer tools and highlight the selected HTML structure.<\/p><p>Hover over different parts of the HTML to find the corresponding part of the checkout page. The developer tools will show you the CSS selectors for these elements.<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-WordPress-Customizer-interface-with-Chrome_s-code-inspection-tool-opened.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"191\" src=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/02\/The-WordPress-Customizer-interface-with-Chrome_s-code-inspection-tool-opened-1024x191.png\" alt=\"The WordPress Customizer interface with Chrome's code inspection tool opened\" class=\"wp-image-103396\" style=\"width:840px;height:auto\"  sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>From the <strong>Additional CSS<\/strong> section, start writing CSS rules targeting the selectors you identified. For example, to change the background color of the checkout button, you might write something like this:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.woocommerce-checkout #place_order {\n    background-color: #000; \/* Change #000 to your desired color *\/\n    color: #fff; \/* Change the text color if needed *\/\n}<\/pre><p>You can make similar changes for other elements like form fields, labels, headers, and more.<\/p><p>Once you&rsquo;re satisfied with the changes, click <strong>Publish<\/strong>. After that, visit your checkout page to ensure that the changes appear as expected.<\/p><h3 class=\"wp-block-heading\" id=\"h-using-woocommerce-action-hooks\">Using WooCommerce Action Hooks<\/h3><p>Action hooks in WooCommerce and WordPress are points where you can insert custom PHP code. These hooks run at specific points during the execution of a page, allowing you to modify or enhance its functionality.<\/p><p>For example, you can use action hooks to add credit card logos on the checkout or cart page, which is beneficial for improving user trust and reducing cart abandonment.<\/p><p>The names of these hooks are usually self-explanatory, indicating where the hook allows code insertion. Common examples of WooCommerce action hooks are:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">woocommerce_before_cart \nwoocommerce_checkout_before_customer_details \nwoocommerce_after_main_content<\/pre><p>Each hook corresponds to a different part of the WooCommerce pages, such as Cart, Checkout, and Single Product Page.<\/p><p>To add an element, you can use the <strong>add_action<\/strong> function in your theme&rsquo;s <strong>functions.php<\/strong> file. For example, to add a message before the shipping form, insert the following snippet:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">add_action( 'woocommerce_before_checkout_shipping_form', function() {\n    echo 'Your custom message or HTML here';\n});<\/pre><p>This code will insert whatever content you include in the <strong>echo <\/strong>statement during which the <strong>woocommerce_before_checkout_shipping_form<\/strong> hook is executed.<\/p><p>While action hooks are primarily for adding content, you can use them to remove elements by unhooking or overriding functions that add the default content. For instance, if a specific action hook calls a function that adds a certain field or section you want to remove, enter <strong>remove_action<\/strong> to unhook that function.<\/p><p>After adding your custom code, test your WooCommerce store to ensure that the changes work as expected. Make sure to test thoroughly because small errors can significantly impact your store&rsquo;s functionality.<\/p><p>Alternatively, install a code snippet management plugin like Code Snippets. With this method, each snippet of code can be managed separately.<\/p><p>Note that some WooCommerce themes also have their own hooks for further customization. For instance, the Shoptimizer theme includes hooks for modifying the header, footer, and sidebar.<\/p><p>To learn more about the topic, including what a WordPress hook is and how it works, we highly recommend you to read our <a href=\"\/ca\/tutorials\/what-are-wordpress-hooks\">WordPress hooks<\/a> tutorial.<\/p><h2 class=\"wp-block-heading\" id=\"h-common-woocommerce-checkout-page-issues\">Common WooCommerce Checkout Page Issues<\/h2><p>To maintain a smooth customer experience, understanding common WooCommerce checkout page errors and how to solve them is crucial.<\/p><p>In this section, we&rsquo;ll briefly talk about the main checkout page errors that frequently occur:<\/p><h3 class=\"wp-block-heading\" id=\"h-payment-methods-not-showing\">Payment Methods Not Showing<\/h3><p>In most cases, this issue happens due to incorrect settings or payment gateway compatibility problems.<\/p><p>To resolve it, double-check your payment gateway configuration and make sure it&rsquo;s correctly set up. Also, verify whether your current WooCommerce version supports the preferred payment processors.<\/p><h3 class=\"wp-block-heading\" id=\"h-plugin-conflict-issues\">Plugin Conflict Issues<\/h3><p>Despite providing an easy way to enhance your site&rsquo;s functionality, plugins aren&rsquo;t always compatible with each other.<\/p><p>Conflicts between plugins can result in checkout page errors, disrupting the user browsing experience. To troubleshoot them, deactivate plugins one by one to identify the culprit. Then, update the conflicting plugin or seek an alternative if the issue persists.<\/p><h3 class=\"wp-block-heading\" id=\"h-theme-functionality-problems\">Theme Functionality Problems<\/h3><p>Sometimes, the active theme might not be fully compatible with WooCommerce, leading to checkout issues. To address this, contact the theme developer for support. You can also switch to another theme temporarily to see if the problem disappears.<\/p><h3 class=\"wp-block-heading\" id=\"h-slow-loading-times\">Slow Loading Times<\/h3><p>Unresponsive and slow-loading checkout pages make the overall shopping experience unpleasant for customers, so even minor tweaks that <a href=\"\/ca\/tutorials\/speed-up-woocommerce\">speed up WooCommerce<\/a> can lead to noticeable improvements.<\/p><p>To avoid this, make sure to choose a reliable WooCommerce hosting provider. Hostinger&rsquo;s <a href=\"\/ca\/woocommerce-hosting\">WooCommerce hosting<\/a> uses a fast-performing LiteSpeed server and speed-optimization features, including object caching for WordPress. Our object caching tool eliminates repetitive database queries, making your eCommerce store perform up to three times faster.<\/p><?xml encoding=\"utf-8\" ?><figure class=\"wp-block-image size-full\"><a class=\"hgr-tutorials-cta hgr-tutorials-cta-woocommerce-hosting\" href=\"\/ca\/woocommerce-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"2048\" height=\"600\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/06\/Woocommerce-hosting-x-WP_in-text-banner.png\" alt=\"\" class=\"wp-image-111779\"  sizes=\"auto, (max-width: 2048px) 100vw, 2048px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p>eCommerce stores come in all shapes and sizes, but they have one goal in common: selling products or services online. With eCommerce plugins like WooCommerce, you can set up an online store easily without any coding knowledge or design skills.<\/p><p>That being said, the default WooCommerce checkout page design may not offer the best design and user experience. By customizing the default WooCommerce checkout page, you can create a seamless and pleasant shopping experience and boost your conversion rate.<\/p><p>In this tutorial, we&rsquo;ve explained how to create a custom WooCommerce checkout page using plugins like FunnelKit Builder or by editing code.<\/p><p>We hope this tutorial has provided you with the necessary guidance on how to customize WooCommerce checkout page designs. Good luck with your online business!<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-customize-the-woocommerce-checkout-page-faq\">How to Customize the WooCommerce Checkout Page FAQ<\/h2><p>Find answers to commonly asked questions about WooCommerce checkout page customization.<\/p><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-694a856d3cbe4\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How to Customize the Checkout Page in WooCommerce Without a Plugin?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>To customize the WooCommerce checkout page without a plugin, you&rsquo;ll need to edit the checkout template files. This involves accessing your WordPress theme, copying the WooCommerce template file (u003cstrongu003echeckout\/form-checkout.phpu003c\/strongu003e) to your theme folder, and making modifications there. Make sure to use a child theme to prevent errors when making changes.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-694a856d3cbe7\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How Do I Enable Shipping Addresses in WooCommerce?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>In WooCommerce, you can enable shipping addresses by navigating to your WordPress dashboard and going to u003cstrongu003eWooCommerce u003c\/strongu003e&rarr; u003cstrongu003eSettings u003c\/strongu003e&rarr; u003cstrongu003eShippingu003c\/strongu003e. From there, ensure the u003cstrongu003eShipping Location(s)u003c\/strongu003e option is set so you can ship worldwide or to specific regions. Then, check the u003cstrongu003eEnable shippingu003c\/strongu003e box in the u003cstrongu003eShipping Optionsu003c\/strongu003e to allow customers to enter separate shipping addresses.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-694a856d3cbe8\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Where Can I find the WooCommerce Checkout Template?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>The WooCommerce checkout template can be found within the WooCommerce plugin directory in your WordPress installation. To locate and edit it, access your site&rsquo;s files through a File Manager or an FTP client. Then, head to u003cstrongu003ewp-contentpluginswoocommercetemplatescheckoutu003c\/strongu003e.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Customizing the checkout experience on your WooCommerce store can help reduce cart abandonment rates, encourage customers to complete their purchases, and even prompt them to spend more. In this tutorial, we&rsquo;ll provide a step-by-step guide on how to customize your eCommerce store&rsquo;s checkout page, whether you&rsquo;re a first-time WordPress user or a seasoned WooCommerce store [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/ca\/tutorials\/customize-woocommerce-checkout\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":332,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"How to Easily Customize WooCommerce Checkout Page","rank_math_description":"Learn easy ways to customize WooCommerce checkout page to boost your UX, conversions and add custom fields for a seamless shopping experience.","rank_math_focus_keyword":"customize woocommerce checkout page","footnotes":""},"categories":[22692],"tags":[],"class_list":["post-103379","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/customize-woocommerce-checkout","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/personnaliser-la-page-de-paiement-de-woocommerce","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/como-personalizar-el-checkout-de-woocommerce","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/customize-woocommerce-checkout","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/customize-woocommerce-checkout-page","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/customize-woocommerce-checkout-page","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/como-personalizar-el-checkout-de-woocommerce","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/como-personalizar-el-checkout-de-woocommerce","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/como-personalizar-el-checkout-de-woocommerce","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/customize-woocommerce-checkout","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/customize-woocommerce-checkout","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/customize-woocommerce-checkout","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/customize-woocommerce-checkout","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts\/103379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/users\/332"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/comments?post=103379"}],"version-history":[{"count":14,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts\/103379\/revisions"}],"predecessor-version":[{"id":141706,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/posts\/103379\/revisions\/141706"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/media?parent=103379"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/categories?post=103379"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/ca\/tutorials\/wp-json\/wp\/v2\/tags?post=103379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}