Venda Cruzada – Cross Sell no M2

Apesar de ser uma estratégia muito parecida com os produtos relacionados (eu entendo a confusão), a venda cruzada é utilizada de maneira muito peculiar. Podemos comparar com os caixas de supermercado, quando você está na fila, aguardando sua vez, e ao seu redor tem vários chocolates, refrigerantes, pilhas, e diversos outros itens que induzem você a gastar mais.

No nosso caso, a “fila do caixa” é a página do carrinho de compras. Onde o cliente controla a quantidade de itens, pode usar um cupom de desconto, calcula seu frete… e… pode ser induzido a levar mais alguns produtos (cross selling).

Escolha suas armas

Acesse o admin da sua loja, vá no menu Catalog > Products > Escolha um produto para editar.

Procure por Related Products, Up-Sells, and Cross-Sells (Produtos Relacionados, Venda Agregada, Venda Cruzada). Clique no botão Add Cross-Sell Products [Adicionar Produtos Relacionados].

Na janela que abrir, você pode usar o Filtro para selecionar alguns produtos. Depois basta marcar o checkbox à esquerda dos itens que deseja conectar, e por fim, clicar no botão Add Selected Products [Adicionar Selecionados].

Feito isso, clique no botão Salvar no alto da tela.

Veja o resultado

Para este tipo de configuração, não é necessário limpar o cache, basta atualizar a página do produto e o resultado será imediato (há não ser que você utilize algum sistema de cache externo, como Cloudflare ou Redis e precise forçar atualização).

Role a página para ver o resultado. A forma como os produtos serão exibidos depende do seu tema, por isso não há maneiras de customizar isso no admin. A frase “More Choices:” pode ser alterada de diversas maneiras, veja o post sobre tradução customizada.

Codificando a Venda Cruzada

Caso queira transformar a maneira como estes produtos são exibidos, existem basicamente três formas: XML, phtml, e CSS.

O XML você encontra em:
/vendor/magento/module-checkout/view/frontend/layout/checkout_cart_index.xml

<block class="Magento\Checkout\Block\Cart\Crosssell" name="checkout.cart.crosssell" template="Magento_Catalog::product/list/items.phtml" after="-" ifconfig="checkout/cart/crosssell_enabled">
    <arguments>
        <argument name="type" xsi:type="string">crosssell</argument>
        <argument name="view_model" xsi:type="object">Magento\Catalog\ViewModel\Product\Listing\PreparePostData</argument>
    </arguments>
    ...
</block>

Procure também dentro do tema:
/vendor/magento/theme-frontend-luma/Magento_Checkout/layout/checkout_cart_index.xml

Evite alterar arquivos da pasta “vendor”. Faça sempre uma cópia para dentro do seu template/tema customizado, e edite a cópia. Referência versão Community: 2.4.1

O phtml você encontra em:
/vendor/magento/module-catalog/view/frontend/templates/product/list/items.phtml

case 'crosssell':
        /** @var \Magento\Catalog\Block\Product\ProductList\Crosssell $block */
        if ($exist = count($block->getItems())) {
            $type = 'crosssell';
            $class = $type;

            $image = 'cart_cross_sell_products';
            $title = __('More Choices:');
            $items = $block->getItems();

            $showAddTo = true;
            $showCart = true;
            $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
            $description = false;
            $canItemsAddToCart = false;
        }
        break;

Tenha atenção, pois o mesmo arquivo que controla o cross-sell também é usado para upsell (venda agregada) e para o related (relacionados). O código está todo amarrado.

O CSS/LESS você encontra em:
/vendor/magento/theme-frontend-luma/Magento_Catalog/web/css/source/_module.less

E javascript não!? Sim… é uma opção, mas geralmente ele será importado via XML, ou estará embutido no phtml.

Mais informação sobre Venda Cruzada…

Esta estratégia pode ser usada para estimular um ticket médio maior, por exemplo, se você combinar a venda cruzada com um frete grátis acima de R$ 200 reais. Imagine que o cliente possui R$ 150 no carrinho, você poderia informar “Com mais +50 reais em produtos você leva frete grátis! Aproveite uma de nossas ofertas abaixo:“, e logo abaixo os itens com valor igual ou superior a 50 reiais (no cross sell).

Aproveite e veja também os artigos Produtos Relacionados no M2, Produtos Agregados no M2. Você também encontra aqui no post o artigo Venda Cruzada para M1.

Se tiver interesse em aprender mais sobre a administração dos recursos da sua loja, conheça o curso Como usar, gerenciar e administrar uma loja M2.

Encontre diversos temas de alta qualidade para deixar sua loja com uma aparência ainda mais profissional em ThemeForest.

Sucesso!