Get Started
FunnelKit Documentation
Get unstuck with our helpful reference material

Checkout Pages

How to Show Different Layouts of Checkout Forms on Desktop and Mobile

If you want to show different layouts of Embed Form for Mobile and Desktop devices, you will need to use two shortcodes on the same page using the 'mode' attribute within the shortcode.

For Desktop

For desktop devices use this shortcode with the attribute:

[wfacp_forms id='1236' mode='desktop']

For Mobile

For mobile devices use this shortcode with the attribute:

[wfacp_forms id='1236' mode='mobile']

The mode parameter will help you to identify the embed form for desktop or mobile view.

Shortcode for mobile

Now after adding the mode parameter, you will need to wrap the shortcode with CSS class names 'wfacp_desktop_only' and 'wfacp_mobile_only' to adjust the visibility of the shortcode.

By this, you would be able to use the product page with two (same) checkout form shortcode on a different location on the page.

Note: Keep the ID same for both forms. You can't display multiple checkout forms on a single page. One embed page contains only one single checkout page with single ID. You can duplicate the form but add the attribute as shown above.

That's it! This is how you can show different layouts of Checkout forms on Desktop and Mobile.