Need to separate the div of product image container to add a background color

[faizan]

I want to add a bg color to the highlighted part of single product page and hence I need to create a div and a add class to that div.

I am unable to do it via CSS only as it can’t be done with the current structure of elements.

Please let me know how do I separate the div for the highlighted part, or which file can I edit to separate this div?
Thanks

[Prasant]

Hello @faizan,

Thanks for asking.

Actually by plain CSS it’s a bit difficult to assign background color to the area you are referring too in single product page. You will need to make changes in the theme files to get desired output. Please note that above changes will require custom development work which falls outside the scope of support we can offer. That being said please note that there are multiple files responsible for displaying the product content and most of them are coming from WooCoomerce plugin itself. However, to get started you can take a look at woocommerce.php under /wp-content/themes/x/framework/functions/plugins/.

Before making the required changes I suggest you to install and setup child theme. You can use following resources to download and setup child theme.

Download Child theme from following source: https://theme.co/apex/child-themes

Please take a look at following article to setup child theme:

Child Themes | Themeco Docs

Best Practices | Themeco Docs

In case you are not comfortable with programming, please take help of a developer.

Thanks.