Trouble displaying Woocommerce product images and descriptions

I'm facing an issue with the WooCommerce plugin on my WordPress website. When I add a product to a category, I can see the picture in the category list, but it doesn't show up on the actual product page. Even after playing around with CSS properties like opacity, z-index, and position using inspect element, the picture is still not visible. I've also tried using !important but no luck.

The description is also missing from both the category and product pages.

You can visit my page here: LINK

The Wordpress template I am using is Illdy.

htmlcsswordpresswoocommerce

Answer №1

After reviewing the link you shared, I noticed that the div with the class name (woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images) has an opacity of 0. To display the image, try changing the opacity to 1 or disabling it. This issue may be linked to your JavaScript file.

Answer №2

Have you ever wondered what would happen if you created a new "img1" class for images in the product post editor? Well, here's an idea: In the additional CSS section of your template customization, try defining it like this:

.img1 {
  display: inline;
}

I have a feeling that something within Illdy's default image class is causing them to be hidden. Can you spot where the issue lies?

Answer №3

Upon examining the element, it appears that the image is not being displayed due to an opacity setting. To rectify this issue, simply remove the "opacity:0" from your CSS code related to the page and perform a hard reload to ensure that the correct CSS is loaded. This is the method I used while inspecting.
https://i.sstatic.net/teuGz.png

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

The button component is unresponsive

An app was developed with a component containing signin and signup buttons on the right side. However, there is an issue where the Sign up button is not clickable. Below is the code snippet for the component => import React from "react"; expo ...

cssreactjsbuttonclickable

Prioritizing the validation of form controls takes precedence over redirecting to a different URL in Angular 2

Within an HTML page, there is a form with validation and an anchor tag as shown below: <form #loginForm="ngForm" (ngSubmit)="login()" novalidate> <div class="form-group"> <label for="email">Email</label> <i ...

htmlangularangular2-routingangular-validation

What could be causing this jQuery to malfunction?

Having trouble with the functionality of hasclass and this.addclass. if ($('.sidebar-menu-container li').hasClass('current-menu-item')) { $(this).addClass('expanded'); } Check out this CodePen for reference. ...

javascriptjqueryhtmlcss

Issue with HTML: The heading is not aligned on the same line as the logo

My goal was to create a website dedicated to Manchester United merchandise. I started by inserting the logo and adjusting everything accordingly, but I encountered an issue where the heading and line I inserted were not aligned properly. Here is the proble ...

html

How can I detect when an image is loaded in a specific container division using jQuery?

I have a container with multiple images inside, and I would like to capture an event each time an image finishes loading. For example: <div id="container"> <img src="..." /> <img src="..." /> <img src="..." /> ...

javascriptjqueryhtml

Adjusting the size of <nav> element to accommodate its child elements

I've exhausted all possible CSS solutions today in an attempt to make my parent nav tag home-main-nav-menu resize based on its children and grandchildren, but it just won't cooperate. If anyone could provide a clear explanation on how to solve th ...

javascripthtmlcss

React Native tutorial: Changing button color on press

When a user clicks on the TouchableOpacity element, I want to change the color of the button from the default gray to blue. Initially, the 'checked={this.state.newProjects}' newProjects variable is not present in the state, so when clicked it sho ...

javascriptcssreactjsreact-native

Why isn't my jQuery hover function working correctly?

How can I display a description on an image when hovering over it? I've been attempting to achieve this using jQuery, but the function doesn't seem to be working. Will my other functions interfere with each other even though they utilize differen ...

javascriptjqueryhtmlcss

Using jQuery to establish a canvas element and define its dimensions by adjusting its width and height attributes

My attempt at using jQuery to create a canvas element was not quite as expected. Here is the code I tried: var newCanvas = $('<canvas/>',{'width':100,'height':200,'class':'radHuh'}); $(body).append(n ...

javascriptjquerycanvashtml

How can I show two unique chart modals simultaneously?

Below is the chart that I am currently working on: https://i.stack.imgur.com/bHSj6.png While I am able to display the charts separately, I am encountering difficulties when trying to display both of them on the same chart line. <!DOCTYPE html> < ...

htmlcsscanvascharts

Adjust the color of a link when it is hovered on a div, and also modify the link color when it is hovered over

Apologies for the specific title, but this finalizes the look of my website. Check out my current code below: .social { background-color: rgba(150,150,150,0.75); height: 150px; width:200px; margin: 20px; display: inline-block; transition: background ...

csshyperlinkhover

Accessing the value of a span element from the current element using JavaScript/jQuery

I am working with <select> elements that have price information within a span tag for each available option. My goal is to retrieve the value of the span associated with the selected option of each select element. Here is my current code: <select ...

javascriptjqueryhtml

Tips for combining text and variable outcomes in printing

I created a calculator that is functioning correctly and displaying results. However, I would like to include a text along with the results. For example: You spent "variable result" dollars in the transaction. Currently, the results are shown only after ...

javascripthtml

Arrange flexbox containers side by side in a horizontal row

I am attempting to create two flexbox containers one after the other, utilizing a combination of classes to achieve this layout. While the flexbox is created successfully, I encounter an issue where the lower container goes below the upper one when scrolli ...

htmlcssdjangobootstrap-4flexbox

Possible rewrite: "Unable to use jQuery to add elements to data fetched through AJAX requests."

I am looking to add a button to copy code inside every div that has a class starting with language. The code is functioning properly, however, after attempting to retrieve data from the database using Ajax, the button no longer appears in the div as it did ...

javascriptphpjqueryhtmlajax

Tips on locating the various font-weights offered in a personalized font CSS document

I am currently developing a unique feature that allows users to upload a .css file and utilize it within our editor. To achieve this, I need to identify the various font-weight values present in the file, so that they can be displayed in a dropdown list in ...

javascriptcssfontsfont-facecustom-font

A guide on writing inline JavaScript event handler code in a React component with the use of "this"

I need to convert a HTML code into JSX format. <div id="parent"> <div id="child" onclick="this.parentElement.style.background = 'orange';"> <img src="img/img2.png">< ...

javascripthtmlreactjs

How can Chinese characters be transformed into XML/HTML-style numerical entities and converted into Unicode UTF-8 encoding?

I have a situation where I need to change a text that contains both English words and Chinese characters into a format that includes XML/HTML-style numerical entities for the Chinese characters. Here's an example of the original text: Title: 目录. ...

pythonhtmlxmlregexcharacter-encoding

Background images will not display in a repeating manner on a mobile browser

I am currently facing an issue where I have two backgrounds, one as an image without repeating and the second with repeating in both x and y axis. Everything displays correctly on PC, but on mobile browsers the second image only repeats on the x axis. Here ...

htmlcssmobilebrowserbackground

Activate the use of sqlite HTML5 functionality within Firefox

Struggling to generate a database using HTML5 sqlite in Firefox and cannot seem to make it work. Unfortunately, it appears that Firefox does not support this feature. Is there any alternative method for using it in Firefox? I have tested the code on both ...

htmlsqlitefirefox