Stuck on changing the background color of a DIV in WooCommerce product descriptions with CSS

I seem to be stuck on a simple fix and despite searching everywhere, I can't seem to make it work. The problem lies within WooCommerce on my WordPress site, where I suspect that my CSS is conflicting with WC's and causing some color problems.

You can find the page in question here -

My goal is to change the background of the product description from white to #272727 and the text to #ffffff. Additionally, you'll notice that the selected tab is also white along with the text, which isn't ideal.

I believe this is a CSS issue and although I've attempted different solutions, nothing seems to work.

If anyone could provide guidance on where and what adjustments I need to make to resolve this, I would greatly appreciate it!

Thank you in advance!

csswordpresscolors

Answer №1

To resolve the issue, add the following CSS code to your active theme's stylesheet:

.woocommerce div.product .woocommerce-tabs .panel{
background-color: #272727;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
background-color: #d3ced2;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{
color:#272727;
}

Simply adjust the color values as needed for your design preferences.

UPDATE:

.single-product.woocommerce #primary div.product .woocommerce-tabs .panel{
background-color: #272727;
}
.single-product.woocommerce #primary div.product .woocommerce-tabs ul.tabs li{
background-color: #d3ced2;
}
.single-product.woocommerce #primary div.product .woocommerce-tabs ul.tabs li.active a{
color:#272727;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to create a single column for each item in a foreach loop with bootstrap?

I am working on a web development project for my school where I need to create a Trello-like application. I am having trouble figuring out how to generate one column per element in my foreach loop to display the board with different columns. Any guidance o ...

phphtmlcssbootstrap-4

Softening the edges of a table

Could you assist me in rounding the corners of my table? I attempted using the basic border-radius, however, it only separated the border at the corners. Do you think this issue is due to my browser (Firefox) or could it be a bug? You can view my Jsfiddl ...

htmlcsscss-tables

How to incorporate diagonal lines in CSS within its parent container?

Is there a way to create a diagonal line that fills in and fits perfectly into a box using just CSS, without the need for any background images? div.diagonal-container { border: 1px solid #000; width:400px; height:400px; margin: 0 auto; ...

htmlcsscss-transformsdiagonal

What is the best way to determine font size based on the width of the

In order to ensure that certain elements on my page do not exceed specific widths, it is crucial for me to use a monospaced font. This will limit the horizontal "stride" between characters to stay within a specified threshold. However, simply setting the ...

cssfonts

Display an image overlaying a div

I am attempting to position an image outside of its parent div in such a way that it appears to be sitting on top of the div without affecting the height of the parent. However, no matter what I attempt, the image consistently gets clipped by the parent di ...

htmlcssimagecss-floatcss-position

Center the content of the HTML body

Despite my best efforts, I seem to be making a mistake somewhere. While creating a bootstrap website at , the site appears well and aligned in the center. However, when I try to adjust the screen size to less than 850px or even smaller, all the content shi ...

phphtmlcsstwitter-bootstrap

Learn how to apply CSS styles from one component to another in Angular

I am attempting to modify the background color of a wrapper from a different component. I tried using ::ng-deep but it's not functioning correctly. For the mauto component, the background should be a solid block color. For the vgud component, the back ...

cssangularangular12

Animate the CSS with a delay using styled-components

Is it possible to delay the opacity to zero when a certain condition is met? The loader bar is controlled using JavaScript, but can this delay be achieved using CSS alone? const Wrap = styled.div` background: #ddd; width: 100px; height: 10px; bord ...

javascriptcssreactjs

Increasing the size of the entire page can be achieved using the three.js dom element

I am currently working on creating a 3D viewer using three.js. My goal is to have the viewer take up the full height of the screen while also leaving space for a side panel. The vertical layout is functioning properly, but once I add the render's dom ...

javascripthtmlcsslayoutthree.js

Looking to showcase website HTML code by simply clicking on a banner image?

I am looking to implement a feature where banner HTML code is displayed in a popup on website when the banner is clicked. For instance, an example of a banner could be: <img src="https://myweb.com/images/banners/1.gif"> Upon clicking the banner im ...

javascripthtmlcss

Various web browsers (display: -webkit-inline-box;)

Recently, I encountered an issue with my CSS code: .tudo ul { width: 100%; margin: 0px; display: -webkit-inline-box; } Surprisingly, Mozilla Firefox does not recognize the following line: display: -webkit-inline-box; Is it possible to set d ...

cssbrowser

Dealing with JQuery and CSS issues on Internet Explorer

Recently, I've been working on a code snippet to maximize a video panel upon page load or resize. Utilizing JQuery 1.4.4, the implementation has been smooth sailing on Chrome, Firefox, and Safari. Drawing inspiration from various online resources, I&a ...

javascriptjquerycssinternet-explorerwidth

Activate the Chrome Extension that allows you to open a link in a new tab with just a middle click or regular click, without closing the popup

When I try to click a link in my extension popup and open it in a new tab using "middle click -> open link in a new tab", the popup closes. Is there a way to keep the popup open so I can click on multiple links from my extension without interruption? A ...

javascriptjquerycssgoogle-chromegoogle-chrome-extension

Text that is inside a grid item will not be cut off using an ellipsis

For some reason, the ellipsis isn't showing up as expected. Instead of truncating with an ellipsis, the text just goes to the next line. text { display: inline; overflow: hidden; text-align: center; text-overflow: ellipsis; } grid { ...

htmlcssoverflow

Achieving horizontal scrolling for tables without using div wrappers

Whenever the width of tables in my articles exceeds the available space in the webpage layout, I wanted to enable horizontal scrolling. Despite trying to accomplish this with CSS alone, I was unsuccessful. As a result, I resorted to enclosing everything i ...

htmlcssoverflowcss-tables

Incorporate unique custom posts into the WordPress loop for a touch of randomness

I've been struggling to solve a problem and haven't had much luck. I've searched on Google, Stack Overflow, etc., but all I find are generic answers. Here's the issue: I'm using a standard loop to get my posts <?php if ( have ...

phpwordpress-themingwordpress

How to manage the three states (InProgress, Success, Error) of a dropdown dynamically in AngularJS with ng-show/hide?

Currently, I have implemented a bootstrap dropdown that loads a list of countries by making an external API call. My goal is to display three different states of behavior (progress, success, error) in the dropdown using ng-show/hide. However, I am unsure h ...

javascriptjquerycssangularjstwitter-bootstrap

Can MUI 5 replicate the Emotions 'css' function through analog?

From what I've learned, MUI 5 utilizes Emotion for its styling framework. Emotion offers a convenient helper function called css, which generates a string - a class name that can be used as a value for the className property or any other relevant prop ...

cssmaterial-uiemotioncss-in-js

AngularJs - Customizable dynamic tabs that automatically adapt

Below is the HTML code snippet: <div> <ul data-ng-repeat ="tab in tabs"> <li data-ng-class="{active: tab.selected == 'true'}" message-key="Tab"> </li> </ul> </div> As shown ...

javascripthtmlcssangularjstwitter-bootstrap

What might be causing the jQuery UI Spinner arrow buttons to not appear?

Once I implemented a very basic version of the jQuery UI Spinner Widget, I encountered an issue where the up and down arrow buttons were not displaying. Clicking on the area where the buttons should be triggered the Spinner events and the number incremente ...

htmljquerycssjquery-uibootstrap-4