Show Shopware Custom Products under variant selection

A big problem with the Shopware Custom Products plugin is that it does not allow you to set whether the variant selection should appear above or below the custom products options.

It often makes more sense for the user flow to first select a product variant and then make the extras or customizations. The necessary adjustments are also very limited, so we would like to give you a brief guide here:

Reading time 3 min

CUSTOMIZATION IN THE THEME

In your theme you have to overwrite two template files: frontend/detail/data.tpl and frontend/detail/content/buy_container.tpl

If the files do not yet exist in your theme, please create them.

Then make sure that the appropriate template file is extended at the very beginning (e.g. {extends file='parent:frontend/detail/data.tpl'} )

Now it's time to get down to business: Add the following block to data.tpl:

{* Custom products frontend hook *}
{block name="frontend_detail_data_swagcustomproducts"}
{* Custom products will be rendered elsewhere -- see detail/content/buy_container *}
{/block}

As already mentioned in the comment, we overwrite a block from the Custom Products plugin here to prevent the custom products options from being rendered where it actually happens - namely above the variants.

Next, we need to put them in the right place. To do this, insert the following block in buy_container.tpl:

{* Show custom products after variants but before quantity box *}
{block name="frontend_detail_index_buybox"}
{if !$customProductsIsEmotionAdvancedQuickView}
{include file="frontend/swag_custom_products/detail/wrapper.tpl"}
{/if}
{$smarty.block.parent}
{/block}

Now just save everything, clear the template cache and you should see the desired result on the corresponding product pages!

Basics for creating a Shopware theme

To create a Shopware theme, you first need a Shopware store and a server with Shopware 5 (or even Shopware 6) installed. If you want to work on your theme locally first, get the MAMP server environment. Shopware 5 already has a bare theme, which contains important files that are used as the basis for every theme - this can be found in the themes folder. If you want to create a new theme, go to the Theme Manager in the Shopware backend. Now go to Create theme and fill in all fields such as name, short description, license and author and save the whole thing. You can assign the theme to a store using the Assign command.

This completes the first step in creating your theme. If you need more information about creating an online store with Shopware, please visit our website. If you have any further questions, we at EXWE, as a professional Shopware agency, are of course at your side and offer you support from online store creation to monthly support & monitoring. Feel free to contact us!