HTML content does not reflect changes made to CSS class

Question

HTML content does not reflect changes made to CSS class

My eCommerce store is on WordPress and we recently switched from Opencart. We're facing some challenges related to product descriptions. Each product has its own unique CSS in the description, similar to how it was done in Opencart with CSS tags starting with a style tag followed by HTML classes referenced in HTML tags.

Here's an example of code used in OpenCart:

I attempted to implement the same method in WordPress for product descriptions but it doesn't seem to be working as expected. The editor is only recognizing the HTML tags and not applying the CSS styles.

<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>

The displayed content shows "Pair Seamlessly" without any styling applied from the CSS tag.

html css wordpress woocommerce

Answer 1

Answer №1

While my experience with wordpress is limited, I do believe there is a designated file where all CSS can be placed. If you're interested in learning more, check out this helpful article: Discovering the WordPress CSS File

Answer 2

While my experience with wordpress is limited, I do believe there is a designated file where all CSS can be placed. If you're interested in learning more, check out this helpful article: Discovering the WordPress CSS File

Answer 3

Answer №2

If you want to customize the styling of each product on your website, you can give them individual IDs using WordPress. By adding an ID to each product within a loop, you can target specific products with unique CSS styles.

For example, you can use the following code snippet:

<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();
?>

After assigning IDs to your products, you can style them individually by targeting their respective IDs in your stylesheet like this:

#product-1 { 
   background-color:red; 
}

To ensure that your styles are applied correctly, make sure to enqueue your stylesheet in functions.php as outlined in the WordPress documentation here: https://developer.wordpress.org/reference/functions/wp_enqueue_style/

Answer 4

If you want to customize the styling of each product on your website, you can give them individual IDs using WordPress. By adding an ID to each product within a loop, you can target specific products with unique CSS styles.

For example, you can use the following code snippet:

<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();
?>

After assigning IDs to your products, you can style them individually by targeting their respective IDs in your stylesheet like this:

#product-1 { 
   background-color:red; 
}

To ensure that your styles are applied correctly, make sure to enqueue your stylesheet in functions.php as outlined in the WordPress documentation here: https://developer.wordpress.org/reference/functions/wp_enqueue_style/

Answer 5

Answer №3

I have discovered the solution. Simply include the code snippet below in your child theme's functions.php file:

    add_action( 'woocommerce_after_add_to_cart_button', 'apply_css_for_products', 30 );

function apply_css_for_products() {
  global $product; 
    if ($product->id == 784 or $product->id == 832 )
    {
    wp_enqueue_style( 'custom-style', 'https://www.yoursite.com/css/custom.css',false);
    }

Make sure to replace custom.css with the name of your CSS file and adjust conditions as needed for different products.

Answer 6

I have discovered the solution. Simply include the code snippet below in your child theme's functions.php file:

    add_action( 'woocommerce_after_add_to_cart_button', 'apply_css_for_products', 30 );

function apply_css_for_products() {
  global $product; 
    if ($product->id == 784 or $product->id == 832 )
    {
    wp_enqueue_style( 'custom-style', 'https://www.yoursite.com/css/custom.css',false);
    }

Make sure to replace custom.css with the name of your CSS file and adjust conditions as needed for different products.

HTML content does not reflect changes made to CSS class

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing Skeleton to create a cropped text button on an iPhone

Using Typescript to mute audio elements within HTML documents

What is the best way to adjust the height of a div element according to the width of its child element?

Sending JSON Data over URL

Steps for arranging text in a dropdown list option

What is the correct way to display my data in a table using XSLT?

Hover interactions with links and their associated containers

Having trouble getting Tailwind CSS to work with React components?

The getelementbyid function is unable to locate the specified button identifier

Tips for effectively sizing a logo within a Bootstrap navbar

Injecting AngularJS directives and styling elements into the body section of a Twig template using the {% block body %} tag

Utilizing thumbnails and avatars within ion-slide in Ionic 2

What is causing my function to execute twice in all of my components?

Discovering keywords within HTML code and concealing particular content through jQuery

Displaying information in a table with a fixed column width and the

Transform a list element into three separate rows using Bootstrap

Change the element's color to match the default anchor link

Issue with Jquery function not executing on second attempt

Vue.js application returning 404 error when trying to include a script in index.html

What is the best way to minimize the number of files being referenced for compilation?