AeroCheckout- Custom WooCommerce Checkout Pages

  1. Home
  2. Docs
  3. AeroCheckout- Custom WooCommerce Checkout Pages
  4. Embed the Checkout Form
  5. How to show different layouts of embed form on desktop and mobile

How to show different layouts of embed form 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 “mode” attribute within the shortcode.

For Desktop

For desktop devices use this shortcode with the attribute:

[wfacp_forms mode=’desktop’ id=’1236′]

For Mobile

For mobile devices use this shortcode with the attribute:

[wfacp_forms mode=’mobile’ id=’1236′]

This 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 showing above.

How can we help?