Snippets

Below some useful snippets to create features that in Webflow are still not very easy to do and do require pseudo elements or advanced css selectors

Variant Buttons Tooltips

When you use Variant Buttons swatches, sometimes is usefull to show up the buttons without any title (only image or color for example).

By adding the snippet below you will get a pseudo element that will appear on hover and dinamically show up the title of the option, feel free to modify the style below according to your own style!

<style>
variant-swatches button {
        position: relative;
}
 
variant-swatches button:hover::before {
    content: attr(data-value);
    position:absolute; 
    top: -70%;
    left: 50%;
    z-index: 9999;
    padding: 0.2rem 0.5rem;
    transform: translateX(-50%);
    height: auto;
    border-radius: 0.3rem;
    background-color: black;
    color: white;
    font-size: 0.8rem;
}
</style>    

Disable Cart Item Skeleton

If you want to disable the cart item skeleton you can add the following snippet

<style>
cart-item.loading>:before, cart-item.loading bundle-item>:before, cart-item.loading img {
    animation: none !important;
}
</style>

Usefull selectors

Below a list of all selectors you might need in Webflow with custom code

Custom Radio Checked

Webflow allows you to apply the checked state only to the radio input, with the following selector you do select the Radio Element instead

.w-radio:has(.w--redirected-checked) {
    /** 
        Add your style
    **/
}

Custom Checkbox Checked

Webflow allows you to apply the checked state only to the checkbox input, with the following selector you do select the Checkbox Element instead

.w-checkbox:has(.w--redirected-checked) {
    /** 
        Add your style
    **/
}

Navbar Open

Webflow allows you to apply the open state on the menu only, with the following selector you can select the body when a menu is open, further refine the selector if you have multiple menus etc.

body:has([data-nav-menu-open]) {
    /** 
        Add your style
    **/
}