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

AeroCheckout- Custom WooCommerce Checkout Pages

  1. Home
  2. Docs
  3. AeroCheckout- Custom WooCommerce Checkout Pages
  4. Third Party Page Builders (Custom)
  5. How to Show Different Layouts of Checkout Forms on Desktop and Mobile

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.

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

By this, you would be able to use the product page with two (same) checkout form shortcode on 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.