CSS class not updating HTML content - html

Question

I have an eCommerce store on WordPress. We just migrated from Opencart to WordPress and have been having issues regarding the product description.
All our products have different CSS in the description and we were hoping it could be done the way its done in opencart (where css tags start with style tag and followed by HTML classes which are referred in HTML tags).
An example of the code from OpenCart is pasted below to give an idea:
I tried doing the same thing that I did for opencart but that doesn't seem to work in the product description editor on wordpress. It's just taking the HTML tags and totally ignoring the css tags.
<style>
body {
font-family: Open Sans, Arial, Helvetica, sans-serif
}
#topDiv {
font-family: Arial, Helvetica, sans-serif
}
.tt1 {
color: #000;
font-size: 16px;
font-size: calc(100% + 24 * (100vw - 320px) / 1600);
font-size: calc(16px + 24 * (100vw - 320px) / 1600);
line-height: 1.2;
font-weight: 700
}
</style>
<div class="tt1">Pair Seamlessly</div>
It's just displaying "Pair Seamlessly" without any formatting that should be coming from the css tag

Answer 1

I haven't done a lot of work in wordpress, but from what I know I believe there is specific file where you put all your CSS. Here's an article that might help. How to Find WordPress CSS File

Answer 2

Because all of your products rely on the same file (e.g. single-product.php or something similar) all the css you write for this file will be applied to al of your products. The easiest thing you can do is to give your products an ID. You can achieve this by passing the_ID(); into your while loop. Each product will have his own ID, so every product can have its own styling.
So basically you'll get something like this:
<ul class="products">
<?php
$args = array(
'post_type' => 'product',
'posts_per_page' => -1
);
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) :
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="product" id="product-<?php the_ID(); ?>">This is your product</div>
<?php endwhile;
else :
echo __( 'No products found' );
endif;
wp_reset_postdata();
?>
Now you can style your products like for example this way
#product-1 {
background-color:red;
}
Styles should be applied in its own stylesheet, which should be enqueued in functions.php
The following documentation should give you enough guidance in how to do so:
https://developer.wordpress.org/reference/functions/wp_enqueue_style/

Answer 3

I found the answer. Insert the following code to your child's theme functions.php file:
add_action( 'woocommerce_after_add_to_cart_button', 'css_for_products', 30 );
function css_for_products() {
global $product;
if ($product->id == 784 or $product->id == 832 )
{
wp_enqueue_style( 'sample-code', 'https://www.yoursite.com/css/custom.css',false);
}
Where custom.css is the css file that will be uploaded to the above location. Add more conditions for different products.