CSS classes: Checkout widget

Following is the list of CSS classes applied to Checkout widget:
CSS class name  Class set to Default HTML tag
sfcheckoutTitle Title of checkout process <h1>
sfcheckoutTabstrip Wrapper of tabstrip which represents the checkout process steps <div>
sfCStep0 Wrapper of checkout process tabstrip when being on first step — Shipping information <div>
sfCStep1 Wrapper of checkout process tabstrip when being on second step — Shipping options <div>
sfCStep2 Wrapper of checkout process tabstrip when being on third step — Payment <div>
sfCStep3 Wrapper of checkout process tabstrip when being on fourth step — Preview <div>
sfCStep4 Wrapper of checkout process tabstrip when being on fifth step — Confirmation <div>
sfStep1 Wrapper of first step of checkout process — Shipping information <a>
sfStep2 Wrapper of second step of checkout process — Shipping options <a>
sfStep3 Wrapper of third step of checkout process — Payment <a>
sfStep4 Wrapper of fourth step of checkout process — Preview <a>
sfStep5 Wrapper of fifth step of checkout process — Confirmation <a>
sfcheckoutMulitPage Wrapper of checkout form of a particular step <div>
sfStep1Wrp Wrapper of checkout form on first step <div>
sfStep2Wrp Wrapper of checkout form on second step <div>
sfStep3Wrp Wrapper of checkout form on third step <div>
sfStep4Wrp Wrapper of checkout form on fourth step <div>
sfStep5Wrp Wrapper of checkout form on fifth step <div>
sfcheckoutFormWrp Wrapper of shipping or billing form <fieldset>
sfcheckoutShippingFormWrp Wrapper of shipping form <fieldset>
sfcheckoutBillingFormWrp Wrapper of billing form <fieldset>
sfcheckoutPaymentFormWrp Wrapper of payment form <fieldset>
sfcheckoutStepTitle Title of checkout step <h2>
sfcheckoutFormList List of checkout form fields <ul>
sfcheckoutFormItm Wrapper of checkout form single field <li>
sfcheckoutFormItmTxt Wrapper of checkout form text field <li>
sfcheckoutFormItmDdl Wrapper of checkout form dropdown list field <li>
sfcheckoutFormItmCodeTxt Wrapper of checkout form shorter text field <li>
sfcheckoutFormItmCheckboxList Wrapper of checkout form checkbox list <li>
sfcheckoutFormItmSep Wrapper of checkout form separator <li>
sfcheckoutFormItmCheckbox Wrapper of shipping or billing form checkbox field <div>
sfPaymentMethodList List of payment options <ol>
sfcheckoutBtnsWrp Wrapper of Continue button <div>
sfcheckoutContinueBtn Continue button <input>
sforderSummary Wrapper of order summary <div>
sfcheckoutStepSubTitle Order summary title <h3>
sforderSummaryTable Order summary table <table>
sforderSummaryRow Order summary row <tr>
sforderSummaryFirst First order summary row <tr>
sforderSummaryMiddle Middle order summary row <tr>
sforderSummaryLast Last order summary row <tr>
sforderSubTotalRow Subtotal price row — before any discounts have been applied <tr>
sforderDiscountRow Discount row <tr>
sforderSummarySep Order summary with visual separator <tr>
sforderSummaryTotal Total price row <tr>
sfDiscount Discount <span>
sfPrice Total price <span>
sfshippingOptionsWrp Shipping options wrapper <div>
sfcheckoutStepTitle Shipping options title <h2>
sfcheckoutFormItmCheckboxList Shipping options list <ol>
sfcheckoutPreviewWrp Wrapper of shipping and billing addresses and shipping and billing methods <div>
sfcheckoutPreviewAddress Wrapper of single address or method <address>, <div>
sfcheckoutPreviewProduct Wrapper of preview of products to be purchased <div>
sfcheckoutTotalPriceWrp Wrapper of total price, discounts, taxes, and fees <ul>
sfcheckoutSubtotal Wrapper of total price before any discounts, taxes and fees have been applied and number of products to be purchased <li>
sfAmount Wrapper of money field <span>
sfcheckoutDiscounts Wrapper of discounts <li>
sfDiscountsWrp Wrapper of discounts <div>
sfAmountCol Money column <td>
sfcheckoutShipping Wrapper of shipping price <li>
sfcheckoutBeforeTax Wrapper of subtotal before taxes have been calculated <li>
sfcheckoutTax Wrapper of taxes <li>
sfcheckoutTotal Wrapper of total price <li>

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?