Advanced — 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 from the list above.

In your active theme (or child theme), create the following directory structure:

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 file 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

Inside the customer fields template (checkout/customer-fields.php), the following PHP variables are available:

Variable	Type	Description
`$product`	WC_Product	The current WooCommerce product object.
`$settings`	array	The plugin settings array from the 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 — 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

Tip: 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.
In your admin, go to Loco Translate → Plugins → ChatCart Pro.
Click New Language and select your target language.
Loco Translate will detect all translatable strings from the plugin automatically. Translate each string and save.
The generated .mo file is saved to a safe location outside the plugin directory — it won't be overwritten by plugin updates.

Using the .pot File Manually

A .pot template file is included in the plugin 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.

Open Poedit and select Create new translation.
Open the chatcart-pro.pot file.
Translate the strings and save as a .po file.

Poedit will also compile a .mo file. Upload both to:

Translation file destination

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

Translation File Naming

Name your translation files using the pattern chatcart-pro-{locale}.poand chatcart-pro-{locale}.mo, where {locale} is the WordPress locale code for your language. Common examples:

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

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 →