Get started
Customization
Custom CSS styles
With Avarda Checkout you have the possibility to customize the checkout style through a WordPress filter called: aco_custom_css_styles
An example
Add this code to your themes functions.php file or include it in a separate functionality plugin.
/**
* Filter hook aco_custom_css_styles
* Example code of how to customize the style of Avarda Checkout.
*
* Add this code to your themes functions.php file or include it in a separate functionality plugin.
*/
add_filter( 'aco_custom_css_styles', 'aco_customize_checkout_style' );
function aco_customize_checkout_style( $styles ) {
$styles = array(
'buttons' =>
array(
'primary' =>
array(
'base' =>
array(
'backgroundColor' => '#93c01f',
'borderColor' => '#3f3f3f',
'color' => '#fff',
),
),
),
);
return $styles;
}
The Custom CSS Style list
This is the list of all the available CSS properties for customizing the Avarda Checkout.
/**
* The list of all the available CSS properties for customizing the Avarda Checkout.
* This list can be used as reference when customizing the Avarda Checkout.
*/
$styles = array(
'buttons' =>
array(
'primary' =>
array(
'base' =>
array(
'backgroundColor' => '#4c4c4c',
'borderColor' => '#3f3f3f',
'color' => '#fff',
),
'minHeight' => 48,
'lineHeight' => 24,
'fontWeight' => 700,
'fontSize' => 18,
'borderWidth' => 1,
'boxShadow' =>
array(
'hOffset' => 0,
'vOffset' => 7,
'blur' => 3,
'spread' => -3,
'color' => '#000',
),
'padding' =>
array(
'top' => 10,
'right' => 16,
'bottom' => 10,
'left' => 16,
),
'hover' =>
array(
'backgroundColor' => '#333333',
'borderColor' => '#212121',
'color' => '#fff',
),
'disabled' =>
array(
'backgroundColor' => '#25B5BC',
'borderColor' => '#25B5BC',
'color' => '#FFFFFF',
),
'borderRadius' =>
array(
'topLeft' => 4,
'topRight' => 4,
'bottomLeft' => 4,
'bottomRight' => 4,
),
),
'secondary' =>
array(
'base' =>
array(
'backgroundColor' => '#fff',
'borderColor' => '#dcdcdc',
'color' => '#333',
),
'minHeight' => 48,
'lineHeight' => 24,
'fontWeight' => 500,
'borderWidth' => 1,
'fontSize' => 16,
'boxShadow' =>
array(
'hOffset' => 0,
'vOffset' => 7,
'blur' => 3,
'spread' => -3,
'color' => '#000',
),
'padding' =>
array(
'top' => 10,
'right' => 16,
'bottom' => 10,
'left' => 16,
),
'hover' =>
array(
'backgroundColor' => '#e6e6e6',
'borderColor' => '#adadad',
'color' => '#000',
),
'disabled' =>
array(
'backgroundColor' => '#25B5BC',
'borderColor' => '#25B5BC',
'color' => '#FFFFFF',
),
'borderRadius' =>
array(
'topLeft' => 4,
'topRight' => 4,
'bottomLeft' => 4,
'bottomRight' => 4,
),
),
),
'fontFamilies' =>
array(
0 => 'Lato',
1 => 'Helvetica',
),
'headings' =>
array(
'h1' =>
array(
'fontSize' => 26,
'lineHeight' => 30,
'display' => 'block',
'fontWeight' => 700,
'color' => '#000',
),
'h2' =>
array(
'fontSize' => 22,
'lineHeight' => 26,
'display' => 'block',
'fontWeight' => 700,
'color' => '#000',
),
'h3' =>
array(
'fontSize' => 18,
'lineHeight' => 20,
'display' => 'block',
'fontWeight' => 700,
'color' => '#000',
),
'h4' =>
array(
'fontSize' => 16,
'lineHeight' => 16,
'display' => 'block',
'fontWeight' => 700,
'color' => '#000',
),
),
'input' =>
array(
'height' => 50,
'fontSize' => 16,
'fontWeight' => 400,
'backgroundColorValid' => '#fff',
'backgroundColorInvalid' => '#fee7e7',
'backgroundBorderColor' => '#dcdcdc',
'borderRadius' =>
array(
'topLeft' => 0,
'topRight' => 0,
'bottomLeft' => 0,
'bottomRight' => 0,
),
'borderWidth' => 1,
'borderStyle' => 'solid',
),
'footer' =>
array(
'fontSize' => 12,
'fontWeight' => 400,
'color' => '#777777',
),
'links' =>
array(
'default' =>
array(
'fontSize' => 13,
'fontWeight' => 400,
'color' => '#4c4c4c',
'textDecoration' => 'underline',
'hover' =>
array(
'color' => '#262626',
'textDecoration' => 'underline',
),
),
'blue' =>
array(
'fontSize' => 13,
'fontWeight' => 400,
'color' => '#009fe3',
'textDecoration' => 'underline',
'hover' =>
array(
'color' => '#006996',
'textDecoration' => 'underline',
),
),
'biggerBlue' =>
array(
'fontSize' => 16,
'fontWeight' => 400,
'color' => '#009fe3',
'textDecoration' => 'underline',
'hover' =>
array(
'color' => '#006996',
'textDecoration' => 'underline',
),
),
'smallNoDecoration' =>
array(
'fontSize' => 11,
'fontWeight' => 400,
'color' => '#4c4c4c',
'textDecoration' => 'none',
'hover' =>
array(
'color' => '#262626',
'textDecoration' => 'none',
),
),
'smallBlack' =>
array(
'fontSize' => 11,
'fontWeight' => 400,
'color' => '#4c4c4c',
'textDecoration' => 'underline',
'hover' =>
array(
'color' => '#262626',
'textDecoration' => 'underline',
),
),
),
'icons' =>
array(
'card' =>
array(
'backgroundUrl' => 'https://avdonl0p0documentation.blob.core.windows.net/static/Svg_example3.svg.png',
'width' => 30,
'height' => 30,
),
),
'checkbox' =>
array(
'primary' =>
array(
'width' => 20,
'height' => 20,
'checkedUrl' => 'https://avdonl0p0documentation.blob.core.windows.net/static/ae71d5d08b.png',
'uncheckedUrl' => 'https://avdonl0p0documentation.blob.core.windows.net/static/891e5ce08b.png',
'checkedDisabledUrl' => 'https://avdonl0p0documentation.blob.core.windows.net/static/ae71d5d08b_disabled.png',
'uncheckedDisabledUrl' => 'https://avdonl0p0documentation.blob.core.windows.net/static/891e5ce08b_disabled.png',
),
),
'paymentMethod' =>
array(
'checkbox' =>
array(
'width' => 20,
'height' => 20,
'checkedUrl' => 'https://avdonl0p0documentation.blob.core.windows.net/static/ae71d5d08b.png',
'uncheckedUrl' => 'https://avdonl0p0documentation.blob.core.windows.net/static/891e5ce08b.png',
'checkedDisabledUrl' => 'https://avdonl0p0documentation.blob.core.windows.net/static/ae71d5d08b_disabled.png',
'uncheckedDisabledUrl' => 'https://avdonl0p0documentation.blob.core.windows.net/static/891e5ce08b_disabled.png',
),
'activePaymentMethodLabelColor' => '#25B5BC',
),
'select' =>
array(
'borderRadius' =>
array(
'topLeft' => 0,
'topRight' => 0,
'bottomLeft' => 0,
'bottomRight' => 0,
),
'boxShadow' =>
array(
'hOffset' => 0,
'vOffset' => 1,
'blur' => 4,
'spread' => 0,
'color' => '#00000014',
),
'fontSize' => 16,
'lineHeight' => 20,
'height' => 30,
'color' => '#000000',
'borderWidth' => 0,
'borderStyle' => 'solid',
'borderColor' => '#000000',
'padding' =>
array(
'top' => 1,
'right' => 5,
'bottom' => 1,
'left' => 5,
),
'margin' =>
array(
'top' => 5,
'right' => 0,
'bottom' => 5,
'left' => 0,
),
'fontWeight' => 100,
'selectArrowUrl' => 'https://avdonl0p0documentation.blob.core.windows.net/static/aea6a3749caaa.png',
),
);