Articles on: Developers

Custom CSS

UI-Composer CSS Customization Reference


Reason

Image

Location

Snippet

I want to hide the toolbar completely

📷 Toolbar screenshot placeholder

UI-Composer

css<br>.fpd-element-toolbar-smart {display:none!important}<br><br>/* Old toolbar version */<br>.fpd-element-toolbar {display:none!important}

I want to hide the toolbar only for images

📷 Toolbar on image placeholder

UI-Composer

css<br>.fpd-element-toolbar-smart.fpd-type-image {display:none!important}

I want to hide the design preview

📷 Thumbnail preview placeholder

UI-Composer

css<br>.fpd-thumbnail-preview {display:none!important}

I want to hide the colour in the cart

📷 Cart color info placeholder

UI-Composer

css<br>.woocommerce-cart span.fpd-cart-element-color {display:none}

I want to change the size of the view thumbnails

📷 View thumbnails placeholder

UI-Composer

css<br>.fpd-views-wrapper .fpd-views-selection .fpd-item {width:90px;height:100px}

I want to hide the empty Main Bar

📷 Empty main bar placeholder

UI-Composer

css<br>.fpd-mainbar {display:none}

I want to hide the color-picker / font dropdown from text layers

📷 Text layer dropdown placeholder

UI-Composer

css<br>.fpd-text-layer-item .fpd-text-layer-meta {display:none}

Updated on: 22/10/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!