Hi
I’m trying to add the WooCommerce checkout shortcode to a page using a function, but the styling breaks.
But if I add the shortcode directly to the page using the block editor it displays fine.
I can see there are missing CSS files and classes when I try to use the function compared with using the block editor.
Is there a way around this? Or is the only way to add the shortcode directly using the block editor?
My page with shortcode added using a function: https://katpilates.co.uk/dev3/
My page with shortcode using the block editor: https://katpilates.co.uk/dev4/
My function:
add_filter( 'the_content', 'my_function', 1);
function my_function($content) {
$fullcontent = $content;
if ( is_page(4573) && is_singular() && in_the_loop() && is_main_query() ) { //check if it's the course page & if we're inside the main loop in a single Post.
$product_id = 4513; //specify the product id
$product = wc_get_product($product_id);
$stock_status = $product->get_stock_status();
if ( 'instock' == $stock_status) { //if product in stock
return $fullcontent .= '[woocommerce_checkout]';
} else {
return $fullcontent .= '<p class="stock out-of-stock">Sold out</p>';
}
}
return $fullcontent;
}