ChatCart Pro Docs

Advanced

Template overrides, CSS customization reference, and translation guidance for developers and advanced users.

Template Overrides

ChatCart Pro follows the standard WooCommerce template override pattern. You can customize any of the plugin's front-end HTML templates by copying them to your active theme (or child theme) without modifying the plugin files directly. This means your customizations survive plugin updates.

Template File Locations

The plugin's templates are located at:

Plugin template paths

wp-content/plugins/chatcart-pro/templates/
├── checkout/
│   ├── customer-fields.php   # Customer information form fields
│   ├── shipping-section.php  # Shipping method selection
│   └── payment-methods.php   # Payment method card grid
└── floating-button.php       # The floating WhatsApp button HTML

How to Override a Template

Identify the template you want to customize.

Create the directory structure in your active theme:

Override directory structure

wp-content/themes/your-theme/
└── chatcart-pro/
    ├── checkout/
    │   └── customer-fields.php   # overrides the customer fields template
    └── floating-button.php

Copy the original template from the plugin to the corresponding path in your theme.
Edit your copy. Your changes will be loaded instead of the plugin's default.

After Plugin Updates

When ChatCart Pro is updated, check if the original template has changed. Compare your override copy with the new plugin template and merge any updates. The plugin version is displayed in the admin header. Keep an eye on the changelog for template changes.

Available Template Variables

The following variables are available inside checkout/customer-fields.php:

Variable	Type	Description
`$product`	WC_Product	The current WooCommerce product object.
`$settings`	array	The plugin settings array from ccp_settings option.
`$fields`	array	Active checkout fields from ccp_checkout_fields.
`$payment_methods`	array	Configured payment methods from ccp_payment_methods.
`$whatsapp_number`	string	The resolved WhatsApp number (after routing logic).

CSS Customization

ChatCart Pro has a minimal PHP hook surface, and most visual customization is done via CSS. Every element uses scoped, predictable class names that you can safely target from your theme or child theme.

Button Classes

Class	Element
`.ccp-btn--whatsapp`	All WhatsApp buttons (base styling)
`.ccp-btn--product`	Product page button
`.ccp-btn--cart`	Cart page button
`.ccp-btn--mini-cart`	Mini-cart button
`.ccp-btn--checkout`	Checkout page button
`.ccp-btn--loading`	Button in loading state
`.ccp-btn__icon`	WhatsApp SVG icon inside button
`.ccp-floating-wrapper`	Floating button outer wrapper
`.ccp-floating-button`	Floating button element

Checkout Form Classes

Class	Element
`.ccp-checkout-wrap`	Checkout form outer container
`.ccp-form-grid`	Two-column field grid
`.ccp-field-wrap`	Individual field wrapper
`.ccp-field-wrap--full`	Full-width field
`.ccp-field-wrap--half`	Half-width field
`.ccp-field-input`	Text input element
`.ccp-payment-cards`	Payment method card grid
`.ccp-payment-card`	Individual payment method card
`.ccp-order-summary`	Order summary sidebar

Use a child theme

Add your CSS overrides to your child theme's style.css or via Appearance → Customize → Additional CSS. This ensures your customizations survive theme updates.

Translations

ChatCart Pro is fully internationalized. All user-facing strings are wrapped in WordPress translation functions with the text domain chatcart-pro.

Using Loco Translate (Recommended)

The easiest way to translate ChatCart Pro is with the free Loco Translate plugin.

Install and activate Loco Translate from the WordPress plugin repository.
Go to Loco Translate → Plugins → ChatCart Pro.
Click New Language and select your target language.
Loco Translate detects translatable strings automatically. Translate each one and save.
The generated .mo file is saved to a safe location that won't be overwritten by updates.

Using the .pot File Manually

A .pot template file is included at:

POT file location

wp-content/plugins/chatcart-pro/languages/chatcart-pro.pot

You can use this file as the source for any GNU gettext-compatible translation tool, such as Poedit.

Steps

Open Poedit → Create new translation.
Open the chatcart-pro.pot file.
Translate the strings, then save as a .po file.

Poedit compiles the .mo file automatically. Upload both to:

Translation file destination

wp-content/languages/plugins/
├── chatcart-pro-pt_BR.po
└── chatcart-pro-pt_BR.mo

Translation File Naming

Pattern: chatcart-pro-{locale}.po and chatcart-pro-{locale}.mo

Spanish (Spain): chatcart-pro-es_ES
Spanish (Mexico): chatcart-pro-es_MX
French: chatcart-pro-fr_FR
Brazilian Portuguese: chatcart-pro-pt_BR

Share your translation

If you create a translation and would like to share it with the community, send it to support@veloryntech.com. We may include it in future plugin releases.

← Compatibility Next: FAQ →