WP Bakery / Visual Composer custom css on WooCommerce shop page

functions.php

<?php

// The issue: 
// You want to use WP Bakery for your WooCommerce shop page. 
// You can enable WP Bakery for that page, but custom Design Options are not showing.

// The explanation:
// WP Bakery keeps those custom design changes as a CSS string, stored as post meta on the page you are using for your shop page.
// Unfortunately that CSS is not being output by your theme, hence your custom design changes are not working.

// The solution:
// Output that missing CSS yourself.
// Clues found here: https://wordpress.org/support/topic/visual-composer-wp-bakery-custom-css-styles/ but George is wrong, you need BOTH meta keys

function mytheme_woocommerce_wpb_custom_css(){   	
    if(is_shop()){ //I am only doing this for the shop page, you can adjust as needed

        $shop_page_id = get_option('woocommerce_shop_page_id');

        //There are actually two meta values we need to check, _wpb_shortcodes_custom_css and _wpb_post_custom_css

        $shortcodes_custom_css = get_post_meta( $shop_page_id, '_wpb_shortcodes_custom_css', true );
        if ( ! empty( $shortcodes_custom_css ) ) {
            echo '<style type="text/css" data-type="vc_shortcodes-custom-css-'.$shop_page_id.'">';
            echo $shortcodes_custom_css;
            echo '</style>';
        }
        
        $post_custom_css = get_post_meta( $shop_page_id, '_wpb_post_custom_css', true );
        if ( ! empty( $post_custom_css ) ) {
            echo '<style type="text/css" data-type="vc_custom-css-'.$shop_page_id.'">';
            echo $post_custom_css;
            echo '</style>';
        }
    }	
}
add_action('wp_enqueue_scripts', 'mytheme_woocommerce_wpb_custom_css');

thank you, this has been bugging me for a while.