Flux Checkout for WooCommerce doesn’t include the theme’s header and footer by default. We recommend keeping it this way because it’s designed to increase conversions and reduce distractions. If, however, you still want to add your WordPress theme’s header and footer, we’ll attempt to guide you.

Adding the header and footer can be tricky because each theme is built differently and has its own HTML and CSS. However, this article will guide you by providing a starting point.

Note: The techniques in this article are advanced. Please only use them if you’re a developer or have advanced coding knowledge.

Adding your header and footer

Add this code snippet to functions.php to include the header and footer:

<?php
add_action( 'flux_before_layout', 'get_header' );
add_action( 'flux_after_layout', 'get_footer' );

This would show the header and footer, but it will not look as expected. This is because Flux Checkout dequeues extra CSS files to avoid conflicts with the theme’s CSS.

The solution to this problem is to allow each CSS file you want to be enqueued using the `flux_checkout_allowed_sources` filter. Here’s an example:

<?php
/**
 * Flux checkout - Allow custom CSS files.
 *
 * @param array $sources Sources.
 *
 * @return array
 */
function flux_allow_custom_css_files( $sources ) {
	$sources[] = 'http://site.com/wp-content/themes/storefront/style.css';
	return $sources;
}
add_filter( 'flux_checkout_allowed_sources', 'flux_allow_custom_css_files' );

In the above snippet, we have included the style.css from the theme, but based on your theme, you might need to include more files.

Once this is done, it should improve the layout a lot. But depending on the theme’s implementation, it could break some elements of the checkout page. For example, in the screenshot below, you’ll notice that the search bar shows bullets, and the shipping methods section does not cover the full width.

To solve these issues, you’ll need to add some custom CSS to the specific elements. It is beyond the scope of this article to fix those issues as they will be different for each scenario. We would suggest hiring a developer to fix these issues.