|
/ Documentation /Modern Cart/ Use a Custom Image for the Floating Cart Icon

Use a Custom Image for the Floating Cart Icon

Modern Cart allows you to upload and use a custom image as the floating cart icon, giving you more flexibility in branding your store’s appearance.

You can find this setting under the Floating Cart Icon tab.

Upload Custom Icon

Supported file types include .png, .jpg, and .svg.

The recommended image size is 36 × 36 pixels to ensure a clear and consistent display.

See It in Action

Using SVG Files

If you upload an SVG file, please note that WordPress does not allow SVG uploads by default. This is a WordPress restriction, not a limitation from Modern Cart.

You can enable SVG uploads by:

Installing a Plugin

Use a plugin like Safe SVG to allow uploading SVG files safely.

Adding a Code Snippet

You can also enable SVG upload manually with this custom PHP code:

/**
 * Allow SVG uploads for administrators with basic sanitization.
 */

// Allow SVG uploads for administrators only
add_filter('upload_mimes', function($mimes) {
    if (current_user_can('administrator')) {
        $mimes['svg'] = 'image/svg+xml';
    }
    return $mimes;
});

// Basic sanitization: remove <script> tags from uploaded SVGs
add_filter('wp_handle_upload_prefilter', function($file) {
    if ($file['type'] === 'image/svg+xml') {
        $svg = file_get_contents($file['tmp_name']);

        // Remove <script> tags
        $svg = preg_replace('/<script.*?<\/script>/is', '', $svg);

        // Optionally, remove on* event attributes (like onclick, onload)
        $svg = preg_replace('/on\w+="[^"]*"/i', '', $svg);

        file_put_contents($file['tmp_name'], $svg);
    }
    return $file;
});

If you’re not sure how to add code to your WordPress site, refer to this doc: How and Where to Add the Custom JS, CSS & PHP Codes?

Was this doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

Need help? Contact Support
On this page