I’ve created a simple custom wordpress theme to be integrated with woocommerce and i have trouble importing woocommerce internal css to my theme over functions.php. My intention was to edit the product archive page template so it contains a sidebar by importing woocommerce archive-product.php and content-product.php to my theme themes/my-theme/woocommerce and modifying their content.

I successfully added those templates to my theme using add_theme_support(‘woocommerce’); but the only problem is that they render in raw html and now i don’t now how to access woocommerce default css properties. This is my current functions.php, help me modify it so that my customized templates have access to woocommerce.css and woocommerce-layout.css:

<?php

function klima_uredaji_hrvatska_files() {
    // Enqueue the main stylesheet (style.css)
    wp_enqueue_style('klima_uredaji_hrvatska_main_style', get_stylesheet_uri());

    // Enqueue the compiled Tailwind CSS stylesheet
    wp_enqueue_style('tailwindcss', get_template_directory_uri() . '/src/output.css', array(), '1.0', 'all');
}

add_action('wp_enqueue_scripts', 'klima_uredaji_hrvatska_files');

function add_woocommerce_stylesheet() {
    if ( class_exists( 'WooCommerce' ) ) {
        echo '<link rel="stylesheet" href="' . esc_url( plugins_url( 'woocommerce/assets/css/woocommerce-layout.css' ) ) . '" type="text/css" media="all" />';
    }
    if ( class_exists( 'WooCommerce' ) ) {
      echo '<link rel="stylesheet" href="' . esc_url( plugins_url( 'woocommerce/assets/css/woocommerce.css' ) ) . '" type="text/css" media="all" />';
    }
}
add_action('wp_head', 'add_woocommerce_stylesheet');


// WooCommerce Support
add_theme_support('woocommerce');