Product Actions

Styles for a product actions used in product_actions module.

Structurally .product-actions contains following elements:

• .product-actions__add-to-basket
• .product-actions__add-to-favorites

Example

Here is an example of product actions element usage.

HTML

<div class="product-actions">
    <div class="product-actions__add-to-basket">
        <button class="btn btn_primary">Add to basket</button>
    </div>

    <div class="product-actions__add-to-favorites">
        <button class="btn btn_primary">Add to favorites</button>
    </div>
</div>

Product Actions tags

The .product-actions classes were designed to be used with block elements like <div>. However, you can use them with any other element and customize it to your own needs.

LESS

You can modify any product actions less variable in your User Less section to change product actions styles.

Product Actions styles

Here are standard product actions styles.

.product-actions {
    display: flex;
    column-gap: @globalSpacing * 0.5;

    &_no-gap {
        column-gap: 0;
    }

    &__wrapper {
        width: 100%;
        max-width: 600px;
    }

    &__buy-button {
        display: block;
    }

    &__availability-notifier-btn {
        width: 100%;
    }

    &__setup-bundle {
        display: block;
    }
}

Modules reference

• product_actions