Creating a Custom WooCommerce Checkout Template with JupiterX

Before you begin designing your WooCommerce Checkout page, ensure the necessary plugins are active:

  • SellKit
  • SellKit Pro (included with JupiterX)

Constructing Your Checkout Page

  1. Go to JupiterX > Layout Builder > Single.
  2. Click Add New, name your template, and select Create Template.
  3. Insert a Checkout Block of your choice or design your checkout page from scratch.
  4. Add the Checkout Widget to your page layout.

Build your checkout page as you would any page, but ensure to include the Checkout Widget in the content area.

Checkout Form - Single Page Layout

  • Accessing the Form Settings:
    • Navigate to the checkout form element in your page built with Elementor.
    • Click on the element to bring up the "Checkout Form" settings.
  • Layout Configuration:
    • Click on the 'Content' tab.
    • Find the 'Layout' dropdown and choose 'Single Page' to set your checkout form as a single page layout.
  • Display Options:
    • Cart Items: Toggle 'Show' to display the items currently in the cart.
    • Enable Cart Editing: Toggle 'Show' to allow users to edit their cart items directly from the checkout.
    • Shipping Method: Toggle 'Show' to let users select a shipping method.
    • Express Checkout: Toggle 'Show' to enable express checkout options.
    • Place Order Button Text: Click on the pencil icon to edit the text for the place order button. Default text is 'Complete Order'.
  • Address Autocomplete:
    • Expand the 'Address Autocomplete' section.
    • Toggle 'Enable' on 'Google Address Autocomplete' to provide automated address suggestions while users type their shipping/billing address.
    • Note that you need to obtain a Google Places API key to use this feature. Follow the provided link to add your API to the settings page.
    • 'Auto-populate State' and 'State And City Lookup By Postcode' can also be enabled here for additional address convenience.
  • Coupon Configuration:
    • Expand the 'Coupon' section.
    • Toggle 'Enable Coupon Field' to 'Yes' to allow the use of coupons on the checkout page.
    • Under 'Coupon Field Behavior', select 'Normal' for a standard input field or 'Collapsible' to make the coupon field expandable.
  • Shipping Fields Customization:
    • Expand the 'Shipping Fields' section.
    • Here, you can add, remove, or edit the fields that appear under the shipping section of the checkout form.
    • Click on an existing field to modify its properties like 'Field Label', 'Width', 'Validation', and whether it's 'Required'.
    • Use the 'Add Item' button to create new shipping fields as needed.
  • Billing Fields Customization:
    • Similar to the shipping fields, expand the 'Billings Fields' section.
    • Add, edit, or remove the fields related to the billing information.
  • Custom Messages:
    • Under 'Custom Messages', you can define messages that will appear on the checkout page.
    • Fields here are for various notifications like an empty cart, account creation prompt, security messages, etc.
    • Customize these messages as per your website’s requirements.

Checkout Form - Multi Steps Layout

For a multi-step checkout form, follow the same steps as above with the following additional considerations:

  • Layout Configuration:
    • In the 'Layout' dropdown, choose 'Multi Steps' to set your checkout form as a multi-step process.
  • Step Configuration:
    • 'Steps': Toggle 'Show' to display the step indicators for the checkout process.
    • 'Preview Box': Toggle 'Show' to display a summary box of the user's order.
  • Additional Options:
    • 'Checkout Sticky Cart': Toggle 'Show' to make the cart summary sticky as the user scrolls through the checkout steps.

Styling the Checkout Form

  • Accessing Style Settings:
    • Navigate to the checkout form element on your page in Elementor.
    • Click on the element to open the "Checkout Form" settings.
    • Select the 'Style' tab at the top to access styling options.
  • Form Styling:
    • Columns gap: Adjust the slider to increase or decrease the space between columns in the form.
    • Links Color: Click the color palette icon to change the color of links within the form.
    • Links Hover Color: Click the color palette icon to change the color of links on hover.
    • Collapsible Form Background: Click the color palette icon to set the background color for collapsible sections of the form.
  • Heading Styling:
    • Padding: Click the link icon to delink the padding values and set individual padding for Top, Right, Bottom, and Left in pixels.
    • Typography: Click the pencil icon to adjust typography settings like font family, size, weight, transform, style, decoration, line-height, and letter spacing.
    • Color: Click the color palette icon to set the text color of the form headings.
    • Alignment: Click on the alignment options to set the heading alignment to left, center, or right.
  • Sub Heading Styling:
    • Repeat the same steps as for Heading Styling to adjust Padding, Typography, Color, and Alignment for subheadings.
  • Divider Styling:
    • Border Type: Select the type of border from the dropdown (e.g., solid, dotted, dashed).
    • Border Width: Set the width of the border for Top, Right, Bottom, and Left in pixels.
    • Border Color: Click the color palette icon to choose a color for the divider.
    • Border Radius: Set the border radius to control corner roundness.
  • Step Styling:
    • Typography: Adjust the typography of the step indicators.
    • Alignment: Choose the alignment of step text.
    • Color: Change the color of the step indicators.
    • Links Hover Color: Set the hover color for links within the step indicators.
    • Separator Icon: Choose the icon used to separate steps.
    • Icon Color: Change the color of the step separator icons.
    • Icon Size: Adjust the size of the icons.
    • Icon Spacing: Adjust the space around the icons.
  • Button Styling:
    • For both Primary and Secondary buttons, you can adjust the following:
    • Width: Set a specific width for the button, or leave it to auto to adjust to the text length.
    • Text Color: Set the text color for both normal and hover states.
    • Typography: Adjust the font settings for the button text.
    • Background Color: Choose a background color for both normal and hover states.
    • Border Type: Select a border type or leave it as default.
    • Border Radius: Set the roundness of the button corners.
    • Text Padding: Adjust the padding inside the button to increase or decrease the space around the text.
  • Field Styling:
    • For both Labels and Inputs, you can adjust Typography and Color.
    • Border: Set the border type, radius, focus color for when the field is clicked, and error validation color for when the input is incorrect.
    • Background Color: Choose a background color for the input fields.
  • Order Summary Styling:
    • Container Padding: Adjust the padding inside the order summary container.
    • Product: Toggle 'Enable Image' to show/hide product images. Adjust Typography, Color, and Image Border Color.
    • Product Variation: Adjust Typography and Color for product variations.
    • Subtotal and Total: Adjust Typography and Color.
    • Background Color and Inner Background Color: Choose colors for the background of the order summary and its inner section.

Publishing Your Checkout Template

  • Once you're satisfied, hit Publish.
  • Set the Condition to WooCommerce -> Checkout Page and confirm with Save.

Congratulations! You've crafted a personalized WooCommerce Checkout page that blends seamlessly with your online store's aesthetic. Got questions? Connect with us, and we'll be happy to help!

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Related Articles